Category: html_css
Modals, Carousel, Accordion & Offcanvas
Published on 06 Aug 2026
Explanation
Bootstrap Modals are dialog boxes that appear on top of the current page to display additional information, forms, confirmations, or user interactions. Modals require the Bootstrap JavaScript bundle to handle opening and closing actions.
Code:
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Open Modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-explanation">
<div class="modal-header">
<h5 class="modal-title">Bootstrap Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
Welcome to Bootstrap 5!
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Explanation
Bootstrap Carousel is a slideshow component used to display multiple images or explanation with automatic or manual navigation. It supports indicators, captions, and previous/next controls, making it ideal for banners and image galleries.
Code:
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/800x300" class="d-block w-100" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/800x300/cccccc" class="d-block w-100" alt="Slide 2">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
Explanation
Bootstrap Accordion is a collapsible component used to organize large amounts of explanation into expandable sections. It is commonly used for FAQs, documentation, and settings pages.
Code:
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
What is Bootstrap?
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<div class="accordion-body">
Bootstrap is a responsive CSS framework.
</div>
</div>
</div>
</div>
Explanation
Bootstrap Offcanvas creates hidden side panels that slide into view from the left, right, top, or bottom of the screen. Offcanvas is commonly used for mobile navigation menus, filters, and settings panels.
Code:
<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasMenu">
Open Menu
</button>
<div class="offcanvas offcanvas-start" id="offcanvasMenu">
<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 href="#" class="d-block mb-2">Home</a>
<a href="#" class="d-block mb-2">About</a>
<a href="#">Contact</a>
</div>
</div>
Explanation
Bootstrap interactive components such as Modals, Carousel, Accordion, and Offcanvas rely on the Bootstrap JavaScript bundle. Including the bundle enables animations, toggling, sliding, and collapse functionality without writing custom JavaScript.
Code:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>