Bootstrap Jumbotron

Bootstrap Jumbotron creates a big box which displayed as a grey box with rounded courners. It also enlarges the font sizes of the text inside it. Bootstrap Jumbotron is usally used for Page Header. To create a jumbotron heading use the ".jumbotron" class inside a div element.

Example 1: Jumbotron Heading Inside Container

<div class="container">
  <div class="jumbotron">
    <h1>Website Heading</h1> 
    <p>Some text about website.</p> 
  </div>
  <p>This is some page text.</p> 
  <p>This is another page text.</p> 
</div>

Example 2: Jumbotron Heading Outside Container

<div class="jumbotron">
  <h1>Website Tutorial</h1> 
  <p>Some text about website.</p> 
</div>
<div class="container">
  <p> This is some page text. </p> 
  <p> This is another page text. </p> 
</div>