Lets look at the related files we will be working with in order to customize bootstrap (other files omitted for brevity):
In the previous structure, the directory colored green
extend is the only valid place to add customizations to bootstrap, whereas the directory colored red
sass, is the where to find the default values of bootstrap as a reference to use when customizing.
Customizing bootstrap is very simple, we will add our customizations to the
@library/extend/_bootstrap.scss file, for example if we wanted to modify the breakpoints, we would do the following:
// @library/extend/_bootstrap.scss $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px )
That way, breakpoints are updated for bootstrap, remember to always look for reference at
@library/sass/config/_bootstrap.scss and to load mixins and modules as needed per your customizations.