Bootstrap Modal Tooltip Popover Carousel

Bootstrap Day 5: Modal, Tooltip, Popover, Carousel and Progress Bar

Niotechone Marketing Team
November 29, 2025
10:30 am

Introduction

Welcome to Day 5 of your Bootstrap journey!

Today, we will explore some of the most interactive and visually interesting components Bootstrap 5 has to offer. If you’ve been building static layouts up until this point, you’re in for a treat! Today we will bring your web pages to life with modals (which are popup dialogs), tooltips (helpful messages that display when a user hovers over an element), popovers (information about an element that are shown after a click), carousels (image sliders), and progress bars (a visual indication of completion and progress).

These components are the building blocks of modern, user-friendly websites. Whether you’re developing a contact form popup, a portfolio gallery, or some other type of loading state, utilizing these components will really demonstrate your web development skills. We will break everything down step-by-step so that you not only understand what the component does, but also why you would want to use it and when to use each component.

Why Are These Components Important?

Modals: Are great for forms, alerts, or confirmations allowing the user to not leave the current page.
Tooltips: Give hints with quick views on hovering while not filling your interface with text.
Popovers: Provide the extra information on-demand.
Carousels: Display multiple images or content dynamically and space saving.
Progress Bars: Provide visual feedback to the user on loading, completing or making progress on something.

These components greatly improve user experience (UX) and can often be found in professional websites, so let’s dive in!

Requirements

Before we start, ensure you have:

Basic understanding of HTML: Familiarity with tags, attributes, and structure.
Bootstrap 5 CDN: We will include this in our HTML (don’t worry, I will show you how).
A text editor: VS Code, Sublime Text or Notepad++ will all work fine.
A web browser: Chrome, Firefox, or any modern browser will work to test your code.

Step-by-Step Tutorial

Step 1: Setting Up Your HTML File

Let’s get going with the basic structure and connection to Bootstrap 5.

🌐




    
    
    <title>Bootstrap 5 Interactive Components</title>
    
    <!-- Bootstrap 5 CSS CDN -->
    


    
    <!-- Our components will go here -->
    
    <!-- Bootstrap 5 JS Bundle (includes Popper.js) -->

What’s Happening Here?

<link> tag: Loads Bootstrap’s CSS from a CDN (Content Delivery Network), so you don’t need to download files.
<script> tag: Loads Bootstrap’s JavaScript at the bottom of the page. This is crucial for interactive components like modals and carousels.
class=”p-4″: Adds padding around the body content (Bootstrap utility class).

Pro Tip: Always place the JavaScript <script> tag just before the closing </body> tag. This ensures the HTML loads first, improving page performance.

Step 2: Creating a Modal with a Form

A modal is a dialog box that pops up above your current page. It is great for forms, confirmations, and alerts.

Code:

🌐

<!-- Button to trigger modal -->
<h2>Modal with Form</h2>
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#formModal">
    Open Form Modal
</button>

<!-- Modal Structure -->
<div class="modal fade" id="formModal">
    <div class="modal-dialog">
        <div class="modal-content">
            
            <!-- Modal Header -->
            <div class="modal-header">
                <h5 class="modal-title">Contact Form</h5>
                <button class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            
            <!-- Modal Body -->
            <div class="modal-body">
                
                    <div class="mb-3">
                        <label for="email" class="form-label">Email</label>
                        
                    </div>
                    <div class="mb-3">
                        <label for="message" class="form-label">Message</label>
                        <textarea class="form-control" id="message" rows="3"></textarea>
                    </div>
                
            </div>
            
            <!-- Modal Footer -->
            <div class="modal-footer">
                <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button class="btn btn-success">Send</button>
            </div>
            
        </div>
    </div>
</div>

Explanation:

The Trigger Button:

data-bs-toggle=”modal”: Tells Bootstrap that this button will trigger a modal.
data-bs-target=”#formModal”: Specifies which one to open (by id).

The Modal Structure:

class=”modal fade”: Creates the modal with a fade-in animation.
id= “formModal”: Unique identifier to match the button that targets it.
tabindex=”-1″: Ensures that the tabbing works correctly.

Modal Sections:

