< Bootstrap Tutorial

Bootstrap jumbotron

← Previous Next →


Bootstrap Jumbotron

The Bootstrap jumbotron component provides an excellent way to showcase the key content or information on a web page. Just wrap the featured content like heading, descriptions etc. in a <div> element and apply the class .jumbotron on it.

The following code showcases how to use this class:

<div class = "container">

   <div class = "jumbotron">
      <h1>Welcome to landing page!</h1>
      <p>This is an example for jumbotron.</p>
      
      <p>
         <a class = "btn btn-primary btn-lg" role = "button">Learn more</a>
      </p>
   </div>
   
</div>

The result will be:

To get a jumbotron of full width, and without rounded corners use the .jumbotron class outside all .container classes and instead add a .container within as shown in the following code:

<div class = "jumbotron">
   
   <div class = "container">
      <h1>Welcome to landing page!</h1>
      <p>This is an example for jumbotron.</p>
      
      <p>
         <a class = "btn btn-primary btn-lg" role = "button">Learn more</a>
      </p>
   </div>
   
</div>

The output looks like this:

 

← Previous Next →