There are many ways that you can theme Bootstrap. In some cases, you may only need to customize a few components to get a unique look and feel going. However, you may want to do a more thorough theming process so that your theme doesn't resemble the default Bootstrap look at all. In this section, let's start by listing some of the common components you will most likely want to customize.

Next we'll go through the process of writing the code to customize a few so you get an idea as to how it works. Here's a list of components that I would recommend customizing:

This list is just a starting place. If you want to create a unique theme, you should really try to customize all Bootstrap components. At the very least, you should change them to use your custom color palette, typography, and layout styles. We've already covered buttons so let's jump into customizing the drop-down component, which is an extension of the button.

The drop-down component requires a medium-sized amount of customization so it's a good starting place to get an idea of what is involved in this process. It also builds on the code we wrote for the button so it's a natural second step. It's important to note that some components will require a good amount of CSS to customize them, while others will only need a little bit. Let's start by creating a new Sass file for drop-downs. From your project folder, create a new file called _dropdown.scss in the css/components directory. You can leave the file blank for now, just save it.

Once you've created the new Sass file for the drop-down component, we need to import it into our main theme is called custom.scss. Open up the custom style sheet in your text editor and insert the following line of code after the @import for the button component:

@import "components/_dropdown.scss"; 

Now we are ready to start coding our custom drop-down styles. Open up _dropdown.scss in your text editor and let's insert this first section of CSS:

.dropdown-menu { 
   color: $primary-text; 
} 

As with the buttons in the previous section, I'm only going to change the most basic properties to demonstrate how you can customize the component. Feel free to customize additional properties to get a more unique look and feel.

Let's break down what is happening here. The drop-down component is made up of the base .dropdown-menu CSS class. This controls how the menu will look. Here I've simply changed the text color to use for the $primary-text variable.

We also need to do some work on the list of links that appear in our drop-down menu. Insert the following CSS after the first section you just entered:

.dropdown-item:focus, 
.dropdown-item:hover { 
   color: $primary-text; 
   background-color: $secondary-background; 
} 

Let me break down what is happening here:

The last thing we need to do is update the actual drop-down button trigger with some additional code. Enter the last part of CSS into the file:

.open > .btn-primary.dropdown-toggle:focus { 
   background-color: $purple2; 
   border-color: $purple2; 
} 

When the drop-down button trigger is clicked the .open CSS class will dynamically be inserted into the HTML code. This initiates a unique variation on the button class, a drop-down toggle focus. That may sound complicated but what you need to know is that you need to set this selector to our $purple2 color so it matches the rest of the button.

I've overwritten the background-color and border-color properties to use $purple2 from our color palette.

That's it, the drop-down component has now been themed to match our look and feel. If you preview it in the browser it should look like this when the menu is open:

Now that we've finished with the drop-down component let's move on to learning how to theme the alerts component.

The alerts component in Bootstrap is fairly easy to theme. As with the button component, it comes in a few variations. Let's start by coding up the CSS for the default color method. Create a new file called _alerts.scss and save it to the css/components directory. Don't forget to import it into custom.scss with the following line of code:

@import "components/_alerts.scss"; 

Once you've set up the file, let's get started with the code for the success alert component:

.alert-success { 
   color: $green; 
   background-color: lighten( $green, 30% ); 
   border-color: lighten( $green, 30% ); 
} 

What you're now seeing should start to look familiar. However, I have introduced something new that I need to explain:

Once you code this up it should look like this in the browser:

As you can see, we are using the green color values from our color palette. Let's continue and customize the colors for the rest of the alert bar variations. Enter the following code into the _alerts.scss file:

.alert-info { 
   color: $blue; 
   background-color: lighten( $blue, 30% ); 
   border-color: lighten( $blue, 30% ); 
} 
 
.alert-warning { 
   color: $yellow; 
   background-color: lighten( $yellow, 30% ); 
   border-color: lighten( $yellow, 30% ); 
} 
 
.alert-danger { 
   color: $red; 
   background-color: lighten( $red, 30% ); 
   border-color: lighten( $red, 30% ); 
} 

The other alerts follow the same pattern as the success version. They should look like this in the browser when you are done:

As you can see, the alerts are now using our color palette. Let's move on to the last component that I will show you how to customize, which is typography.

The typography component isn't difficult to customize. We'll build off the base variables we set up to apply them to the appropriate HTML tags. As we did with our other components, start with creating a new file called _typography.scss and save it to the css/components directory. Once you do this, import the file into custom.scss with the following line of code:

@import "components/_typography.scss"; 

Let's start customizing the type by applying some styles to the base header tags:

h1, h2, h3, h4, h5, h6 { 
   font-family: $heading-copy; 
   color: $primary-text; 
} 

Here I've simply used the $heading-copy variable and applied it to all the HTML heading tags. This will allow our custom heading typeface to be used for all headers. I've also added the $primary-text variable so that our headers are using the correct text color. Next let's take a look at a few miscellaneous text styles that you will likely want to overwrite:

small { 
   color: $light-text; 
} 
 
pre { 
   color: $pre-text; 
} 
 
code { 
   color: $code-text; 
} 

As we did with our base variables, I'm now applying some of them on actual selectors. Let's break it down:

That covers some of the basic typography styles you're going to want to customize. There are more you could add but I will let you explore these on your own. That also goes for all the Bootstrap components. We have only scratched the surface of the level of customizing you can do for your Bootstrap theme. However, I think I've given you a good introduction to what you need to do for coding your own Bootstrap themes.