Header: Holds the title and close button (btn-close).
Body: Contains your content (in this case a contact form).
Footer: Action buttons (Close and Send).

Form Elements:

mb-3: Margin-bottom utility (adds space between fields).
form-control: Bootstrap class that gives style to inputs.
form-label: Styles the label text.

A common mistake is to not include the Bootstrap JS bundle, which will make your modal not work. Always remember to include the <script> tag.

Step 3: Adding Tooltips

Tooltips are concise pop-up messages that display when the user hovers over an element. They serve a nice purpose of presenting hints while keeping your UI neat.

Code:

🌐

<h2>Tooltip</h2>
<button class="btn btn-info me-2" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
    Hover me
</button>
<button class="btn btn-info" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
    Hover me too
</button>

<!-- Tooltip Initialization Script -->

    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => new bootstrap.Tooltip(el));

Explanation:

HTML Attributes:

data-bs-toggle=”tooltip”: Indicates that this element has a tooltip for Bootstrap to recognize.
data-bs-placement=”top”: Specifies the position where the tooltip is displayed (top, right, bottom, left).
title=”…”: The text to be displayed in the tooltip.

Javascript Initialization: Tooltips need to be manually initialized with JS. Here’s how it works:

querySelectorAll(‘[data-bs-toggle=”tooltip”]’): will locate all elements that have a tooltip attribute inside.
forEach(el => new bootstrap.Tooltip(el)): will create a Tooltip Object for each of the elements.

Just note that without this JS initialization, the tooltips will not work! This is because Bootstrap will need to create them and position them dynamically.

Step 4: Creating Popovers

Popovers display similarly to tooltips, but they can contain more content including titles and body text. Instead of displaying on hover, they display on click.

Code:

🌐

<h2>Popover</h2>
<button class="btn btn-warning" data-bs-toggle="popover" title="Popover Title" data-bs-content="This is extra info in a popover.">
    Click for Popover
</button>

<!-- Popover Initialization Script -->

    document.queryS

Explanation:

HTML Attributes:

data-bs-toggle=”popover”: Enables popover interaction.
title=”…”: The title of the popover.
data-bs-content=”…”: The body of the popover.

Key Differences compared to tooltips:

Popovers are automatically activated upon click.
They can have additional content (title + body).
Popovers are larger and more visible.

Pro Tip: Use tooltips for short text for hints and popovers for longer text, or cases where you need a title + description.

Step 5: Building an Image Carousel

A carousel (or slider) allows you to display multiple images or content in a rotating slideshow format. Great for portfolios, testimonials, or product display.

Code:

🌐

<h2>Image Carousel</h2>
<div id="myCarousel" class="carousel slide w-50 mx-auto" data-bs-ride="carousel">
    
    <!-- Carousel Indicators -->
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2"></button>
    </div>
    
    <!-- Carousel Items -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="images/mountainskies.jpg" class="d-block w-100" alt="Slide 1">
            <div class="carousel-caption d-none d-md-block">
                <h5 style="color: yellow">Mountain Skies</h5>
                <p>Beautiful mountain landscape.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="images/paris.jpg" class="d-block w-100" alt="Slide 2">
            <div class="carousel-caption d-none d-md-block">
                <h5 style="color: yellow">Paris</h5>
                <p>The city of lights.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="images/ocean.jpg" class="d-block w-100" alt="Slide 3">
            <div class="carousel-caption d-none d-md-block">
                <h5 style="color: yellow">Ocean</h5>
                <p>Peaceful ocean waves.</p>
            </div>
        </div>
    </div>
    
    <!-- Carousel Controls -->
    <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </button>
</div>

Carousel Structure:

Container: The carousel slide component makes it work as a Bootstrap carousel with a sliding animation.
data-bs-ride=”carousel”: Automatically plays the carousel when the page loads.
w-50 mx-auto: Limits width to 50% and centers the content horizontally.

Indicators (Dots):

carousel-indicators: This will show the dots at the bottom.
data-bs-slide-to=”0″: This links the dots to the first slide (from zero, it is zero-indexed).
class=”active”: Identifies the current slide indicator as active.

Carousel Items:

