Jumbotron example in Bootstrap 5 | Bootstrap 5 jumbotron

Loading…

Jumbotron example in Bootstrap 5 | Bootstrap 5 jumbotron | GoSnippets

Source Code

1<main>
2  <div class="container py-4">
3    <header class="pb-3 mb-4 border-bottom">
4       
5        <h1 class="h1">Jumbotron Example</h1>
6    </header>
7
8    <div class="p-5 mb-4 bg-light rounded-3">
9      <div class="container-fluid py-5">
10        <h1 class="display-5 fw-bold">Big Jumbotron</h1>
11        <p class="col-md-8 fs-4">Jumbotron is a very big section. like a very big board. You can add p-5 mb-4 bg-light rounded-3 to heighlight your latest product</p>
12        <button class="btn btn-danger btn-lg" type="button">Big Button</button>
13      </div>
14    </div>
15
16    <div class="row align-items-md-stretch">
17      <div class="col-md-6">
18        <div class="h-100 p-5 text-white bg-danger rounded-3">
19          <h2>small Jumbotron</h2>
20          <p>Jumbotron is a very big section. like a very big board. You can add p-5 mb-4 bg-light rounded-3 to heighlight your latest product</p>
21          <button class="btn btn-outline-light" type="button">jumbo button</button>
22        </div>
23      </div>
24      <div class="col-md-6">
25        <div class="h-100 p-5 bg-light border rounded-3">
26          <h2>Jumbo button small</h2>
27          <p>Jumbotron is a very big section. like a very big board. You can add p-5 mb-4 bg-light rounded-3 to heighlight your latest product</p>
28          <button class="btn btn-outline-secondary" type="button">Jumbo button</button>
29        </div>
30      </div>
31    </div>
32
33    <footer class="pt-3 mt-4 text-muted border-top">
34      &copy; 2021-2022
35    </footer>
36  </div>
37</main>
38

Jumbotron example in Bootstrap 5 | Bootstrap 5 jumbotron

Source Code

More Cards snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery