Jumbotron example in Bootstrap 5 | Bootstrap 5 jumbotron

Cards Bootstrap 5Free

Add a card to your UI with Jumbotron example in Bootstrap 5 | Bootstrap 5 jumbotron. Free Bootstrap 5 code — HTML ready to copy, MIT licensed.

3.9k views32 downloads4 years ago

gosnippets.com/preview/jumbotron-example-in-bootstrap-5-|-bootstrap-5-jumbotron

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

More Cards snippets

Bootstrap carousel with cards in 3 columns

Bootstrap carousel with cards in 3 columns: a hand-crafted, open-source Bootstrap 5 card. HTML included, ready to copy.

CardsView →

Bootstrap 5 ecommerce product cards details template

Add a card to your UI with Bootstrap 5 ecommerce product cards details template. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.

CardsView →

Bootstrap snippet Panels with nav tabs using HTML & CSS

Bootstrap snippet Panels with nav tabs using HTML & CSS — a free Bootstrap 5 card snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.

CardsView →

Comments(0)

No comments yet — be the first to start the discussion.

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 © 2021-2022 35 </footer> 36 </div> 37</main> 38