Use bootstrap 4 with react

ε祈祈猫儿з 提交于 2019-12-04 07:58:41

Certain functionalities such as dropdown, modal requires JS to manipulate the DOM, and bootstrap uses jQuery to handle the DOM manipulations.

However, React uses virtual DOM, so manipulating the browser DOM outside your React app through jQuery means React is potentially no longer handling state, events and UI rendering. And React broadly expects/assumes that nothing else will be modifying the DOM.


This is why react-bootstrap (for bootstrap v3) and reactstrap (for bootstrap v4) are recommended. The CSS remains exactly the same, but the components that initially require jQuery are rewritten.

Take this bootstrap 4 modal as example, you need to define modal state which determines whether the modal is being shown or hidden.

So essentially these react bootstrap libraries rewrite each bootstrap component into a React component, CSS wise it's entirely the same.

You should be looking to use react-bootstrap. Instead, you can install it using npm: $npm install --save react-bootstrap Find more about it on this link

just remember that it uses the Bootstrap v3.

Happy coding!

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!