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.

Free Intro Guide to HTML & CSS [Download Now]

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:

 

 

   <!doctype html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 

    <title>Hello, world!</title>

  </head>

  <body>

    <h1>Hello, world!</h1>

 

  </body>

</html>

This will be your index.html file. The next step is loading Bootstrap onto your site.

If you’re going with BootstrapCDN, there’s no need to download any files. Simply add the following line of code into the <head> section:

 

 

   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

 

This will load Bootstrap CSS on your site. Please note that if you want to load Bootstrap Javascript, then you’ll have to add some code into the <body> section. Since that’s not necessary for this override method, we’ll skip this step.

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:

 

 

   <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

Once you’ve completed this step, you’ll have successfully linked to Bootstrap’s default stylesheet. Now it’s time to create your own stylesheet.

To do so, simply create another file in the same folder as your index.html file. You can call this file “custom.css.” This is where you’ll put your custom CSS.

But before you start adding to this file, go back to the index.html file and add the following line of code right after the link to the default stylesheet.

 

 

   <link rel="stylesheet" type="text/css" href="custom.css">

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.

 

 

   <!doctype html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" href="custom.css">

    <title>Hello, world!</title>

  </head>

  <body>

    <h1>Hello, world!</h1>

  </body>

</html>

And here is what your index.html file will look like if you’re using pre-compiled Bootstrap.

 

   <!doctype html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="custom.css">

    <title>Hello, world!</title>

  </head>

  <body>

    <h1>Hello, world!</h1>

  </body>

</html>

Now you can add any necessary changes to your custom.css file.

How to Customize Bootstrap Buttons Using CSS Overrides

Let’s say you want to make the font size of button text bigger on your site. In Bootstrap, the default font size for the .btn class is 16px, as shown below.

Bootstrap .btn class and modifier classes with default styles

Source

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.

 

 

   .btn {

font-size: 20px

}

Here’s the result:

Bootstrap .btn class and modifier classes with default styles overridden by custom CSS

Source

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.

your-project/

├── scss

│ └── custom.scss

└── node_modules/

└── bootstrap

├── js

└── 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.

 

 

   @import "../node_modules/bootstrap/scss/bootstrap";

Or you can just pick and choose the files you need. The following code imports the files required for customization.

 

 

   @import "../node_modules/bootstrap/scss/functions";

@import "../node_modules/bootstrap/scss/variables";

@import "../node_modules/bootstrap/scss/mixins";

The code below is for importing optional files. You can always add this or other code in later as you begin customizing.

 

 

   @import "../node_modules/bootstrap/scss/reboot";

@import "../node_modules/bootstrap/scss/type";

@import "../node_modules/bootstrap/scss/images";

@import "../node_modules/bootstrap/scss/code";

@import "../node_modules/bootstrap/scss/grid";

Once this is set up, you can begin to make changes. There’s no need to add a reference to the stylesheet in your index.html file so you’ll stay in your custom.scss file.

Instead of adding custom CSS like in the other method, you’ll modify any of the 500 Sass variables and maps in Bootstrap 4. The complete list can be found in your scss/_variables.scss file, but let’s hone in on two specific examples used in Bootstrap’s official documentation.

How to Customize Sass Variables

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.

 

 

   $body-bg: #000;

$body-color: #111;

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:

 

 

   @import "../node_modules/bootstrap/scss/bootstrap";

This is similar to how you have to include both references to your stylesheets between the <head></head> tags of your index.html file in the previous method.

Putting this all together, here’s what your custom.sccs file would look like if you imported all the Bootstrap files:

 

 

   @import "../node_modules/bootstrap/scss/bootstrap";

 

$body-bg: #000;

$body-color: #111;

 

@import "../node_modules/bootstrap/scss/bootstrap";

How to Customize Sass Maps

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:

 

 

   $theme-colors: () !default;

// stylelint-disable-next-line scss/dollar-variable-default

$theme-colors: map-merge(

  (

    "primary":    $primary,

    "secondary":  $secondary,

    "success":    $success,

    "info":       $info,

    "warning":    $warning,

    "danger":     $danger,

    "light":      $light,

    "dark":       $dark

  ),

  $theme-colors

);

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:

 

 

   $theme-colors: (

  "primary": #0074d9,

);

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.

 

 

   $theme-colors: (

  "custom-color": #990000,

);

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.

New Call-to-action

 css introduction

Originally published Jun 1, 2020 7:00:00 AM, updated June 01 2020

Topics:

Bootstrap & CSS