Carousel

The Carousel component cycles through a set of slides — images, captions, or any markup — one at a time, with prev/next controls and optional indicator dots. We'll use it to build a "featured trail photos" carousel for TrailMap's homepage.

Carousel Structure

The outer .carousel element wraps a .carousel-inner container, which holds one or more .carousel-item elements — exactly one of which must have the extra .active class, or nothing will display.

<div id="trailCarousel" class="carousel slide">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="ridgeline.jpg" class="d-block w-100" alt="Ridgeline Loop">
    </div>
    <div class="carousel-item">
      <img src="creekside.jpg" class="d-block w-100" alt="Creekside Trail">
    </div>
  </div>
</div>

Controls: Previous and Next

.carousel-control-prev and .carousel-control-next add clickable arrows. Each links back to the carousel's own id and carries data-slide set to "prev" or "next".

<a class="carousel-control-prev" href="#trailCarousel" data-slide="prev">
  <span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#trailCarousel" data-slide="next">
  <span class="carousel-control-next-icon"></span>
</a>

Indicators

The row of clickable dots at the bottom is a .carousel-indicators list. Each <li> targets the carousel via data-target and picks a slide by zero-based index with data-slide-to.

<ol class="carousel-indicators">
  <li data-target="#trailCarousel" data-slide-to="0" class="active"></li>
  <li data-target="#trailCarousel" data-slide-to="1"></li>
</ol>

Autoplay: data-ride="carousel"

Add data-ride="carousel" on the outer element to have it start cycling automatically on page load, instead of waiting for a click.

<div id="trailCarousel" class="carousel slide" data-ride="carousel"> ... </div>
Note: It's data-ride, not data-bs-ride — another Bootstrap 4 attribute that dropped the bs- prefix in Bootstrap 5.

Adding Captions

A .carousel-caption block inside a .carousel-item overlays text on top of the slide — handy for a photo credit or a short label.

<div class="carousel-item active">
  <img src="ridgeline.jpg" class="d-block w-100" alt="Ridgeline Loop">
  <div class="carousel-caption d-none d-md-block">
    <h5>Ridgeline Loop</h5>
    <p>4.2 mi · Moderate</p>
  </div>
</div>

Worked Example: TrailMap Featured Trail Photos

Putting every piece together: three featured trail photos, autoplaying, with prev/next arrows, indicator dots, and a caption on each slide.

<div id="trailCarousel" class="carousel slide" data-ride="carousel">

  <ol class="carousel-indicators">
    <li data-target="#trailCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#trailCarousel" data-slide-to="1"></li>
    <li data-target="#trailCarousel" data-slide-to="2"></li>
  </ol>

  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="ridgeline.jpg" class="d-block w-100" alt="Ridgeline Loop">
      <div class="carousel-caption d-none d-md-block">
        <h5>Ridgeline Loop</h5>
      </div>
    </div>
    <div class="carousel-item">
      <img src="creekside.jpg" class="d-block w-100" alt="Creekside Trail">
      <div class="carousel-caption d-none d-md-block">
        <h5>Creekside Trail</h5>
      </div>
    </div>
    <div class="carousel-item">
      <img src="summit-view.jpg" class="d-block w-100" alt="Summit View">
      <div class="carousel-caption d-none d-md-block">
        <h5>Summit View</h5>
      </div>
    </div>
  </div>

  <a class="carousel-control-prev" href="#trailCarousel" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#trailCarousel" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>

</div>
Up next: Carousels showcase content that's always on screen. For a brief, dismissible notification that pops in after something happens (like saving a favorite), you want a Toast instead.