Bootstrap 4 SASS Variables


Playing with Boostrap 4 and SASS

The upcoming Bootstrap 4 is built with SASS, and you can customize many options in the _variables.scss. There are several options to quickly change the default Bootstrap look. Set the SASS variables to easily change the grid breakpoints, container widths, borders, colors, fonts and more. There is also a variable to enable flexbox and used flexbox enabled components like the grid columns, cards and form inputs.

Here's how Bootstrap 4 looks out-of-the-box:

Change a few SASS variables..

$grid-breakpoints: (
  xs: 0,
  sm: 600px,
  md: 800px,
  lg: 1000px,
  xl: 1200px
) !default;

$container-max-widths: (
  sm: 600px,
  md: 800px,
  lg: 1000px,
  xl: 90%
) !default;

$body-bg:       #333;
$body-color:    #999;
$border-radius: 1px;
$brand-primary: #3333cc;
$brand-success: #11cc11;
$brand-info:    cyan;
$brand-warning: #334455;
$brand-danger:  #cc1111;

$font-family-sans-serif:Tahoma, Geneva, sans-serif;

And we quickly customize the look:

Play with Bootstrap 4 SASS on Codeply

SASS enables you to easily changes the Bootstrap grid breakpoints, or customize any of the specific breakpoints of which Bootstrap 4 now has 5: xs,sm,md,lg and xl. There are also several mixins that help with customization.

Bootstrap 4 also makes use of CSS 3 flexbox which is an option that can be enabled by changing the $enable-flex variable. Enabling flexbox lets us make use of flexbox enabled components like the grid columns, cards and form inputs.

Try Bootstrap 4 with Flexbox Enabled ($enable-flex:true)

There is much to look forward to in the new Bootstrap 4. The release date is still unknown, but Bootstrap's authors promise it to be a simpler migration from 3.x.