If you take a look at the source code of some of your favourite websites, we wouldn’t be surprised if you found common elements of the Bootstrap framework being put to use. As Bootstrap is arguably the most popular front-end framework for web development, many designers and developers employ the framework for rapid responsive development.
But why do some of these sites look nothing like the default Bootstrap theme? Quite simply, additional CSS stylesheets were added or the default Bootstrap stylesheets were modified (let’s disregard LESS or SASS for the sake of this tutorial).
In this short tutorial, we’ll show you how to do this in a manner that is clean, easy to maintain, and allows you to update to future versions of Bootstrap without breaking your custom styles (providing that the update is minor).
Let’s begin.
Add a Custom Stylesheet
Create a new file in your Bootstrap CSS folder and call it custom.css.
Now in the <head> portion of your website, load your new custom CSS file after the default bootstrap stylesheet. It should look like this.
<head> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/custom.css"> </head>
Applying Custom Styles
To modify or apply additional styling to your web page, simply add the proper code to your custom.css file. There is no need to edit any of the original Bootstrap styles directly.
For example, if you decided that you did not like the rounded corners on the buttons, you could apply the following style in your custom.css file.
.btn {
border-radius: 0px;
}
Now if you add a button to your web page with the default Bootstrap styles (.btn class), the corners aren’t rounded. This is due to the fact that your custom stylesheet overrides the default Bootstrap stylesheet.
The upside to adding your own custom stylesheet after the default bootstrap stylesheet is that in the event that Bootstrap gets upgraded, you can simply replace the Bootstrap stylesheet with the new one and your custom styles will remain untouched. Note that for major upgrades, you may need to modify your custom styles. Nevertheless, even major upgrades will still be much easier using this approach.
Another reason to proceed in this way is that it’s much easier to keep track of your changes and revert back to default styles if necessary. If you make changes directly to the default stylesheet, it becomes very difficult to maintain and keep track of changes.
This method is the only way to go if you’re creating Bootstrap themes & templates.
Conclusion
As you can see, adding a separate stylesheet is a very effective way of customizing the default Bootstrap styling. Doing so will make it much easier to update Bootstrap and keeps the code very clean.
BONUS: Check out our post on Bootstrap UI Kits, a great way to customize the default Bootstrap look and feel.
