Skip to main content
Bootstrap
CHAPTER 14 Beginner

Bootstrap Carousel and Media Components

Updated: May 18, 2026
5 min read

# CHAPTER 14

Bootstrap Carousel and Media Components

1. Chapter Introduction

Visual media — image sliders, galleries, and embedded videos — is central to modern websites. Bootstrap's carousel component creates smooth sliding image presentations. Combined with responsive image utilities and the aspect-ratio container, Bootstrap handles all media display needs.

2. Learning Objectives

  • Build a carousel with controls and indicators.
  • Add captions to carousel slides.
  • Configure autoplay and intervals.
  • Use responsive image utilities.
  • Embed responsive videos with the ratio helper.
  • Build an image gallery slider.

3. Basic Carousel

html
12345678910111213141516171819202122232425262728293031323334353637383940414243 
<div id="heroCarousel" class="carousel slide" data-bs-ride="carousel">

  <!-- Indicators (dots) -->
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="2"></button>
  </div>

  <!-- Slides -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://picsum.photos/seed/slide1/1200/500" class="d-block w-100" alt="Slide 1" />
      <div class="carousel-caption d-none d-md-block">
        <h3>First Slide</h3>
        <p>Description for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/seed/slide2/1200/500" class="d-block w-100" alt="Slide 2" />
      <div class="carousel-caption">
        <h3>Second Slide</h3>
        <p>Description for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/seed/slide3/1200/500" class="d-block w-100" alt="Slide 3" />
    </div>
  </div>

  <!-- Previous button -->
  <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
    <span class="visually-hidden">Previous</span>
  </button>

  <!-- Next button -->
  <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
    <span class="visually-hidden">Next</span>
  </button>

</div>

4. Carousel Configuration

html
123456789101112131415161718 
<!-- Autoplay with custom interval (5 seconds) -->
<div class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000">

<!-- Crossfade instead of slide animation -->
<div class="carousel carousel-fade slide" data-bs-ride="carousel">

<!-- Touch/swipe support (default in Bootstrap 5) — disable with: -->
<div class="carousel slide" data-bs-touch="false">

<!-- Control via JavaScript -->
<script>
  const carousel = new bootstrap.Carousel(&#039;#heroCarousel', {
    interval: 3000,   // Auto-advance every 3s
    ride: &#039;carousel', // Start autoplay
    wrap: true,       // Loop back to first slide
    touch: true       // Enable swipe
  });
</script>

5. Carousel with Dark Theme

html
1234 
<div class="carousel carousel-dark slide" data-bs-ride="carousel" id="darkCarousel">
  <!-- Dark arrows and indicators (for light images) -->
  ...
</div>

6. Responsive Images

html
12345678910111213141516 
<!-- Responsive image (scales to parent width) -->
<img src="photo.jpg" class="img-fluid" alt="Responsive" />

<!-- Rounded image -->
<img src="photo.jpg" class="img-fluid rounded" alt="..." />

<!-- Circle image -->
<img src="photo.jpg" class="rounded-circle" style="width: 150px; height: 150px; object-fit: cover;" alt="Avatar" />

<!-- Thumbnail border -->
<img src="photo.jpg" class="img-thumbnail" alt="Thumbnail" />

<!-- Float images -->
<img src="photo.jpg" class="img-fluid float-start me-3 rounded" style="width: 200px;" alt="Left" />
<p>Text wraps around the left-floated image...</p>
<div class="clearfix"></div>

7. Responsive Video Embeds (Aspect Ratio)

html
1234567891011121314151617181920 
<!-- 16:9 ratio (YouTube, Vimeo) -->
<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    title="YouTube video" allowfullscreen></iframe>
</div>

<!-- 4:3 ratio -->
<div class="ratio ratio-4x3">
  <iframe src="https://www.youtube.com/embed/..." allowfullscreen></iframe>
</div>

<!-- 1:1 ratio (square) -->
<div class="ratio ratio-1x1">
  <video src="video.mp4" controls></video>
