Bootstrap | Page Header

Hello folks! welcome back to a new edition of our tutorial on Bootstrap. In this tutorial guide, we are going to be discussing about Bootstrap Page Header.

Page header is a nice feature of Bootstrap used for adding proper spacing around the headings on a webpage. This is particularly helpful on a web page where you may have several post titles and need a way to add a distinction to each of them. To make use of page header, simply wrap your heading in a <div> with class .page-header.

Example

Following example demonstrates this -

<div class = "page-header">
   <h1>
      Example page header 
      <small>Subtext for header</small>
   </h1>
</div>

<p>This is a sample text.This is a sample text.This is a sample text. This is a sample text.</p>

Output

When the above example is executed, it will produce the following result -

Example page header Subtext for header
This is a sample text.This is a sample text.This is a sample text. This is a sample text.

READ: Bootstrap | Jumbotron

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we are going to be studying about the Bootstrap Thumbnails.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.