Bootstrap - Breadcrumbs, Jumbotron and Page Header

Bootstrap

Share

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



Share