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

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 ...

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