Customizing Bootstrap

Oftentimes when using the Bootstrap CSS framework, the style is just simply not enough. Other times we need to tweak something, such as a margin, color, or font. Luckily, customizing Bootstrap is simple enough, without directly editing Bootstrap’s files.

This article assumes you already have some experience with CSS classes.

Importing Bootstrap

The first step in editing Bootstrap’s CSS is to import it the framework in one way or another. You can download the framework or link to Bootstrap’s CDN. View Bootstrap’s documentation on how to import Bootstrap into your project.

Customizing Bootstrap

ADDing Both stylesheets to one page

The first step in modifying Bootstrap’s CSS is to create a new CSS file.

The next step is to add your custom CSS file to the same file as the Bootstrap CSS. This is the challenging part. The <link> tag that imports your custom CSS file MUST be under the <link> tag that imports Bootstrap.

Editing custom css file:

The hard part is over. Now the easy part of customizing bootstrap styles. We really aren’t editing the Bootstrap styles, we are simply overriding them. We are overriding them because our custom CSS import <link> is below the Bootstrap’s import <link>.

The first step is to choose a class you want to change. For example, Bootstrap has a class called .navbar. You can now edit the .navbar class to change the colors, for example. In your custom CSS file:

.navbar {
background-color: black;
}

This would change the default color of a navbar to black, as long as your navbar uses the .navbar class. You can do similar changes to change the navbar text to white, or some other color.

Conclusion

So that is how you customize Bootstrap styles to your liking. If you would like to read some more posts about technology, check out my technology posts. If you would like to learn more about me, check out my about page.

Thank you for reading!