O'Reilly logo

Bootstrap 4 Site Blueprints by Ian Whitley, David Cochran, Bass Jobsen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Enabling Flexbox support

As already explained in Chapter 1, Getting Started with Bootstrap, Bootstrap 4 comes with optional flexbox support. You can simply enable flexbox support by declaring $enable-flex: true; in the scss/includes/_variables file. If you do so, you'll have clear the floats of the container of the navbar because of we've implement flexbox support for it. You can clear the floats by adding the following SCSS code to the file:

header[role="banner"] { 
  // header container do not use the flexbox layout, so floats have to be cleared 
  @if $enable-flex { 
    .container { 
      @include clearfix(); 
    }   
  } 
}   

Now it's time to move on to the main content of our page.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required