Creating and Installing a Custom Bootstrap Theme With React

Ever since I first began my web development journey, Bootstrap has been my best friend. CSS is one of those finicky things that can drive you up a wall with frustration — but it’s also extremely rewarding once you know what you’re doing. Thankfully, when you’re just starting out Bootstrap makes CSS a snap (and it’s a good way to learn more about CSS while having fun). Its possible to create a smooth looking website in just a few hours.

The only thing is, the default theme of Bootstrap is definitely not one size fits all. The standard blue tones are great, but when you want to give your website more of a personal touch and you don’t know how to create custom Bootstrap themes it can feel like you’re out of luck.

For a long time the idea of creating and installing my own Bootstrap theme was daunting because there is so much information out there about the topic, but I couldn’t find any really straightforward tutorials explaining how to do it — not to mention tutorials geared towards a junior developer. And that’s why I’m creating this tutorial showing you the simplest way to get started with custom Bootstrap themes.

Part 1: Themestr.app — Create your Custom Theme

Once I decided to buckle down and learn how to create a Bootstrap theme I was unsure of where to start, and then I came across a video by Carol Skelly explaining her app called Themestr.app. I highly recommend checking out that video to get a quick 4 minute overview of how to use her app.

Themestr.app is, in short, AMAZING. It gets rid of all of the mess from Bootstrap’s own customization tool with its clean, easy to understand UI. You can pick from several pre-made themes and customize the colors and fonts to create the perfect theme for your project within minutes.

Anyway, lets learn how to actually use Themestr.app!

1. (Optional) Pick a pre-made theme that’s close to what you’re envisioning.
2. Customize the colors and fonts until you’re satisfied with your custom theme.
3. Scroll down to the bottom of the page until you get to this form:

This form is how we’ll extract the CSS for our custom theme.

First, click the ‘Generate CSS’ button below the SCSS input field. The page should reload.

Second, click the ‘Copy CSS’ button below the CSS output field. This will copy all of the CSS we need to install on your project to your clipboard.

At this point, we’re done with Themestr.app and we can move on to the installation process!

Part 2: Installing Your Custom Theme

For me, the installation of custom Bootstrap themes was always the part I got stuck on. Bootstrap uses Sass to make theming easy, which can be difficult if you don’t have any knowledge of Sass. If you’re unfamiliar with Sass, you really don’t need to know much about it to get this to work but it certainly won’t hurt, especially in case you hit a roadblock. If you’re interested, I recommend hitting up W3Schools for a quick overview of what Sass is and why its useful.

Okay, lets get into the actual installation!

$ npm install node-sass

1. Before doing anything, go ahead and install node-sass. This will allow your project to run the Sass file for your custom theme.
2. Install Bootstrap in your project. The custom theme generated by Themestr.app doesn’t include Bootstrap, it only works if you already have Bootstrap installed on your project.
3. Create a Sass file in your project’s src directory. I called mine ‘custom-theme.scss’. Make sure that you have the ‘.scss’ file ending.
4. Paste the custom theme that you have copied on your clipboard (from Part 1) into your Sass file.
5. Import your Sass file into your App.js file:

//at the top of App.js
import './custom-theme.scss' //or whatever you called your Sass file

Conclusion

Aaaaand you’re done! If all has gone correctly you should now have your custom theme installed on your project!

Hopefully you found this process to be a lot easier than using Bootstrap’s customization tool. When you’re a junior developer trying to learn how to customize a giant library like Bootstrap it can be incredibly intimidating, but with the help of tools like Themestr.app its infinitely easier to start. Thanks for reading!