Carousel & Modal

Carousels rotate slides of images or content. Structure: #carouselId with .carousel-inner > .carousel-item. Controls use data-bs-slide="prev/next".

Carousel

Carousels rotate slides of images or content. Structure: #carouselId with .carousel-inner > .carousel-item. Controls use data-bs-slide="prev/next".

Add .carousel-indicators for dots. Autoplay with data-bs-ride="carousel" (use carefully — motion can annoy users).

Real-life example: A carousel is like a revolving billboard — three ads on one screen space, changing every few seconds.

Image carousel

<div id="heroCarousel" class="carousel slide" data-bs-ride="carousel">
  <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>
  <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

Modal

Modals are popup dialogs. Trigger with data-bs-toggle="modal" data-bs-target="#myModal". The modal has .modal-dialog > .modal-content > header, body, footer.

Use role="dialog" and aria-labelledby for accessibility. Backdrop click closes the modal by default.

Real-life example: A modal is like a pop-up counter window at a ticket office — the rest of the page dims until you finish or close the window.

Modal dialog

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#signupModal">
  Sign up
</button>

<div class="modal fade" id="signupModal" tabindex="-1" aria-labelledby="signupLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="signupLabel">Create account</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Join Rishtaara and start learning Bootstrap today.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>