</div>

<!-- 21:9 ratio (cinematic) -->
<div class="ratio ratio-21x9">
  <iframe src="..." allowfullscreen></iframe>
</div>

8. Mini Project: Image Gallery Slider

html
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Image Gallery</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" />
  <style>
    .carousel-item img { height: 500px; object-fit: cover; }
    .thumb-row img { cursor: pointer; opacity: 0.6; transition: .2s; height: 80px; object-fit: cover; }
    .thumb-row img:hover, .thumb-row img.active { opacity: 1; border: 3px solid #0d6efd; }
  </style>
</head>
<body class="bg-dark">
  <div class="container py-5">
    <h2 class="text-white text-center mb-4">📷 Nature Gallery</h2>

    <!-- Main Carousel -->
    <div id="galleryCarousel" class="carousel carousel-fade slide mb-3" data-bs-ride="carousel" data-bs-interval="4000">
      <div class="carousel-inner rounded-3 overflow-hidden">
        <div class="carousel-item active">
          <img src="https://picsum.photos/seed/nat1/1200/500" class="d-block w-100" alt="Nature 1" />
          <div class="carousel-caption"><h5>Mountain Peak</h5></div>
        </div>
        <div class="carousel-item">
          <img src="https://picsum.photos/seed/nat2/1200/500" class="d-block w-100" alt="Nature 2" />
          <div class="carousel-caption"><h5>Forest Trail</h5></div>
        </div>
        <div class="carousel-item">
          <img src="https://picsum.photos/seed/nat3/1200/500" class="d-block w-100" alt="Nature 3" />
          <div class="carousel-caption"><h5>Ocean Sunset</h5></div>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#galleryCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#galleryCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
      </button>
    </div>

    <!-- Thumbnail strip -->
    <div class="row g-2 thumb-row">
      <div class="col-4"><img src="https://picsum.photos/seed/nat1/400/200" class="w-100 rounded active" data-bs-target="#galleryCarousel" data-bs-slide-to="0" /></div>
      <div class="col-4"><img src="https://picsum.photos/seed/nat2/400/200" class="w-100 rounded" data-bs-target="#galleryCarousel" data-bs-slide-to="1" /></div>
      <div class="col-4"><img src="https://picsum.photos/seed/nat3/400/200" class="w-100 rounded" data-bs-target="#galleryCarousel" data-bs-slide-to="2" /></div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

9. Common Mistakes

  • No active class on first .carousel-item: Without active on the first slide, the carousel will be empty/blank.
  • Carousel images not at equal height: Without a fixed height and object-fit: cover, slides with different image aspect ratios will jump in height during transitions.

10. MCQs

Question 1

Required class on the first carousel item?

Question 2

What adds the automatic crossfade transition?

Question 3

What makes carousel images responsive?

Question 4

Video embed ratio for YouTube?

Question 5

data-bs-ride="carousel" on the carousel div?

Question 6

What class makes carousel controls dark (for light backgrounds)?

Question 7

What does img-fluid do?

Question 8

Thumbnail-bordered image?

Question 9

carousel-caption is hidden on mobile by default using?

Question 10

What interval value autoplays every 3 seconds?

11. Interview Questions

  • Q: How do you prevent carousel image height jumping between slides?
  • Q: What is the Bootstrap aspect ratio helper and why is it needed for iframes?

12. Summary

Bootstrap's carousel handles image sliders with indicators, captions, and autoplay. The img-fluid class makes all images responsive. The ratio ratio-16x9 helper maintains video aspect ratios across all screen sizes — solving the classic "responsive iframe" problem with one class.

13. Next Chapter Recommendation

In Chapter 15: Bootstrap Flexbox and Layout Utilities, we master Bootstrap's flexbox utility classes for professional alignment, justification, ordering, and complex responsive layouts.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter Bootstrap Modals and Popups
Next Chapter Bootstrap Flexbox and Layout Utilities

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 1