Bootstrap - Breadcrumbs, Jumbotron and Page Header

In this tutorial we will learn about breadcrumbs, jumbotron and page headers in Bootstrap.

Breadcrumbs

We use breadcrumbs to indicate the current page location within a navigational hierarchy.

Say a user is at introduction page of bootstrap tutorial then we can have the following breadcrumbs.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Bootstrap</a></li>
  <li class="active">Introduction</li>
</ol>

Output

Jumbotron

Jumbotron are lightweight, flexible component that can optionally extend the entire viewport to showcase key content of the website.

<div class="jumbotron">
  <div class="container">
    <h1>This is a Jumbotron!</h1>
    <p>Some sample text goes here...</p>
    <p>And a sample button <button class="btn btn-primary">Click me</button> </p>
  </div>
</div>

Output

Page header

Page header is a simple shell for h1 element. We can also include the small element.

<div class="page-header">
  <h1>This is the page header <small>this is a small text</small></h1>
</div>

Output