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.