Summary: Using styles with React Boostrap package

When following the React Bootstrap tutorial at Serverless Stack, I immediately noticed that my views looked unstyled. They had the plain vanilla look of raw html, whereas the Serverless Stack views looked more fancy.

I’m not sure why, but I think it might be because I’m using a more recent version of React Bootstrap.

The current documentation says React Bootstrap does not come with stylesheets:

Because React-Bootstrap doesn’t depend on a very precise version of Bootstrap, we don’t ship with any included css. However, some stylesheet is required to use these components. How and which bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN.

I don’t want to use the CDN for my project. There are good arguments for using a CDN, but for my purposes, I want to make sure that my stylesheets are available whenever my site is available. So instead, I simply installed Bootstrap. I was actually trying to avoid using this extra install by using the React Bootstrap project! Oh well.

After installing Bootstrap (npm install bootstrap), I opened my App.js file, and added an import to the huge bootstrap css file that was installed in my node_modules directory, like this:

1
2

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

This instantly fixed the problem that my home page was not styled. Now I had a nice NavBar similar to the React Boostrap NavBar demos.

Here’s the “before” view:

And here’s the “after” view:

That’s a big difference! I could have waited to figure out what was causing this problem, and I’m still not sure that my solution is the best one. However, it’s more rewarding to work on something that looks nice, and I knew I’d have to do something about this eventually, so I’m glad I fixed it from the get-go.