The Advantages and Pitfalls of React Bootstrap for Beginners

Undoubtedly, the React Bootstrap UI framework is a powerful and effective tool. There’s a reason why it’s unequivocally regarded as one of the best and most popular front-end frameworks. However, as one goes deeper and deeper down the “framework” rabbit hole, the question of “how easily can I pick this up?” is an easy question to pose.

In my experience, I found React Bootstrap to be far simpler than traversing the often directionless sea that is vanilla CSS and Javascript. However, this does not mean that all was simple by any means.

In short, React Bootstrap is an imported library consisting of a large variety of customizable components. Some features, like the “Card” component, allowed me to render my information in a seamless and aesthetically pleasing way. Other aspects, such as the design rigidity that came with many components, proved to perhaps be more trouble than they were worth.

For example, let’s take a closer look at the “Accordion” component. Clearly, this pre-packaged drop-down information box is incredibly convenient to have with just a simple import statement. However, problems arose when I wanted to change the theme of my Web app to one that was more akin to a “dark mode”. Changing the “Button” component from white to a dark gray was as simple as making this expression in my JSX:

<Button onClick={() => likeProperty()}id='like-button'>{like ? 'Unlike' : 'Like'}</Button>

look like:

<Button onClick={() => likeProperty()} variant="dark" id='like-button'>{like ? 'Unlike' : 'Like'}</Button>

However, changing the appearance of my “Accordion” component required a little more grunt work. Altering the CSS was required, and having to manually inspect each element from my browser to see where each element was altered in Bootstrap’s CSS was tedious to say the least. For example, having to alter the “button.accordion-button.collapsed” element in my CSS to change the border color or change the background image of “.accordion-button:after” prompted many, many trips to Stack Overflow— not to mention the fact that a sizable portion of the solutions on Stack Overflow were outdated.

Still, though, I pushed on, and created a product I’m fairly proud of, UI-wise.

All in all, having pre-packaged components for my UI was, in the end, extremely beneficial. I could focus on functionality rather than toiling away at CSS, and I had just enough customization ability to allow me to display my information in the way that I wanted. The components themselves also, from a design perspective, look modern and sleek. Although I had some trouble with that pesky Accordion component, I still would’ve felt much more pain had I tried to do everything with custom CSS.