Book Image

Bootstrap 4 Site Blueprints - Second Edition

By : Ian Whitney, David Cochran
Book Image

Bootstrap 4 Site Blueprints - Second Edition

By: Ian Whitney, David Cochran

Overview of this book

Packed with trade secrets, this second edition is your one-stop solution to creating websites that will provide the best experience for your users. We cover six popular, real-world examples, where each project teaches you about the various functionalities of Bootstrap 4 and their implementation. The book starts off by getting you up and running with the new features of Bootstrap 4 before gradually moving on to customizing your blog with Bootstrap and SASS, building a portfolio site, and turning it into a WordPress theme. In the process, you will learn to recompile Bootstrap files using SASS, design a user interface, and integrate JavaScript plugins. Towards the end of the book, you will also be introduced to integrating Bootstrap 4 with popular application frameworks such as Angular 2, Ruby on Rails, and React.
Table of Contents (15 chapters)
Bootstrap 4 Site Blueprints
Credits
About the Authors
About the Reviewer
www.PacktPub.com
Preface

The off-canvas side bar


On the official Bootstrap website at http://v4-alpha.getbootstrap.com/examples/, you can find an off-canvas example. The example will show you how to build a toggle able off-canvas navigation menu for use with Bootstrap. You can use an off-canvas side bar in your theme too. On the smaller viewports, a page with the off-canvas menu will look like that shown in the following screenshot:

When you click the Toggle nav button in the preceding page, the page content slides to the left and the side bar becomes visible.

The off-canvas menu use the template called template-offcanvas.php in the theme directory/ It should contain the following HTML and PHP code:

<?php 
/* 
Template Name: Off-canvas Side bar 
*/ 
?> 
 
<?php get_header(); ?> 
    <div class="container" id="content"> 
     
        <div id="inner-content" class="row row-offcanvas row-offcanvas-right"> 
     
            <main id="main...