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

Giving your blog a page header


Open and edit the header.php file in the theme directory. Add the following line of PHP just before the topbar template part including:

<?php get_template_part( 'parts/page', 'header' ); ?> 

In the create a new template part in the parts directory called page-header.php, edit the following HTML and PHP code into it:

 <header class="container bg-primary-color-dark"> 
  <div class="row"> 
      <div class="col-xs-12 bg-primary-color-dark"> 
         <button class="navbar-toggler hidden-md-up pull-xs-right" type="button" data-toggle="collapse" data-target="#CollapsingNavbar"> 
           ☰ 
         </button>     
         <h1 class="display-3"><?php bloginfo('name'); ?></h1> 
      </div>   
  </div> 
</header> 

The <?php bloginfo('name'); ?> PHP code automatically shows the name of your blog in the page header. Notice that the hamburger...