Bootstrap Tutorial - Bootstrap Page Headers

Bootstrap has created an HTML component to be used as a page header.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head><!--from w  w  w.  j  a v a2 s. c o m-->
  <body>
    <div class="container">
        <div class="page-header">
            <h1>Chapter 3</h1>
        </div>
    </div>

  </body>
</html>

Click to view the demo

Page subtitle

To add a subtitle beside the title of the page, we can put it inside the same <h1> wrapped inside a <small></small> tag.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head><!--from ww  w . j a va  2 s  .  c o  m-->
  <body>
    <div class="container">
        <div class="page-header">
            <h1>Chapter 3 <small>Exploring Bootstrap Components </small></h1>
        </div>
    </div>

  </body>
</html>

Click to view the demo

Smaller Text in Header

We can use the <small> tag or <span> tag with .small class to display the secondary text of any heading in a smaller and lighter variation.

<!--from  w  w  w  .jav a2 s .c o  m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <h1>h1. Bootstrap heading <small>Secondary text</small></h1>
    <h2>h2. Bootstrap heading <small>Secondary text</small></h2>
    <h3>h3. Bootstrap heading <small>Secondary text</small></h3>
    <h4>h4. Bootstrap heading <small>Secondary text</small></h4>
    <h5>h5. Bootstrap heading <small>Secondary text</small></h5>
    <h6>h6. Bootstrap heading <small>Secondary text</small></h6>
    <hr>
    <h1>h1. Bootstrap heading <span class="small">Secondary text</span></h1>
    <h2>h2. Bootstrap heading <span class="small">Secondary text</span></h2>
    <h3>h3. Bootstrap heading <span class="small">Secondary text</span></h3>
    <h4>h4. Bootstrap heading <span class="small">Secondary text</span></h4>
    <h5>h5. Bootstrap heading <span class="small">Secondary text</span></h5>
    <h6>h6. Bootstrap heading <span class="small">Secondary text</span></h6>
</div>
</body>
</html>

Click to view the demo

Bootstrap headings style

We can define all HTML headings, <h1> through <h6> in the same way you define in simple HTML document.

We can utilize the heading classes .h1 through .h6 on other elements to apply the style on element's text same as headings.

<!DOCTYPE HTML>
<html> 
<head> 
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head><!--from ww w .ja  va  2 s  .co  m-->
<body style='margin:20px;'>

    <h1>h1. Bootstrap heading</h1>
    <h2>h2. Bootstrap heading</h2>
    <h3>h3. Bootstrap heading</h3>
    <h4>h4. Bootstrap heading</h4>
    <h5>h5. Bootstrap heading</h5>
    <h6>h6. Bootstrap heading</h6>
    <hr>
    <div class="h1">h1. Bootstrap heading</div>
    <div class="h2">h2. Bootstrap heading</div>
    <div class="h3">h3. Bootstrap heading</div>
    <div class="h4">h4. Bootstrap heading</div>
    <div class="h5">h5. Bootstrap heading</div>
    <div class="h6">h6. Bootstrap heading</div>
        
</body>
</html>

Click to view the demo