Bootstrap - Jumbotron and Page Header

Introduction

Page headers and jumbotron are classes provided by bootstrap to give an attractive look to specific content like headers and other text which require attention by the reader. Let’s look at a jumbotron, page header and how to use them in our project. 

What is a jumbotron?

A jumbotron is a box that adds to the attractiveness of a particular text or HTML content enclosed inside it. It is coloured grey and is sized big compared to the rest of the page with enlarged texts. 

How to create a jumbotron?

Step 1: Create a div element, link HTML to bootstrap style and script as shown below.

Step 2: add “jumbotron” to this div element’s class list

Step 3: Now, put any Html content inside of it.

<div class=”jumbotron”> any content </div> 

Example
<!DOCTYPE html>
<html lang="en">
 <head>
   <title>Jumbotron Template for Bootstrap</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
 </head>
 <body>
   <div class="container">
     <div class="jumbotron">
       <h1>Jumbotron example</h1>
       <p class="lead">The quick brown fox jumps right over the lazy dog.</p>
       <p>
         <a class="btn btn-lg btn-success" href="#" role="button"
           >Sign up today</a
         >
       </p>
     </div>
   </div>
 </body>
</html>

 

For a full-width jumbotron

If we want content inside to jumbotron to extend to its full width, add the “jumbotron-fluid” class to the class with “jumbotron” as well

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Bootstrap Example</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
 <div class="jumbotron jumbotron-fluid">
   <h1>Jumbotron</h1>     
   <p>The quick brown fox jumps right over the lazy dog.</p>
 </div>
 <p>This is some text.</p>     
 <p>This is another text.</p>     
</div>

</body>
</html>

 

What is a page header?

Page headers separate the page’s content from the heading by providing extra space around the heading and a separator line below the header. This is helpful in distinguishing multiple headers from each other. This also helps in creating an impression on the reader.

Why add a page header?

Just give a “page-header” class to the header division of the Html snippet. It will automatically add extra space around headers to give a distinct look with enlarged font size and a horizontal line below the page header.

Steps to add a page header

Step 1: Link Html with style, scripts of bootstrap

Step 2: add an element with a class of “page-header”,, e.g. a div

Step 3: add text inside of this element and close it.

 

<!DOCTYPE html>
<html lang="en">
 <head>
   <title>Jumbotron Template for Bootstrap</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
 </head>
 <body>
   <div class="container">
     <div class="page-header">
       <h1>text inside page header</h1>
     </div>
     <h2>text below page header</h2>
   </div>
 </body>
</html>

Frequently Asked Questions

Q1) Are these page headers and jumbotron responsive?
Yes, classes provided by bootstrap adds responsiveness to the element it is attached with.

Q2) What are other classes present in bootstrap?
There are a lot of classes inside the bootstrap library. You can create beautiful designs with them easily without adding any stylesheet to the project. Bootstrap classes are made to be responsive and attractive. Some are btn for button m for margin, p for padding,border-primary for border colour etc.

Key takeaway

Congrats on reaching this far through the article  :). In this article, we went through all the steps in adding jumbotron and page header classes to HTML and also understood how jumbotron fluid extends the contents of jumbotron to full-width Use of bootstrap makes life easier and simpler. 

If you want to get started with bootstrap for free and want to learn more about it then you can visit Learn Bootstrap and check out our blog to know why bootstrap is cool and how it helps you in designing your website with Responsive Network Vanilla utilising HTML, CSS & Bootstrap.

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think