En Bootstrap 3 se introdujo un jumbotron como una gran caja acolchada para llamar la atención sobre algún contenido o información especial.
Los jumbotrons ya no son compatibles con Bootstrap 5. Sin embargo, puede usar un elemento <div> y agregar clases auxiliares especiales junto con una clase de color. para lograr el mismo efecto:
Lorem ipsum dolor sit amet, consectetur adipiscing 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..
<div class="mt-4 p-5 bg-primary text-white rounded">
<h1>Jumbotron Example</h1>
<p>Lorem ipsum...</p>
</div>Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Example of Jumbotron</h2>
<div class="mt-4 p-5 bg-primary text-white rounded">
<h1>Jumbotron Example</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>