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

The page footer

The page footer should look like that shown in the following screenshot:

The page footer has two equal sized columns on the larger viewport. These columns stack when the viewport become narrower than 768 pixels.

The main HTML in the html/includes/footer.html HTML template may look like the following:

      <footer class="container page-footer bg-dark"> 
            <div class="row">   
                <div class="col-md-6"> 
                    <!-- left --> 
                </div> 
                <div class="col-md-6"> 
                    <!-- right --> 
                </div> 
            </div> 
      </footer>   

The footer is split into two equal sized columns by using the col-md-6 classes. These columns get 50% (6 of 12 columns) of the space on the medium (md) and larger grids. As already mentioned, you can also choose to use Bootstrap's Sass mixins to build your grid.

The ...

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