Джамботрон был представлен в Bootstrap 3 как большой мягкий ящик, предназначенный для привлечения дополнительного внимания к особому контенту или информации.
Jumbotrons больше не поддерживаются в Bootstrap 5. Однако вы можете использовать элемент <div> и добавить специальные вспомогательные классы вместе с классом цвета. для достижения того же эффекта:
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>Попробуйте сами →
<!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>