So far most of the components you have used were static. In this lesson we move into interactive territory with three JavaScript-powered Bootstrap components: the carousel for cycling through slides, the accordion for collapsible content sections, and the offcanvas for slide-in side panels. All three work without writing a single line of JavaScript yourself, thanks to Bootstrap data attributes — you only need the bundle script (bootstrap.bundle.min.js) included on the page.
A carousel cycles through a series of slides, typically images with optional captions. The structure has three parts: a wrapper with a unique id, an inner container of slide items, and optional controls and indicators.
<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="Mountain view">
</div>
<div class="carousel-item" data-bs-interval="3000">
<img src="slide2.jpg" class="d-block w-100" alt="City skyline">
</div>
</div>
<button class="carousel-control-prev" data-bs-target="#heroCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" data-bs-target="#heroCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>Key details: exactly one .carousel-item must have the active class or nothing renders; data-bs-ride="carousel" starts autoplay on load; and data-bs-interval overrides the default 5-second delay per slide. Add .carousel-fade to crossfade instead of sliding, and place a .carousel-caption inside a slide for overlay text. Use carousels sparingly — autoplaying slides can hurt usability, so consider data-bs-ride="false" for user-driven navigation.
Accordions present stacked sections where opening one panel closes the others. They are ideal for FAQ pages and settings screens. Each item pairs a header button with a collapsible body:
<div class="accordion" id="faq">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#q1">
What is Bootstrap?
</button>
</h2>
<div id="q1" class="accordion-collapse collapse show" data-bs-parent="#faq">
<div class="accordion-body">A popular CSS framework for responsive sites.</div>
</div>
</div>
</div>The magic is data-bs-parent="#faq": it links every panel to the wrapper, so only one stays open at a time. Remove it and panels open independently. A collapsed header button also needs the .collapsed class so the chevron points the right way. Use .accordion-flush to strip the outer borders so the accordion blends into a card or sidebar.
Offcanvas is a hidden panel that slides in from an edge of the viewport — the pattern behind mobile navigation drawers and filter sidebars. Position it with .offcanvas-start, .offcanvas-end, .offcanvas-top or .offcanvas-bottom:
<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#menu">Menu</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="menu">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Navigation</h5>
<button class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<a class="d-block py-2" href="#">Home</a>
<a class="d-block py-2" href="#">Courses</a>
</div>
</div>By default a backdrop dims the page and clicking it closes the panel. Set data-bs-scroll="true" to keep the page scrollable while open, or data-bs-backdrop="static" to force users to use the close button. Responsive variants like .offcanvas-lg show the content inline on large screens and collapse it into a drawer below that breakpoint — perfect for filter panels that should be a sidebar on desktop.
Reach for a carousel when you must showcase a few visual highlights, an accordion when long content needs to be scannable in sections, and an offcanvas when secondary controls should stay out of the way until requested. All three are keyboard accessible out of the box, but always verify focus behavior when you customize them.
bootstrap.bundle.min.js; data attributes wire them up with zero custom JavaScript.active slide, and data-bs-ride plus data-bs-interval control autoplay.data-bs-parent for exclusive open behavior and .accordion-flush for an edge-to-edge look..offcanvas-* classes turn sidebars into drawers.In the final lesson you will customize Bootstrap itself with Sass variables and assemble everything into a complete landing page.