Bootstrap 4 - Jumbotron

What is meant by Jumbotron in Bootstrap 4?

In Bootstrap 4, Jumbotron can be defined as a huge grey box that can be used to draw attention to the content or any special information.

In other words, a Jumbotron is a light weighted and flexible component that can be used to showcase the important or essential information in a web page or website.

In addition to that, a user can put any kind of valid HTML, that also includes the other Bootstrap elements or classes.

In order to create a jumbotron, the class .jumbotron is used inside a <div>.

Basic Jumbotron:

A basic Jumbotron has a simple styling, the syntax for a Basic Jumbotron is given below:

Syntax:

<div class="jumbotron">
  <h1>Welcome to JavaTpoint</h1>
  <p> The Best Portal to Learn Technologies </p>
</div>

The Sample Code for a Basic Jumbotron is given below:

<!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">
<h1>Welcome to JavaTpoint</h1>      
<p>JavaTpoint is one of the best portals to learn about various new and in - demand technologies.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>      
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>      
</div>
</body>
</html>

Test it Now

The Output for the above sample code will be:

Full - Width Jumbotron:

When a user wants to create a full - width jumbotron. A user will need to add the .jumbotron-fluid and .container or .container-fluid classes which can be used to create a full-width jumbotron without rounded borders. The syntax of a full - width Jumbotron is given below.

Syntax:

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1>Welcome to JavaTpoint</h1>
    <p> The Best Portal to Learn Technologies </p>
  </div>
</div>

The Sample Code for Full - Width Jumbotron is given below:

<!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="jumbotron jumbotron-fluid">
<div class="container">
<h1>Welcome to JavaTpoint</h1>      
<p>JavaTpoint is one of the best portals to learn about various new and in - demand technologies.</p>
</div>
</div>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>      
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>      
</div>
</body>
</html>

Test it Now

The Output for the above sample code is given below: