Boostrap in React

Hi, I had installed and am using Bootstrap styling in a React project, and styling for buttons and badges, and responsive columns work perfectly, but more advanced features like Collapse won’t work. Any suggestions?

Someone just asked a question about why CSS animations aren’t working in their React app, and I think this is exactly the same issue. React replaces HTML elements, so anything with animations isn’t going to work unless you render everything on the page at first and only use React to change classes/DOM element attributes.

There is a React Bootstrap library that handles this; it provides components that will allow you to do this. You can still use a load of the normal classes, but it also provides things like a Carousel component that will do what the carousel classes & associated JS provides for static HTML.

This might be obvious, but you also have to include the Bootstrap JS for accordions to work. It isn’t just the CSS.

Ah. i meant to say that, but I don’t think much will Just Work out of the box, it’s going to conflict with React, iirc it’s going to need the React-specific library

Thanks for all the responses and advice. I realize now what I experienced and what’s required to resolve the issue. In short, Bootstrap styles appear to work in React projects, such as Columns, Buttons and Badges, but Bootstrap interactive functions, such as Collapse, do not, so instead, I need to use “React-Bootstrap.”

There are lots of easy to follow tutorials on installing and working with React-Bootstrap, and as of this morning I’ve installed React-Boostrap into my project and demonstrated a working Collapse component. It will take a little getting used to the changes in coding requirements and syntax, most notably that Collapse’s sample code snippet includes a useState function, but it works!

1 Like

It should work, but considering it is doing plain DOM manipulation, I’m sure it isn’t without issues.

There is no reason to use plain Bootstrap when there is a component library anyway.