Home >>Bootstrap Tutorial >Bootstrap Jumbotron
Bootstrap Jumbotron
Bootstrap Jumbotron
A bootstrap jumbotron is generally used for extra attention to some special content, slogan or information. It displayed a bid grey box with rounded corners. It is used to enlarge the size of the headings and noticeable. It can add a margin for landing page content.
You can create a container <div> with the class of .jumbotron in bootstrap.
Jumbotron inside the container
Let's take an example of jumbotron Inside the container:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap jumbotron</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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>This div contains class .jumbotron inside the container</h1>
<p>Jumbotron specifies a big box and is generally used for extra attention to some special content, slogan or information.</p>
</div>
</div>
</body>
</html>
This div contains class .jumbotron inside the container
Jumbotron specifies a big box and is generally used for extra attention to some special content, slogan or information.
Jumbotron outside the container
When you can use the jumbotron outside the container it takes full-width size of the screen.
Let's take an example of jumbotron:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap jumbotron</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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1>This div contains class .jumbotron outside the container</h1>
<p>Jumbotron specifies a big box and is generally used for extra attention to some special content, slogan or information.</p>
</div>
</div>
</body>
</html>
This div contains class .jumbotron outside the container
Jumbotron specifies a big box and is generally used for extra attention to some special content, slogan or information.