Sprawdź najnowszą wersję komponentu jumbotron zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać.

Jeśli korzystaliście z Bootstrap 3 to możecie kojarzyć element o nazwie „Well” co po polsku znaczy „studnia” ale nie wiem dlaczego, ktoś to tak nazwał;) W Bootstrap 4 ów element zastąpił Jumbotron, nazwa równie dziwna, ale dowiedziałem się, że jest to określenie telebimu, co może sprowadzić nas na trop czemu służy ten element. A służy on do wyróżniania elementów na naszej stronie. Tworząc komercyjne strony stosujemy elementy „CTA – Call to action”, które zachęcają klienta do skontaktowania się z nami czy zamówienia produktu, który jest obecnie w promocji lub jakiejś innej akcji, która była by dla nas pożądana. Oczywiście podstawowy jumbotron jest tylko szarym elementem ale przecież nikt nie zabrania nam modyfikowania Bootstrapa:) Stworzenie tego elementu ogranicza się do diva z klasą .jumbotron i umieszczeniu w nim treści, czy to nagłówków, czy przycisków, czy zwykłego tekstu.

Podstawowy przykład

Przykład

Hello, world!

To jest jakiś ważny tekst wewnątrz jumbotronu

Jumbotron może nam służyć jako podstawa do budowania elementów CTA

Kliknij mnie!

Kod

<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">To jest jakiś ważny tekst wewnątrz jumbotronu</p>
  <hr class="my-4">
  <p>Jumbotron może nam służyć jako podstawa do budowania elementów CTA</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Kliknij mnie!</a>
</div>

Jumbotron na całą szerokość

Jeśli chcemy by nasz jumbotron zajmował całą szerokość i nie miał zaokrąglonych rogów to musimy najpierw stworzyć jumbotron z klasami .jumbotron .jumbotron-fluid a następnie w nim umieścić diva z klasą .container-fluid lub .container