Бутстрап - Jumbotron

В этой главе будет обсуждаться еще одна функция, поддерживаемая Bootstrap, - Jumbotron. Как следует из названия, этот компонент может при желании увеличивать размер заголовков и добавлять большой запас для содержимого целевой страницы. Для использования Jumbotron -

• Создайте контейнер <div> с классом .jumbotron.

• Помимо более крупного <h1>, вес шрифта уменьшен до 200 пикселей.

Следующий пример демонстрирует это -

<div class = "container">

   <div class = "jumbotron">
      <h1>Welcome to landing page!</h1>
      <p>This is an example for jumbotron.</p>
      
      <p>
         <a class = "btn btn-primary btn-lg" role = "button">Learn more</a>
      </p>
   </div>
   
</div>

Чтобы получить джумботрон полной ширины и без закругленных углов, используйте .jumbotron класс вне всех .container классы и вместо этого добавьте .container внутри, как показано в следующем примере -

<div class = "jumbotron">
   
   <div class = "container">
      <h1>Welcome to landing page!</h1>
      <p>This is an example for jumbotron.</p>
      
      <p>
         <a class = "btn btn-primary btn-lg" role = "button">Learn more</a>
      </p>
   </div>
   
</div>