BootstrapHow-ToBeginner · 4 min read

How to Create Carousel in Bootstrap: Simple Guide

To create a carousel in Bootstrap, use the carousel component with carousel-inner for slides and carousel-control-prev and carousel-control-next for navigation. Include Bootstrap CSS and JS, then add your images inside carousel-item elements to display a sliding image gallery.

📐

Syntax

The Bootstrap carousel uses a container with the class carousel and an ID to identify it. Inside, carousel-inner holds each slide wrapped in carousel-item. Navigation buttons use carousel-control-prev and carousel-control-next classes. Indicators are optional dots to jump to slides.

carousel: main container
carousel-inner: holds slides
carousel-item: each slide
carousel-control-prev/next: navigation arrows
data-bs-ride: attribute to start auto sliding

html

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <!-- Slide content here -->
    </div>
    <div class="carousel-item">
      <!-- Slide content here -->
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

💻

Example

This example shows a working Bootstrap carousel with three images that slide automatically. Navigation arrows let you move between slides manually.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Carousel Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <div id="exampleCarousel" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://via.placeholder.com/800x400?text=First+Slide" class="d-block w-100" alt="First Slide" />
      </div>
      <div class="carousel-item">
        <img src="https://via.placeholder.com/800x400?text=Second+Slide" class="d-block w-100" alt="Second Slide" />
      </div>
      <div class="carousel-item">
        <img src="https://via.placeholder.com/800x400?text=Third+Slide" class="d-block w-100" alt="Third Slide" />
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#exampleCarousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#exampleCarousel" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output

A webpage showing a large horizontal carousel with three slides cycling automatically. Each slide displays a placeholder image with text 'First Slide', 'Second Slide', or 'Third Slide'. Left and right arrows appear on the sides to manually switch slides.

⚠️

Common Pitfalls

Common mistakes when creating a Bootstrap carousel include:

Forgetting to include Bootstrap's JavaScript bundle, which controls the sliding behavior.
Not setting the first carousel-item as active, so no slide shows initially.
Using incorrect data-bs-target values on controls that don't match the carousel's ID.
Missing alt attributes on images, which hurts accessibility.
Not including the carousel and slide classes on the main container.

Fixing these ensures the carousel works smoothly and is accessible.

html

<!-- Wrong: Missing active class on first item -->
<div id="wrongCarousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item">
      <img src="img1.jpg" alt="Slide 1" />
    </div>
    <div class="carousel-item">
      <img src="img2.jpg" alt="Slide 2" />
    </div>
  </div>
</div>

<!-- Right: First item has active class -->
<div id="rightCarousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="img1.jpg" alt="Slide 1" />
    </div>
    <div class="carousel-item">
      <img src="img2.jpg" alt="Slide 2" />
    </div>
  </div>
</div>

📊

Quick Reference

Remember these key points when creating a Bootstrap carousel:

Use carousel slide classes on the main container.
Mark the first slide with carousel-item active.
Include Bootstrap CSS and JS files for styling and functionality.
Use data-bs-target and data-bs-slide attributes on controls.
Always add alt text to images for accessibility.

✅

Key Takeaways

Include Bootstrap CSS and JavaScript bundle to enable carousel functionality.

Wrap slides in carousel-item and mark the first as active.

Use correct data-bs-target matching the carousel ID for controls.

Add navigation buttons with carousel-control-prev and carousel-control-next classes.

Always provide descriptive alt text on images for accessibility.