Bootstrap 4 Jumbotron

June 5th, 2020

Prerana Kasar

Bootstrap 4 Jumbotron

The bootstrap 4 provides a class .jumbotron which is a container tag and which is used to enlarged the font-size of text. And the text is written inside a box having grey background-color.

Example 1 – Bootstrap 4 Jumbotron Example

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 4 Images System</title>
    <!-- link the bootstrap online or through CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/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.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
    	<h2>Jumbotron Example</h2>
       	<div class="jumbotron">
       		<h1>Heading</h1>
       		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
       		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
       		consequat.</p>
       	</div>
    </div>
</body>
</html>

Here we apply the class .jumbotron to the <div> tag and the below image show that the how this class enlarge the font-size of the HTML elements.

Bootstrap 4 Full-width Jumbotron

The class .jumbotron-fluid is used to create the full width jumbotron.

Example 2 – Bootstrap 4 Full-width Jumbotron Example

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 4 Images System</title>
    <!-- link the bootstrap online or through CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/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.0/js/bootstrap.min.js"></script>
</head>
<body>
	<h2>Jumbotron Example</h2>
	<div class="jumbotron jumbotron-fluid">
       	<div class="container">
       		<h1>Heading</h1>
       		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
       		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
       		consequat.</p>
       	</div>
    </div>
</body>
</html>

Here we apply the container tag which is wrapped by the container tag of applied class .jumbotron-fluid.