Bootstrap 5- Jumbotron
In Bootstrap 3, a jumbotron was introduced as a large, padded box for highlighting special content or information. Now, jumbotrons do not support in Bootstrap 5 version. We can achieve the same result with an
A Bootstrap jumbotron specifies a big box for getting extra attention to some special content or information. It is displayed as a grey box with rounded corners. It can also enlarge the font sizes of the text inside it.
The class .jumbotron within the <div> element is used to create a jumbotron.
Bootstrap-Jumbotron
<html lang = "en"><head>
<title> Bootstrap 5 Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container">
<div class="container mt-3">
<h2>Example of Jumbotron</h2>
<div class="mt-4 p-5 bg-primary text-white rounded">
<p>In Bootstrap 3, a jumbotron was introduced as a large, padded box for highlighting special content or information. Now, jumbotrons do not support in Bootstrap 5 version. We can achieve the same result with an
</div>
</div>
</div>
</body>
</html>
Output
Example of Jumbotron
In Bootstrap 3, a jumbotron was introduced as a large, padded box for highlighting special content or information. Now, jumbotrons do not support in Bootstrap 5 version. We can achieve the same result with an element, special helper classes, and a color class...
Bootstrap-Jumbotron Image Example
<html lang = "en"><head>
<title> Bootstrap 5 Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container">
<div class="container mt-3">
<h2>Example of Jumbotron</h2>
<div class="mt-4 p-5 bg-primary text-white rounded">
<img src="images/jumbotron.png" >
<p>In Bootstrap 3, a jumbotron was introduced as a large, padded box for highlighting special content or information. Now, jumbotrons do not support in Bootstrap 5 version. We can achieve the same result with an
</div>
</div>
</body>
</html>
Example of Jumbotron
In Bootstrap 3, a jumbotron was introduced as a large, padded box for highlighting special content or information. Now, jumbotrons do not support in Bootstrap 5 version. We can achieve the same result with an element, special helper classes, and a color class...