Changing css styles after translating html bootstrap into react.js jsx style
Question
I have simple structured project: html (with Bootstrap) css and js file. I've created React.js project (via create-react-app in npm). I've installed Bootstrap,JQuery and so on. The problem is that when I've translated my html file into jsx React seems to ignore the styles (which I applied as normal in React). It ignored the grid. I have 3 rows with one element on the left side in one of them and two rows with 3 elements (col-sm-4 col-md-4 col-lg4) in each row. In my old project (pure html, css, js) it works fine but in this React project it behaves like ... it would be in mobile version (one element below another in every row). Meanwhile using dev tools I see that this rows and cols still existing in browser code but have empty styles ... could you please tell me what is going on ? Where should I search reason of this problem ?
1 answers
solution1
0 ACCPTED 2018-12-06 18:54:56
If you're just using standard React, you'll want to include the following in your <head></head> tag inside public/index.html :
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
If you're using a builder such as Webpack, run npm install bootstrap and include the dependency inside your src/index.js .
Assuming all of that is properly done, the correct way to style react components is as follows:
Styling tag directly:
<div style={{margin: '10px'}}>This is a div!</div>
Styling with a Bootstrap class:
<button className="btn btn-primary">Click me!<button>
Useful links:
https://getbootstrap.com/docs/4.1/getting-started/introduction/
https://blog.logrocket.com/how-to-use-bootstrap-with-react-a354715d1121
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.