Бутстрап — Джумботрон

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

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

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

Создайте контейнер <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 полной ширины и без закругленных углов, используйте класс .jumbotron вне всех классов .container и вместо этого добавьте .container внутри, как показано в следующем примере —