Bootstrap Modals, Carousels & Accordions — Interactive Components

Bootstrap's JavaScript-powered components add interactivity and engagement to your websites. Modals create popup dialogs, Carousels build image sliders, and Accordions organize content into expandable sections. These components require Bootstrap's JavaScript bundle to function.

1. Bootstrap Modals

Modals are lightweight dialog boxes that appear on top of the page. They're perfect for confirmations, forms, alerts, or any content you want to show without navigating away.

Basic Modal Structure

<!-- Button to trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch Modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                This is the modal body content.
            </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 changes</button>
            </div>
        </div>
    </div>
</div>

Modal Sizes

Use .modal-sm, .modal-lg, or .modal-xl on .modal-dialog to control modal width.

<!-- Small modal -->
<div class="modal-dialog modal-sm">...</div>

<!-- Large modal -->
<div class="modal-dialog modal-lg">...</div>

<!-- Extra large modal -->
<div class="modal-dialog modal-xl">...</div>

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen">...</div>

Modal with Scrollable Content

<div class="modal-dialog modal-dialog-scrollable">...</div>

Vertically Centered Modal

<div class="modal-dialog modal-dialog-centered">...</div>

Static Backdrop (Click outside doesn't close)

<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" ...>...</div>

Modal with Form

<div class="modal fade" id="formModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Contact Us</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <label for="name" class="form-label">Name</label>
                        <input type="text" class="form-control" id="name">
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label">Email</label>
                        <input type="email" class="form-control" id="email">
                    </div>
                    <div class="mb-3">
                        <label for="message" class="form-label">Message</label>
                        <textarea class="form-control" id="message" rows="3"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">Send Message</button>
            </div>
        </div>
    </div>
</div>

Multiple Modals

You can stack modals, but only one can be open at a time. Avoid nesting modals for better UX.

2. Bootstrap Carousel

The Carousel is a slideshow component for cycling through images, text, or custom content. It supports indicators, controls, and autoplay.

Basic Carousel Structure

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
    <!-- Indicators -->
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2"></button>
    </div>

    <!-- Slides -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="slide1.jpg" class="d-block w-100" alt="Slide 1">
            <div class="carousel-caption d-none d-md-block">
                <h5>First Slide</h5>
                <p>Some description for the first slide.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="slide2.jpg" class="d-block w-100" alt="Slide 2">
            <div class="carousel-caption d-none d-md-block">
                <h5>Second Slide</h5>
                <p>Some description for the second slide.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="slide3.jpg" class="d-block w-100" alt="Slide 3">
            <div class="carousel-caption d-none d-md-block">
                <h5>Third Slide</h5>
                <p>Some description for the third slide.</p>
            </div>
        </div>
    </div>

    <!-- Controls -->
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

Carousel with Text Captions

Add captions using .carousel-caption inside any slide. Captions can be positioned with utility classes.

<div class="carousel-item">
    <img src="image.jpg" class="d-block w-100" alt="...">
    <div class="carousel-caption d-none d-md-block">
        <h5>Slide Title</h5>
        <p>Slide description text.</p>
    </div>
</div>

Carousel with Dark Controls & Indicators

Use .carousel-dark for white backgrounds and dark controls.

<div id="carouselDark" class="carousel carousel-dark slide">
    <!-- Slides with dark captions -->
    <div class="carousel-caption d-none d-md-block">
        <h5 class="text-dark">Dark Theme Slide</h5>
        <p class="text-dark">Content for dark theme.</p>
    </div>
</div>

Carousel with Fade Effect

Add .carousel-fade to replace the slide transition with a fade effect.

<div id="carouselFade" class="carousel slide carousel-fade" data-bs-ride="carousel">...</div>

Autoplay & Interval Settings

Use data-bs-interval to control slide timing (in milliseconds).

<!-- Slides change every 2 seconds -->
<div id="carouselFast" class="carousel slide" data-bs-ride="carousel" data-bs-interval="2000">...</div>

<!-- Disable autoplay -->
<div id="carouselManual" class="carousel slide" data-bs-ride="false">...</div>

Carousel with Multiple Items

Use grid classes inside carousel items to show multiple items per slide.

<div class="carousel-item active">
    <div class="row">
        <div class="col-4">Item 1</div>
        <div class="col-4">Item 2</div>
        <div class="col-4">Item 3</div>
    </div>
</div>

3. Bootstrap Accordion

The Accordion is a vertically collapsing list of items that can show/hide content. It's perfect for FAQs, documentation, and organizing large amounts of information.

Basic Accordion Structure

<div class="accordion" id="accordionExample">
    <!-- Item 1 -->
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
                Accordion Item #1
            </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                This is the first item's content. It's shown by default.
            </div>
        </div>
    </div>

    <!-- Item 2 -->
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
                Accordion Item #2
            </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                This is the second item's content. It's collapsed by default.
            </div>
        </div>
    </div>

    <!-- Item 3 -->
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree">
                Accordion Item #3
            </button>
        </h2>
        <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                This is the third item's content.
            </div>
        </div>
    </div>
</div>

Accordion with Flush (Borderless)

Add .accordion-flush to remove borders and background.

<div class="accordion accordion-flush" id="accordionFlush">...</div>

Accordion with Custom Icons

You can customize the toggle icon using CSS or by replacing it with your own.

<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCustom">
    <span class="me-2">✅</span> FAQ Item
</button>

Accordion with Multiple Targets

If you remove data-bs-parent, accordion items can be opened independently.

<!-- Remove data-bs-parent to allow multiple open items -->
<div id="collapseOne" class="accordion-collapse collapse show">
    <!-- no data-bs-parent -->
</div>

Putting It All Together

Here's a complete example combining Modals, Carousels, and Accordions in a single page:

<!-- Navbar -->
<nav class="navbar navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="#">Interactive Demo</a>
        <button class="btn btn-outline-light" data-bs-toggle="modal" data-bs-target="#demoModal">
            <i class="fas fa-envelope"></i> Contact
        </button>
    </div>
</nav>

<!-- Carousel -->
<div id="demoCarousel" class="carousel slide mb-4" data-bs-ride="carousel">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#demoCarousel" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#demoCarousel" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#demoCarousel" data-bs-slide-to="2"></button>
    </div>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <div class="bg-primary text-white text-center p-5" style="height: 300px;">
                <h2>Welcome to Our Site</h2>
                <p>Discover amazing content with Bootstrap.</p>
            </div>
        </div>
        <div class="carousel-item">
            <div class="bg-success text-white text-center p-5" style="height: 300px;">
                <h2>Featured Products</h2>
                <p>Browse our latest collection.</p>
            </div>
        </div>
        <div class="carousel-item">
            <div class="bg-info text-white text-center p-5" style="height: 300px;">
                <h2>Special Offers</h2>
                <p>Limited time deals available.</p>
            </div>
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#demoCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#demoCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </button>
</div>

<!-- Content with Accordion -->
<div class="container">
    <h3>Frequently Asked Questions</h3>
    <div class="accordion" id="faqAccordion">
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
                    What is Bootstrap?
                </button>
            </h2>
            <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                <div class="accordion-body">
                    Bootstrap is a frontend framework for building responsive, mobile-first websites.
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
                    How do I use Modals?
                </button>
            </h2>
            <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                <div class="accordion-body">
                    Modals are triggered by buttons using data attributes: data-bs-toggle="modal".
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
                    Are Carousels responsive?
                </button>
            </h2>
            <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                <div class="accordion-body">
                    Yes! Carousels are fully responsive and work on all screen sizes.
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="demoModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title">Contact Us</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <label class="form-label">Name</label>
                        <input type="text" class="form-control" placeholder="Your name">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Email</label>
                        <input type="email" class="form-control" placeholder="Your email">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Message</label>
                        <textarea class="form-control" rows="3" placeholder="Your message"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">Send</button>
            </div>
        </div>
    </div>
</div>