Dot Indicators

Dot indicators are the default type of indicators used in Bootstrap carousels. They are represented by small circular dots located below the carousel slides.

• Each dot corresponds to a slide in the carousel, indicating which slide is currently active.
• Dot indicators are created automatically by Bootstrap when you use the carousel component.

Syntax:

<ol class="carousel-indicators">
  <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
  <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
  <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  <!-- Add more li elements for additional slides -->
</ol>

Explanation: This code snippet creates dot indicators for a Bootstrap carousel, where each dot (<li>) corresponds to a slide, with the first dot marked as active, allowing users to navigate through the slides visually.

In Bootstrap, carousel indicators are used to indicate the currently active slide within a carousel component. There are two types of carousel indicators provided by Bootstrap: