❮ Previous Next ❯

Media Components

  • Handle images and media elements using Bootstrap components.

  • Introduction to Media Components

    Media components are used to present visual content such as:

    • Images

    • Slides

    • Banners

    • Featured content

    In Bootstrap, the primary media component for sliding content is the Carousel.

    Carousel (Slider)

    What Is a Carousel ?

    A Carousel is a slideshow component that:

    • Cycles through a series of content

    • Displays one item at a time

    • Supports images, text, or mixed content

    Carousels are commonly used for:

    • Homepage banners

    • Image galleries

    • Promotions and offers

    • Featured products or content

    Why Use a Carousel ?

    Carousels are useful because they:

    • Save screen space

    • Highlight multiple items in the same area

    • Create visual engagement

    • Allow automatic or manual navigation

    Carousels should be used carefully and only when multiple items deserve attention.

    Carousel Requirements

    Bootstrap carousel requires:

    • Proper HTML structure

    • Bootstrap CSS

    • Bootstrap JavaScript (mandatory)

    Without JavaScript, the carousel will not slide.

    Basic Carousel Structure

    A Bootstrap carousel consists of:

    1. Carousel wrapper

    2. Carousel inner container

    3. Carousel items (slides)

    4. Controls (previous / next)

    5. Indicators (optional)

Building a Complete Bootstrap Carousel

The carousel component creates a slideshow with slides, indicators, and navigation controls. 

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
  <!-- Indicators -->
  <div class="carousel-indicators">
    <button data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></button>
    <button data-bs-target="#myCarousel" data-bs-slide-to="1"></button>
    <button data-bs-target="#myCarousel" data-bs-slide-to="2"></button>
  </div>

  <!-- Slides -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="slide1.jpg" class="d-block w-100" alt="Slide 1">
    </div>
    <div class="carousel-item">
      <img src="slide2.jpg" class="d-block w-100" alt="Slide 2">
    </div>
    <div class="carousel-item">
      <img src="slide3.jpg" class="d-block w-100" alt="Slide 3">
    </div>
  </div>

  <!-- Controls -->
  <button class="carousel-control-prev" data-bs-target="#myCarousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" data-bs-target="#myCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>
  •  Understanding the Carousel Code
    PartPurpose
    .carouselEnables carousel
    .slideAdds sliding animation
    data-bs-ride="carousel"Auto start sliding
    .carousel-innerHolds slides
    .carousel-itemIndividual slide
    .activeFirst visible slide
    .carousel-control-*Navigation buttons
    .carousel-indicatorsSlide indicators

Displaying Text Over Carousel Images

The .carousel-caption class shows headings and text over carousel images. 

<div class="carousel-item active">
  <img src="slide1.jpg" class="d-block w-100">
  <div class="carousel-caption d-none d-md-block">
    <h5>Slide Title</h5>
    <p>Slide description text.</p>
  </div>
</div>

  • Use cases:

    • Marketing banners

    • Promotional text

    • Feature highlights

    Carousel Timing & Controls

Managing Carousel Auto Slide Settings

Use data-bs-ride to stop auto sliding and data-bs-interval to set slide timing. 

<!-- Disable Auto Sliding -->
<div class="carousel slide" data-bs-ride="false">

<!-- Change Slide Interval (3000ms = 3 seconds) -->
<div class="carousel slide" data-bs-interval="3000">

Creating Text-Only Carousel Slides

Carousel slides can display styled text content instead of images. 

<div class="carousel-item active">
  <div class="p-5 bg-primary text-white">
    <h3>Welcome</h3>
    <p>This is text-based slide content.</p>
  </div>
</div>

  • Useful for:

    • Testimonials

    • Announcements

    • Feature explanations

     Carousel Best Practices

    • Limit number of slides (3–5 max)

    • Do not overload slides with text

    • Ensure images are optimized

    • Provide manual controls

    • Avoid critical content inside carousels

    Accessibility Considerations

    • Always include alt text for images

    • Avoid auto-sliding for important content

    • Ensure controls are visible and usable

    • Consider keyboard navigation

    Accessibility improves usability for all users.

    Common Mistakes

    • Forgetting .active class on first slide

    • Missing Bootstrap JavaScript

    • Using very large images

    • Too many slides

    • Using carousel for essential information

❮ Previous Next ❯