Customize Bootstrap
Learn how to customize default bootstrap configuration

Structure

Lets look at the related files we will be working with in order to customize bootstrap (other files omitted for brevity):

  • folder acme-dashboard
    • folder library
      • folder extend
        • description _bootstrap.scss
      • folder sass
        • folder config
          • description _bootstrap.scss

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

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.

Next Up

Learn how to optimize and prepare your final package for production and reach great levels of optimization using frontal.js features

{title}