Jumbotron

Легкий, гибкий компонент для демонстрации ключевого содержимого вашего сайта.

Легкий, гибкий компонент, который может дополнительно расширить экран, чтобы продемонстрировать ключевые маркетинговые сообщения на вашем сайте.

Привет, мир!

Это простой пример блока с компонентом в стиле jumbotron для привлечения дополнительного внимания к содержанию или информации.


Использются служебные классы для типографики и расстояния содержимого в контейнере большего размера.

Узнать больше

<div class="jumbotron">
  <h1 class="display-4">Привет, мир!</h1>
  <p class="lead">Это простой пример блока с компонентом в стиле jumbotron для привлечения дополнительного внимания к содержанию или информации.</p>
  <hr class="my-4">
  <p>Использются служебные классы для типографики и расстояния содержимого в контейнере большего размера.</p>
  <p class="lead">
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  </p>
</div>

Чтобы создать jumbotron максимальной ширины и без закругленных углов добавьте класс модификатора .jumbotron-fluid и добавьте в контейнер .container или .container-fluid.

Fluid jumbotron

Это модифицированный jumbotron, который занимает все горизонтальное пространство своего родителя.

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Fluid jumbotron</h1>
    <p class="lead">Это модифицированный jumbotron, который занимает все горизонтальное пространство своего родителя.</p>
  </div>
</div>