I’ve been using Bootstrap for building websites and it is a really useful framework to build sites quickly. But I realized that I’ve been using Bootstrap the wrong way (I didn’t know how to customize bootstrap) for the 2 years since I started Web Designing. In this article, I will show you how to easily customize bootstrap to match your theme.
When I started using Bootstrap, I didn’t know about SASS, a powerful CSS preprocessor. So, I only used the compiled CSS file in my projects. For a few months, I enjoyed building websites with Bootstrap because it made it easier to write mobile responsive layouts.
I found it difficult to manage my code until I needed to customize the theme to build the websites. This included theme colours, typography, container sizes, media breakpoints, forms and button designs, etc.
CSS file became too large
I was writing CSS for every default Bootstrap styles and it soon became a PITA. The CSS file size was becoming larger, it was difficult to keep track of all the overwriting for default styles, styling the hover and active styles for buttons and links also required extra CSS.
After I learned SASS, I started using the Bootstrap source files, instead of the compiled and minified CSS file. Soon I discovered that bootstrap is highly customisable and all the default styles could be overwritten easily using a SASS partial file.
Customize Bootstrap Variables
Overwriting Bootstrap variables is very easy. You simply have to create a file with the variables you want to overwrite and import it as a partial before importing Bootstrap
// this is the main SCSS file which includes all partials // this file contains variables to overwrite default bootstrap variables @import 'custom_variables'; // this is the bootstrap source file @import 'bootstrap/bootstrap'; // other imports @import 'theme-styles';
Note: The variable file to overwrite the bootstrap default style should be placed before importing Bootstrap.
How does it work?
To understand this, let’s have a look at the bootstrap variable file
// bootstrap _variable.scss file $primary: $blue !default; $secondary: $gray-600 !default; $success: $green !default; $info: $cyan !default; $warning: $yellow !default; $danger: $red !default; $light: $gray-100 !default; $dark: $gray-800 !default; $theme-colors: () !default;
Notice that the variables in the bootstrap file are defined with a !default at the end. This tells the compiler to use this variable as a default value if it does not find the variable defined before.
For example. In the following code, bootstrap uses $primary variable with the purple colour for all its primary colours instead of the default blue colour.
// bootstrap _variable.scss file $primary: purple; // bootstrap uses this variable and the primary color is set to purple $primary: $blue !default; // bootstrap ignores this $primary variable $secondary: $gray-600 !default; $success: $green !default; $info: $cyan !default; $warning: $yellow !default; $danger: $red !default; $light: $gray-100 !default; $dark: $gray-800 !default; $theme-colors: () !default;
Similarly, you can overwrite the variables for other styles as well such as typography, container size, media break-points, etc.
Now, let’s take a look at overwriting the grid breakpoints. Just copy the variable from the bootstrap _variable.scss file.
// Grid Breakpoints - Custom Overwrite $grid-breakpoints: ( xs: 0, sm: 600px, md: 800px, lg: 1000px, xl: 1400px ); // Grid Breakpoints - Bootstrap Defaults $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px ) !default;
This will compile to a CSS file with the custom breakpoints instead of the default Bootstrap breakpoints. Just remember to remove default in your custom variable file.
Let me know how you customize your bootstrap in the comment.