With Bootstrap CSS, you can develop a responsive website faster and easier than building a site from scratch. That’s because this open-source toolkit provides pre-designed templates and components so you can build out layouts with important design elements like Bootstrap navbars, Bootstrap buttons, and forms without having to build them from scratch.
The process isn’t as simple as copying and pasting these chunks of reusable code, however. You’ll want to customize Bootstrap templates and components to ensure your website reflects your unique branding.
For example, you may want to add a custom color rather than use the 10 color utility classes that Bootstrap provides. Or you may want to change the breakpoints of the Bootstrap grid layout. Or you may want to add custom classes like a .btn-custom class to create completely unique buttons.
In this post, we’ll walk through how you can customize Bootstrap CSS (and how not to). Let’s get started.
How to Edit Bootstrap CSS
You can edit Bootstrap’s core files directly to make changes to your site — but it’s not recommended.
Making changes directly to the default stylesheet will quickly become difficult to maintain. Not only is it harder to keep track of the changes you made, but it also makes upgrading to a newer version of Bootstrap a lot more painful. When upgrading, you’ll have to replace the core files so all your customizations will be lost.
The good news is there’s a way to make changes without editing the source code. Let’s take a closer look at this process below.
Can you override Bootstrap CSS?
If you want to customize your Bootstrap site, you can leave the source code as is and simply add custom code in an external stylesheet. The code in this external stylesheet will override the existing styles — as long as it’s set up properly. This set-up process differs slightly, depending on how you load Bootstrap on your site.
There are a few different ways to get started with Bootstrap. You can use BootstrapCDN to deliver a cached version of Bootstrap’s compiled CSS and JS to your project, or you can download the precompiled or source code version of Bootstrap.
Below we’ll walk through the process for customizing each of these Bootstrap versions.
How to Override Bootstrap CSS
You can override the default styles of Bootstrap elements using two possible methods. The first way — using CSS overrides— applies to sites using BootstrapCDN or the pre-compiled versions of Bootstrap. The second — using Sass variables — applies to sites using the source code version of Bootstrap.
Each method is ideal for different use cases. While using CSS overrides is simpler, it is also more time-consuming and difficult to scale. Using Sass variables, on the other hand, is ideal for making more extensive changes across your site — but it’s designed for more advanced users. Let’s take a closer look at both approaches below
How to Override Bootstrap Using CSS Overrides
Whether you’re using BootstrapCDN or the pre-compiled version, you’ll start with a basic HTML5 doctype that looks something like this:
If you’re going with the compiled version of Bootstrap, then you’ll have to download the compiled CSS files and save them in the same folder as your index.html file. Then add the following line of code into the <head> section of your index.html file:
The reference to the custom.css must come after the bootstrap.css for this CSS override customization method to work. Why? Because of the rule of specificity. If HTML elements are targeted by multiple CSS selectors of the same specificity, the last one will override the others and only its style properties will apply. So by linking to your custom stylesheet after the default stylesheet, you give it a higher level of specificity.
With this addition, here is what your index.html file will look like if you’re using BootstrapCDN.
You can change it to, say, 20px by using the CSS font-size property in your stylesheet. Using a class selector, you can change the font size of all elements under the .btn class to 20px using the following code.
Following the same process, you can make as many changes as needed to completely transform your Bootstrap site. Just make sure to use CSS selectors that are as specific as — or more specific than — those in the bootstrap.css file.
Once you’re done making changes, simply save the custom.css file. At any time, you can edit or remove any of your custom CSS to revert back to Bootstrap’s default styles or redesign your site. You can also easily upgrade to another version of Bootstrap (as long as it’s a minor release, like 4.3 to 4.4) by replacing the reference to the previous stylesheet in your index.html file.
Now that we understand this customization option and its benefits, let’s take a look at the other customization option that applies to site owners using the source code version of Bootstrap.
How to Override Bootstrap Using Sass
Downloading the source code version of Bootstrap is the most difficult method for loading Bootstrap on your site because it requires additional tools to set up the source files like Bootstrap’s official compiled versions. That’s because Bootstrap 4 and all its minor releases (v4.x) are written in Sass, a stylesheet language that must be compiled into CSS for browsers to understand and render it correctly.
You’ll need a Sass compiler and autoprefixer to do this, but, once you invest the time in setting up this version of Bootstrap, you’ll have complete control over your code and Bootstrap’s code. That’s why this method appeals to more advanced users.
Let’s say you choose to download the Bootstrap source code using a package manager like npm, then you’ll unzip the folder and see the following structure.
│ └── custom.scss
Notice that the folder labelled “custom.scss” — which will act as your own stylesheet — is separate from the bootstrap/scss folder — which is the default stylesheet. It’s important to note that if you’re not using a package manager, you’ll just want to manually set up a similar file structure that keeps Bootstrap’s source files separate from your own.
As with the other customization method, you still avoid modifying Bootstrap’s core files. What’s different for Sass is that in your own stylesheet, you’ll import Bootstrap Sass files so you can modify them.
So you’ll go to your custom.scss file. You can import all Bootstrap’s source Sass by including the following line of code.
For example, the Sass variables for the <body> element in Bootstrap 4 are:
$body-bg: $white !default;
$body-color: $gray-900 !default;
That means by default, the background color is white and the color is gray. Let’s say you want to change these colors.
See how both variables have a !default flag? That allows you to override the variable’s default value in your own Sass without modifying Bootstrap’s source code. You simply have to copy and paste the variables in your custom.scss file, change their values, and delete the !default flag.
So if I want to change the background-color and color of the <body> element to black and dark gray, respectively, I’d add the following to my custom.scss file.
To successfully make this override across Sass files, I have to finalize the import of Bootstrap’s Sass files by adding the following code after the variables:
Bootstrap 4 also includes Sass maps, which are basically related groups of Sass variables. For example, there are Sass maps for colors and grid breakpoints in Bootstrap. Like Sass variables, Sass maps include the !default flag so they can be overridden without modifying Bootstrap’s source code.
For example, the Sass map for colors in Bootstrap 4 is:
With Sass maps, you have two options. You can modify the map or you can add to it. So let’s say you want to change an existing color in the $theme-colors map. Then you simply have to copy and paste the map key and include only the variables you want to change in your custom.scss file. Then change their values and delete the !default flag.
So if you wanted to change the primary color to cyan-blue, you’d add the following to your custom Sass file:
This would change the primary theme color across the CSS, so .alert-primary, .text-primary, .bg-primary, and more would all be affected.
And if you wanted to add a new color to the $theme-colors map, then you’d add a new key, use the variable “custom-color,” and assign it a value. The following would add a crimson red to the map.
Whether you’re using CSS overrides or Sass variables, you can unlock hundreds of customization options in Bootstrap. This way, you can not only build a responsive site — you can also design it to suit your brand. You’ll just need to be comfortable with HTML and CSS to do so.
Originally published Jun 1, 2020 7:00:00 AM, updated June 01 2020