Jumbotron

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

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

Hello, world!

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


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

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

<div class="jumbotron">
  <h1 class="display-4">Hello, world!</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>