Web Designer Wall

Snippets Animation

Bootstrap 5 Hero Header with Fading Background Carousel

A landing page hero with a transparent navbar over a softly fading photo carousel, a centred headline and two calls to action. The mobile menu collapses into a blurred panel.

Bootstrap 5 No jQuery Jan 2020 2.4K views 

<section class="wdw-stage hero-stage">
  <div class="container w-100" style="max-width:1100px">
    <header class="hero-header">
      <div id="heroBg" class="carousel slide carousel-fade hero-bg" data-bs-ride="carousel" data-bs-pause="false" aria-hidden="true">
        <div class="carousel-inner h-100">
        <div class="carousel-item active" data-bs-interval="4500">
          <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1800&q=75" alt="Mountain lake at sunrise">
        </div>
        <div class="carousel-item" data-bs-interval="4500">
          <img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=1800&q=75" alt="Quiet forest valley" loading="lazy">
        </div>
        <div class="carousel-item" data-bs-interval="4500">
          <img src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&w=1800&q=75" alt="Misty hills at dawn" loading="lazy">
        </div>
        </div>
      </div>
      <div class="hero-scrim"></div>
      <nav class="navbar navbar-expand-md navbar-dark hero-nav px-3 px-md-4 py-3" aria-label="Main navigation">
        <a class="navbar-brand fw-bold fs-4 me-auto" href="#">Eline</a>
        <button class="navbar-toggler border-0 shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#heroNav" aria-controls="heroNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse flex-grow-0" id="heroNav">
          <ul class="navbar-nav gap-md-1 pt-3 pt-md-0">
            <li class="nav-item"><a class="nav-link" href="#">About</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Contact us</a></li>
          </ul>
        </div>
      </nav>
      <div class="hero-content text-center">
        <span class="hero-eyebrow">Landing page template</span>
        <h1 class="hero-title">Tidy, clean and easy to use</h1>
        <p class="hero-sub">A responsive landing page header with a softly fading photo background, built from standard Bootstrap parts.</p>
        <div class="d-flex flex-column flex-sm-row justify-content-center gap-2 gap-sm-3">
          <a href="#" class="btn btn-primary btn-lg rounded-pill px-4">Explore</a>
          <a href="#" class="btn btn-outline-light btn-lg rounded-pill px-4">Learn more</a>
        </div>
      </div>
    </header>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Related snippets

More animation snippets