English Thai

How to Customize the Default Bootstrap Style, the Right Way



Looking at the source code of most websites, it shouldn’t be a surprise if you can see common elements of Bootstrap framework being used. Many developers and designers make use of the framework for fast, reactive improvement as it is one of the most used front-end frameworks for web development.

The reason why some of these sites don’t look like the default Bootstrap theme is that default Bootstrap stylesheets were altered or further CSS stylesheets were attached.

This short tutorial will show you how to do this in a neat, easy to maintain way that leaves room to update future versions of Bootstrap without ruining your custom styles.

To begin you add a custom stylesheet and create a new file in your Bootstrap CSS folder. Call it custom.css.

Insert your new custom CSS file under the default bootstrap stylesheet in the head portion of your website.

Using Custom Styles

Add the correct code to your custom.css file to use or change further styling to the web page. You don’t need to edit the original Bootstrap styles directly.

For instance, if you want edged corners instead of rounded corners on the buttons, you could use the following style in your custom.css file.

Adding a button to your web page with the default Bootstrap styles will now result in edged corners caused by your custom stylesheet overriding the default Bootstrap stylesheet.

The benefit of using your custom stylesheet after the default one is that you can easily exchange the old Bootstrap stylesheet with the latest one if Bootstrap gets upgraded and your custom stylesheets will be unaffected. Mind that you might need to change your custom stylesheets for large upgrades.

Changing the default stylesheets can be painful to maintain and keeping track of those can be difficult. Keeping track of your changes or falling back to default stylesheets if needed using this approach will be much more effortless.

Result

Appending extra styles is a very efficient manner of customizing the default Bootstrap styling. This approach is a smooth and uncomplicated way to update Bootstrap and a having a neat, simple code.