Components

- alerts
- buttons
- forms
- input group
- cards

carousel
- Sliding and Scrolling Banners

Classes:

.carousel
.carousel-inner
.carousel-item
.active
.slide

Syntax:
<div class="carousel">
<div class="carousel-inner">
<div class="carousel-item">

</div>
</div>
</div>

- Animation for carousel starts with an attribute

"data-bs-ride"

<div class="carousel" data-bs-ride="carousel">

- For every carousel any one Item must be active

<div class="carousel-inner active">

Carousel Controls

.carousel-control-prev
.carousel-control-prev-icon
.carousel-control-next
.carousel-control-next-icon

- Attributes used for navigation are

data-bs-slide="prev"
data-bs-slide="next"
data-bs-target="#carousel_id"
Syntax:
<button class="carousel-control-prev" data-bs-slide="prev" data-bs-target="#carousel_id>
<span class="carousel-control-prev-icon"> </span>
</button>

- Random navigation for controls is defined by using indicators

"carousel-indicators"

data-bs-slide-to="index"
data-bs-target

Syntax:
<div class="carousel-indicators">
<button data-bs-slide-to="0" data-bs-target="#id"> </button>
</div>

- Slide timinings are defined by using the attribute

"data-bs-interval"

Syntax:
<div class="carousel-item" data-bs-interval="3000">
</div>
Collapse

.collapse
.show
.fade

data-bs-target
data-bs-toggle

Syntax:
<button data-bs-target="#details" data-bs-toggle="collapse"> Toggle </button>
<div class="collapse show fade" id="details">
.... your content...
</div>
Accordion
- That expand and collapse using "Mutex" mechanism [Mutual Exclusion]

.accordion
.accordion-item
.accordion-header
.accordion-button
.accordion-body
.accordion-collapse
- The mutex is configured by using attribute
"data-bs-parent"