carousel-inner: The container for all slides.
carousel-item: Refers to each individual slide.
active class: The first slider item must have an active class to display initially.

Carousel Captions:

carousel-caption: This will show the caption overlay on the image.
d-none d-md-block: Do not show the captions on small screens, show on medium and up.

Navigation Controls:

carousel-control-prev/next: The previous/next button to go back or to the next slide.
data-bs-slide=”prev/next”: This will tell the carousel which direction to move.

Pro Tip: You should always set the first carousel item to be active, or nothing will show on the initial display!

Step 6: Creating Progress Bars

Progress bars are an effective means of visually communicating completion, loading states or any other forms of progress that can be measured.

Code:

🌐

<h2>Progress Bar</h2>

<!-- Basic Progress Bar -->
<div class="progress mb-3">
    <div class="progress-bar bg-success" style="width: 70%">70%</div>
</div>

<!-- Animated Striped Progress Bar -->
<div class="progress mb-3">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" style="width: 50%">
        Loading...
    </div>
</div>

<!-- Multiple Progress Bars (Stacked) -->
<div class="progress mb-3">
    <div class="progress-bar bg-info" style="width: 40%"></div>
    <div class="progress-bar bg-warning" style="width: 30%"></div>
</div>

Explanation:

Basic Structure:

progress: The outer container.
progress-bar: The inner colored bar.
style=”width: 70%”: Sets the fill percentage.

Color options include:

bg-success: Green (success).
bg-info: Light blue (information).
bg-warning: Yellow (warning).
bg-danger: Red (danger).

Striped & Animated:

progress-bar-striped: Adds diagonal stripes.
progress-bar-animated: Makes the stripes move (loading effect).

You can stack multiple elements to create a progress-bar, which allows you to segment the progress (for example, showing you have completed different parts of a task-labeled labels on the bar is needed).

Common Uses

File upload
Indicating quiz/test completion
Indicating multi-step forms
Indicator of processing/loading when waiting for a webpage to load.

Components & Keywords Used

Name	Description
modal	A dialog box/popup that overlays the page content
modal-dialog	Container for the modal content, controls sizing
modal-content	Wrapper for header, body, and footer sections
modal-header	Top section with title and close button
modal-body	Main content area of the modal
modal-footer	Bottom section with action buttons
tooltip	Small popup message that appears on hover
popover	Larger popup with title and content, appears on click
carousel	Image/content slider with navigation controls
carousel-item	Individual slide within a carousel
carousel-caption	Text overlay on carousel images
carousel-indicators	Navigation dots for carousel slides
progress	Container for progress bar visualization
progress-bar	Colored bar showing completion percentage
btn-close	Bootstrap’s styled close button (X icon)
fade	CSS class that adds fade-in/out animation
data-bs-toggle	Attribute that activates Bootstrap components
data-bs-target	Specifies which element to control (by ID)
data-bs-placement	Controls tooltip/popover position (top, left, etc.)

Key Properties, Parameters & Features

Name	Description
data-bs-toggle	Activates Bootstrap components (modal, tooltip, popover, etc.)
data-bs-target	ID selector of the element to control or open
data-bs-placement	Position of tooltip/popover (top, right, bottom, left)
data-bs-dismiss	Closes/dismisses a component (e.g., modal)
data-bs-ride	Auto-starts carousel on page load
data-bs-slide	Controls carousel direction (prev/next)
data-bs-slide-to	Jumps to specific carousel slide by index
title	Text content for tooltips or popover headers
data-bs-content	Body content for popovers
tabindex=”-1″	Removes element from normal tab navigation order
mb-3	Margin-bottom spacing utility (3 units)
me-2	Margin-end (right) spacing utility (2 units)
w-50	Width set to 50%
w-100	Width set to 100%
mx-auto	Horizontal centering (auto left/right margins)
d-block	Display as block element
d-none	Hide element completely
d-md-block	Display as block on medium screens and up
progress-bar-striped	Adds striped pattern to progress bar
progress-bar-animated	Animates the striped progress bar
bg-success, bg-info, etc.	Bootstrap background color classes
btn-primary, btn-secondary, etc.	Bootstrap button styling classes

