How To Set Up Bootstrap React

For a recent project of mine, I recently had to setup a CSS Framework for my frontend, and wanted to go through a step-by-step process of how I set it up within my app.

Start with the “Why”

This is more of a conceptual step in my process, and this is purely my opinion, but start with they why of Bootstrap. Are the components the ones you want to use. Have you looked at other options like Bulma or Semantic-UI? When I’m laying out my roadmap for any project, when considering styling, I try to at least consider which option I will use, and which would be the best for each project.

Then, to the documentation

In my particular case, I was building my project in React, so I used React Bootstrap for my project, and the documentation is linked here. I have said in previous posts, and I’ll say again, always start with the documentation, whether its implementation or debugging. A lot of trial-and-error time can be saved just by reading the instruction manual, whether in coding or in other areas.

Installation

Using your terminal, you’ll navigate to wherever your project is stored, and run this line (assuming you’re using NPM as opposed to Yarn):

Personal note: in the documents, it mentioned this was all you needed to do, but for my project, I also needed to add this line to my index.js file after setting up my react app.

Once this is complete, different components can be imported to different components as needed, which we’ll get into below.

Importing

Importing components from Bootstrap in React is very similar to importing anything else into React. It requires an import at the top of the page, which generally requires code reading similar to below (obviously varying depending on what’s being imported):

The top line is a standard import for React to run, the second line is our import from Bootstrap, in this case a navigation bar, as well as some other features useful for my specific NavBar. One of the things I really like about the documentation, is that each component has code snippets that are used for exactly what is shown as examples. Most the time, I took the raw code from the documentation and then adapted it to my needs, either adding extra components or removing redundant features. For example, here’s the code snippet from the navbar documentation:

The top, showing what will be displayed when running the code, below the raw code.