Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

What is the Bootstrap page header ?

  • Last Updated : 18 Aug, 2021

Page header is used to add suitable spacing around the headings on a page and adds a horizontal line under the heading. This particularly helps a web page where you may have several post titles and need a way to add distinction to each of them. As header is always the first impression of the viewer. So, one would want that their page has a good-looking header at the top of the page and the header can be highlighted easily. For this purpose, a page header is used by the web developers which adds spacing around the headings on a page and adds a horizontal line under the heading.

Let’s see the step-by-step approach for the implementation.

Step 1: Include Bootstrap and jQuery CDN into the <head> tag before all other stylesheets to load our CSS.

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js”></script>

 



Step 2: Add <div> tag in the HTML body with class container.

Step 3: To use a page header, wrap your heading in a <div> with a class of .page-header.

<div class = "page-header"> </div>

Example 1: In this example, we will see how to use Bootstrap page header with underline heading.

index.html




<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example</title>
    <link
      rel="stylesheet"
      href=
    <script src=
    </script>
    <script src=
    </script>
    <style>
      img {
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="page-header">
        <h1 style="color: green">Example Page Header</h1>
      </div>
  
      <p>This is a paragraph</p>
  
      <img
        src=
        alt="Flowers in Chania"
        width="460"
        height="345"/>
      <p>This is another text.</p>
    </div>
  </body>
</html>

Output:

suitable spacing and  a horizontal line under the heading

Example 2: In this example, we will see page header with different size of headings and without underline. 

index.html




<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href=
    <script src=
    </script>
    <script src=
    </script>
  </head>
  <body>
    <div class="container">
      <div class="page-header">
        <h1 style="color: green">
          GeeksForGeeks
           <small> All In One</small>
        </h1>
      </div>
  
      <p>Extensive collection of questions ranging variety of topics</p>
  
      <p>All done by Experts</p>
    </div>
  </body>
</html>

Output:

proper spacing without underline




My Personal Notes arrow_drop_up
Recommended Articles
Page :