Bootstrap
In this tutorial we will learn about breadcrumbs, jumbotron and page headers in Bootstrap.
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 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>
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>