Using Bootstrap With React

In our modern day of web development there’s so much out there that people before us have created to make it easier to construct complex apps with ease. React, in and of itself, is one of those technologies, but the focus of this post is going to be on Bootstrap and how it integrates with React to push your app that much further with ease and speed.

Before we jump in, just want to quickly go over what Bootstrap is and what it can do, in case anyone may be unfamiliar. Bootstrap is a CSS and HTML library whose goal is to make it easy for developers to construct beautiful and comprehensive UI’s. Instead of having to come up with everything on your own from scratch, they’ve got all different types of components and styles ready to go that you can mix and match, adapt, and sometimes simply copy and paste into your own code. Next thing you know you have your own beautiful webpage.

React and Bootstrap

So while bootstrap stands alone, and can be used with any number of frontend frameworks, I’m going to talk about it with React as React is one of the most popular frontend frameworks and I recently built a project using the two together.

First thing that makes this such an easy match is that there is already specifically a react-bootstrap library with it’s own set of docs. This can be found here: https://react-bootstrap.github.io/

Getting started is incredibly easy. Just install the package:

npm install react-bootstrap bootstrap@5.1.3

Add this line to your top level index.js file:

import 'bootstrap/dist/css/bootstrap.min.css';

And you’re reading to start importing components from react-bootstrap.

Using Bootstrap In Your App

Once you’ve got everything set up all you need to do it import the components you want to use from react-bootstrap. It’s similar to any other components you would use. Here’s an example of the navbar I made in a recent project. First you import:

Then you build the navbar:

And here’s what it looks like on the webpage:

This is what it looks like on the actual react-bootstrap docs:

So you can see how I was able to take this base template and adapt it for what I needed in my application.

The navbar is one of my favorite components that bootstrap makes so easy to implement into your application. There are so many more so I strongly encourage just digging through the docs and seeing what’s there.

Flexbox and Responsive Design

The navbar and the buttons and forms are great, but possibly the most significant element of bootstrap (at least in my opinion) is how easy it makes incorporating flexbox and responsive designs.

Now these elements can be used for different type of components, but I’m going to focus on the card component just because that’s what I used in my project.

When thinking about how to setup a UI, so much has to do with how components are laid out, and what will happen as we move between different screens. Bootstrap’s grid system makes this about as easy as it can be.

Here’s an example from the official docs of how to implement the grid system:

Again you want to adapt this to what you may be trying to achieve in your own project, but it’s very simple to use the container, row, and column structure in whatever way you need to.

Here’s an example from my own project again:

Now each card component that I want on the page will be perfectly positioned and responsive. Here’s what it looks like in the browser:

This is where bootstrap really shines, in taking more complex design elements, and making them so easy to implement.

Conclusion

These days as a new developer sometimes it’s more about learning how to use different libraries and frameworks than actually learning how to code everything from scratch yourself. There are so many great technologies out there that people have created and it’s important to know how to take what you need and implement it to make your work that much better. React and Bootstrap are just two of the many that are out there that can be used together to build complex and dynamic UI’s. The more you explore the more you will discover, and that’s maybe the best part of the world of web development.