Hero
Bootstrap Hero - free examples, templates & tutorial
Responsive Hero built with Bootstrap 5. Examples include hero image, hero banner, hero slider, hero section & more.
To learn more read Card Docs.
Hero banner
Hero banner is a full width card located at the beginning of a page.
Hello world!
This is a simple hero unit, a simple hero-style component for calling extra attention to featured content or information.
It uses utility classes for typography and spacing to space content out within the larger container.
<!-- Hero -->
<div class="p-4 shadow-4 rounded-3" style="background-color: hsl(0, 0%, 94%);">
<h2>Hello world!</h2>
<p>
This is a simple hero unit, a simple Hero-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>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">
Learn more
</button>
</div>
<!-- Hero -->
Hero image
Add a background image to your Hero. Make sure to use a mask ensure contrast between the overlaying text & the image.
You can include many different slides by creating a Hero slider or a Hero slider with thumbnails, if you want use smaller image previews as controls.
<!-- Hero -->
<div class="p-5 text-center bg-image rounded-3" style="
background-image: url('https://mdbcdn.b-cdn.net/img/new/slides/041.webp');
height: 400px;
">
<div class="mask" style="background-color: rgba(0, 0, 0, 0.6);">
<div class="d-flex justify-content-center align-items-center h-100">
<div class="text-white">
<h1 class="mb-3">Heading</h1>
<h4 class="mb-3">Subheading</h4>
<a data-mdb-ripple-init class="btn btn-outline-light btn-lg" href="#!" role="button">Call to action</a>
</div>
</div>
</div>
</div>
<!-- Hero -->