Bootstrap 4 Jumbotron

Bootstrap 4 Jumbotron

Bootstrap offers Jumbotron, which is used to get more attention to specific content or information on the web page. It provides a gray background-color to the content to make that content notable/eye-catching.

All the HTML elements and other Bootstrap classes are valid inside the Jumbotron.

A jumbotron is created using .jumbotron class in the <div>  tag.

Example

<!DOCTYPE html>
 <html lang="en"> 
 <head>
   <title>Bootstrap Jumbotron 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.4.1/css/bootstrap.min.css">
 </head>
 <body>
 <div class="container"> 
   <div class="jumbotron">
     <h1>Bootstrap Jumotron</h1>      
     <p>This text is inside the Bootstrap Jumbotron.</p>
   </div>
   <p>This text is outside the bootstrap jumbotron</p>      
 </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
 </body>
 </html> 

Output

Full-width Jumbotron

Full-width jumbotron covers the full width of the screen or viewport. To make the full-width jumbotron, you have to use .jumbotron-fluid class and either .container  class or .container-fluid class inside the jumbotron.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Jumbotron 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.4.1/css/bootstrap.min.css">
 </head>
 <body>
 <div class="jumbotron jumbotron-fluid">
   <div class="container">
     <h1>Bootstrap Jumotron</h1>       
     <p>This text is inside the Bootstrap Jumbotron.</p>
   </div>
 </div>
 <div class="container">
   <p>This text is outside the bootstrap jumbotron</p>
 </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
 </body>
 </html> 

Output