Bootstrap Jumbotron

Bootstrap hasn’t merely provided us way to style existing elements but it also comes with some of its own. A jumbotron is one such element. A jumbotron is a big block used to display crucial information to the user. Jumbotron is often used right below the header. It is a good way to catch user attention. By default, bootstrap jumbotron is a big box with rounded corners and grey background. Jumbotron increases the default font size of the elements inside it. To convert a simple div to jumbotron, simply add “jumbotron” class to the opening tag of the div. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>
        <div class="container">
          <div class="jumbotron">
            <h1>Welcome to Knowledge Hills</h1> 
            <p>Knowledge hill provides free of cost tutorials on technologies ranging from programming                   languages to business and management.</p> 
          </div>
          <p>This is outside Jumbotron</p> 
        </div>
    </body>

</html>

Download the code
Try the code

If you open the above page in browser, you should see a jumbotron aligned in the middle of the page. It has a heading and a paragraph. You can see that the font size of h1 heading inside the jumbotron is huge compared to simple h1 heading. This is because, jumbotron enlarges the font sizes of heading as well as paragraph. On the other hand, if you look at the paragraph text outside the jumbotron, it has default font-size. Another point to notice here is that jumbotron and the text beneath is centered and have margin on both sides? This is because we have enclosed it inside a div with class “container” which centralizes the content in it.

Bootstrap Jumbotron with Page Header

Most of the time, jumbotron lays underneath a header. It is extremely simple to create a header in bootstrap. Simply use “page-header” class beneath in the opening tag of the div which you want to convert to header. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>
          <div class="page-header">
            <h1>Programming tutorials and Articles.</h1>
          </div>
          <div class="jumbotron">
            <h1>Welcome to Knowledge Hills</h1> 
            <p>Knowledge hill provides free of cost tutorials on technologies ranging from programming                   languages to business and management.</p> 
          </div>
          <p>This is outside Jumbotron</p> 
        
    </body>

</html>

Download the code
Try the code

Now, if you open the above page in browser, you should see a header, a jumbotron and some text underneath it. Also, you can see that the jumbotron and header do not have any margin on the sides. This is because, the container div has been removed.

<<< Bootstrap TablesBootstrap Alerts >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .