Bootstrap Magic
Bootstrap can be a very handy tool. It makes it easy to quickly create layouts and the grid system is handy for creating flexible layouts. Rather than spending time, developing components from the ground up like this jumbotron, I can just use the code available from Bootstrap’s documentation.
This page was created using Bootstrap 4.6.1.
Bootstrap 4 DocComponents
Jumbotron
Jumbotron
This is a flexible component meant to act as a hero unit. It's good for bringing attention to certain aspects of a site like a promotion. You can see an example of how it is used above.
The Code
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>Buttons
ButtonsLarge Button
Bootstrap offers a wide library of button styles that can be used for many different purposes. The buttons can be easily customized using the bootstrap color system. There is an example of a large button in the jumbotron above. It takes you to the Bootstrap 4 documentation.
The Code
<button type="button" class="btn btn-primary btn-lg">Large button</button>Badges
Badge Pill badges
Badges are small labels that can be added to elements. These can be used to indicate notifications, to indicate a product is new, etc. I am using the pill version of the badges to indicate what component and what version of the component I am using. You can see examples underneath each of the component names in this section.
The Code
<span class="badge badge-pill badge-primary">Badge Text</span>
Slide Show
Carousel Indicators
These are sometimes referred to as sliders. When you want to showcase a group of images, you can use this component. You can resize it so it becomes a full size header. Or you can use smaller sizes like I have done to the left. You can also customize what controls are visible on the carousel. Right now, I have the indicators visible. You can also toggle the arrows on or none of the above.
The Code
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
</div>Tab List Group
List-Group JavaScript Behavior