Useful References

Here are some fantastic resources to your knowledge of Bootstrap:

Official Documentation:

Bootstrap 5 Official Documentation – The ultimate reference for all Bootstrap components and features
Bootstrap Modal Documentation – Deep dive into modal options and methods
Bootstrap Carousel Documentation – Advanced carousel features and customization

Learning Resources:

W3Schools Bootstrap 5 Tutorial – Beginner-friendly tutorials with interactive examples
MDN Web Docs – Bootstrap – Comprehensive guide to using Bootstrap

Practice & Challenges:

Frontend Mentor – Real-world projects to practice your Bootstrap skills
CodePen – Explore and experiment with Bootstrap examples from other developers
freeCodeCamp – Free courses on Bootstrap and front-end frameworks

Video Tutorials:

Traversy Media – Bootstrap Crash Course – Excellent video tutorials for visual learners
Net Ninja – Bootstrap Tutorial – Step-by-step Bootstrap series

Design Inspiration:

Bootsnipp – Code snippets and design blocks built with Bootstrap
Start Bootstrap – Free Bootstrap themes and templates

Source code:
https://github.com/niotechoneSoftware/dotnet-developer-roadmap/tree/main/Bootstrap-Essentials/Day%205%20-%20Bootstrap%20-%20Modal%2C%20Tooltip%2C%20Popover%2C%20Carousel%20and%20Progress%20Bar

What You Learned

Today you learned how to use Bootstrap’s interactive components like modals, tooltips, popovers, carousels, and progress bars to make your UI more engaging and user-friendly. You also understood how Bootstrap uses data attributes and simple JavaScript to activate these features.

You practiced creating sliders, animated progress bars, and popup elements, improving your layout and interaction skills. These components help you build modern, dynamic, and professional web pages quickly and efficiently.

OUTPUT:

Let's Work Together

Software Development Services

+91 9925 66 8383

Related Tags

Frequently Asked Questions FAQs

What is the primary function of a Bootstrap modal?

A modal allows the user to view and interact with different types of content such as forms, alerts, or messages without navigating away from the current page.

My Bootstrap project does not show any tooltips; what's the reason?

Tooltips require JavaScript initialization via bootstrap.Tooltip()—if this step is missed, tooltips will not show up at all.

When would you prefer to use a popover rather than a tooltip?

A popover is appropriate when you have larger content requirements such as a title and a detailed text. Tooltips, on the other hand, are intended solely for providing short hints.

What is the purpose of a carousel in Bootstrap?

Carousels are the ones that facilitate the creation of sliding image or content sliders. They are perfect for galleries, portfolios, and product showcases.

In what ways do progress bars enhance UX?

Users can see the progress of loading, completion, or steps visually through the use of progress bars which, in turn, helps them understand the system's status better.

Our Story

Company

Services

Trusted By

Trusted By

Expertise

Trusted By

Trusted By

Let's Discuss - Requirements

Let's Discuss - Requirements

Let's Discuss - Requirements

Technologies

Let’s Discuss – Requirements

Let’s Discuss – Requirements

Let’s Discuss – Requirements

Bootstrap Day 5: Modal, Tooltip, Popover, Carousel and Progress Bar

Table of Contents

Introduction

Why Are These Components Important?

Step-by-Step Tutorial

Step 1: Setting Up Your HTML File

Step 2: Creating a Modal with a Form

Step 3: Adding Tooltips

Step 4: Creating Popovers

Step 5: Building an Image Carousel

Step 6: Creating Progress Bars

Components & Keywords Used

Key Properties, Parameters & Features

Useful References

What You Learned

OUTPUT:

Categories

Related Articles

Bootstrap Day 6: Flexbox Utilities, Responsive Utilities + Z-Index + Order, Tables + Lists + Spinners

Bootstrap Day 4: Building Smart Navigation & Interactive Forms

Bootstrap Day 3: Mastering Buttons, Alerts, Badges, and Cards

Follow Us

Let's Work Together

Related Tags

Frequently Asked Questions FAQs

Services

Our Expertise

Hire Developers

Technologies

Contact For Sales

Contact For Careers

India

Canada