How To Override Bootstrap-Sass Using Sass Variables?

Bootstrap is a well-known framework with pre-built components that helps web designers to build a site, quickly. The new version of Bootstrap 4.2.1 uses Sass as the preprocessor of choice. So in this blog, we will understand how to override Bootstrap using the sass variables.

We know that we have to override the Bootstrap style to give a new look to the website. Just like for theme-background, fonts, colors, spacing, etc. variables are responsible for Scss for the output. Here we have to override default Bootstrap variables. Let’s move on to overriding Bootstrap.

Add Bootstrap In The Project

First of all, download bootstrap from the Bootstrap download page. After that, we will make a folder under the name of vendors in the scss folder and add Bootstrap in that folder. We will not change anything in the Bootstrap files, because it will create an issue in the future when you want to update Bootstrap. After creating the folder, you can add bootstrap.scss in that file, which you have compiled.

In Bootstrap-4, they use the !default flag, which describes the default variable’s default. You just need to copy that variable, add your value, and remove the !default flag from the variable.

Override Variables

Bootstrap has its own “_variables.scss” in the “scss” folder, which contains all variables used in Bootstrap. Now, add the “abstracts” name folder in your scss folder and create “_custom-variables.scss” in that folder.

Now, open Bootstrap > scss > “_variables.scss”. We are not changing Bootstrap variables here directly, so we will copy variables from “_variables.scss”, and paste in “_custom-variables.scss”. After pasting the variables, you can add new value in variables.

You must update the primary theme color (blue), and define it in your “_custom-variables.scss” file. The variable must come before all the @import statements. When you compile the Sass code, this new $primary color can be used for all code that references the $primary variable.

Modify The Default Breakpoints

Grid Breakpoints

Bootstrap breakpoints are also defined in the _variables.scss file. Here are the default values:

You can change the current breakpoints or add new ones. You just need to override the $grid-breakpoints variable adding only the required values.

Containers Width

Bootstrap container-max-widths are also defined in the _variables.scss file. Here are the default values:

Updated in “_custom-variables.scss”

Customize The Spacing Rules

Bootstrap provides a set of spacing, which helps in spacing adjustment. $spacer and $spacer variables manage the base value of spacings. You can update, add, and override them.

Default Variables In Bootstrap

Override Variables

Bootstrap also provides many variables that we can override like:-
Tables, Buttons, Forms, Dropdowns, Navbar, Pagination, Tooltips, Modals, etc…

Use Only What You Need

Bootstrap has so many components that you can use, but you don’t have to use all the components which are provided by bootstrap. You have control over bootstrap, so include components that are needed. If you will not include them, then the CSS file will be lighter with less code. And you can include those components whenever you need them in the future. If you need to use the components in the future, then simply uncomment them.

Some Useful Variables

Bootstrap provides some important global options which you can toggle. Like border-radius, box-shadow, and gradients, etc.

You can find these variables in scss/_variables.scss file.

$enable-caret: Use for enabling pseudo element caret on .dropdown-toggle.
$enable-rounded: Use for adding or removing border-radius (default: true)
$enable-shadows: Use for adding or removing box-shadows (default: false)
$enable-gradients: Use for gradients via background-image (default: false)
$enable-transitions: Use for adding or removing transitions (default: true)
$enable-grid-classes: To add or remove classes for the grid system (default: true)
$enable-print-styles: Enables styles for optimizing printing.

You can check sass-options here:-
https://getbootstrap.com/docs/4.2/getting-started/theming/#sass-options

Conclusion

You have seen how easy it is to override bootstrap -saas using the saas variables. We have tried to provide you a detailed guide to help you through the process with visuals and step-by-step functions. It is super easy to override the bootstrap, provided you know how to find the important variables. And if you’ve gone through our blog, then you’re all ready to override!

Originally published at https://www.zealousweb.com.