21 Bootstrap Modal Options To Use In Your Website

Every web application needs a way to grab user attention without leaving the page.

Bootstrap modal examples show you exactly how to create dialog boxes, popups, and overlay components that work across all devices.

Modals handle everything from login forms to confirmation dialogs to video embeds. They’re one of the most used Bootstrap components in frontend development.

This guide covers modal sizes, positioning, content types, JavaScript methods, and accessibility requirements.

You’ll find working code for each example. Copy, paste, customize.

What is a Bootstrap Modal

A Bootstrap modal is a dialog box component that displays content in a layer above the main page.

It creates focused interactions for user notifications, forms, confirmations, and custom content without navigating away from the current view.

Modals are built with HTML, CSS, and JavaScript.

They use position: fixed and sit above everything else in the document.

The backdrop overlay dims the background content, drawing user attention to the modal dialog.

Bootstrap only supports one modal window at a time. Nested modals create poor user experiences.

Bootstrap Modal Examples

Splash the Sale!

Grab that Bootstrap Modal Deal!

Keep it Simple with Bootstrap Modal

Push it Real Good with Bootstrap 4

Focus, Please! Autofocus Bootstrap Modal Window

Pop Goes the Bootstrap Modal!

Alert, Alert!

Get Fancy with Responsive Bootstrap Modal and Popup

Push ‘Em with Modal Push

Light Up the Screen with Video Bootstrap Modal Popup

Quick Login Box in a Snap

Simplicity in Centered Processing Modal

Modal V06: Unleash the Pop-Up Power

Snag this Coupon with BOOTSTRAP MODAL V04

A Double Feature with Multiple Bootstrap Modals

Smile, You’ve Got a Bootstrap 4 Success Modal with Emoji

Drag and Drop Fun with Bootstrap Draggable Modal Window

Embrace the Immortality: Bootstrap Carousel Meets Modal

Say It with Style: Bootstrap Modal Confirmation Message

Go Big with Fullscreen Bootstrap Modal

Play Around with Bootstrap 4 Nifty Modal Dialog Effects

How Does a Bootstrap Modal Work

Bootstrap modals rely on data attributes and JavaScript methods for control.

The data-bs-toggle="modal" attribute on a trigger button tells Bootstrap to open a modal.

The data-bs-target attribute points to the modal’s ID selector.

When triggered, the modal instance fires through an event lifecycle: show, shown, hide, hidden.

Event listeners let you run custom code at each stage.

The JavaScript API provides methods like show(), hide(), and dispose() for programmatic control.

DOM positioning matters. Place modal markup near the closing </body> tag to avoid z-index conflicts.

What Are the Required Files for Bootstrap Modal

Bootstrap modals need specific files to function correctly.

Required dependencies:

• Bootstrap CSS file (styling and animations)
• Bootstrap JavaScript bundle (includes Popper.js)

Load via CDN for quick setup:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

The bundle version includes Popper.js for positioning. No separate Popper file needed.

For production, consider local files over CDN for better performance control.

What is the Basic Bootstrap Modal Structure

Every modal component follows a specific HTML structure with nested containers.

<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">
Modal body content here.
</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</button>
</div>
</div>
</div>
</div>

Structure breakdown:

• .modal – outer container with fade animation class
• .modal-dialog – positions and sizes the modal
• .modal-content – holds header, body, footer sections
• .modal-header – title and close button
• .modal-body – main content area (required for padding)
• .modal-footer – action buttons (optional)

The tabindex="-1" removes the modal from tab order when hidden.

ARIA attributes like aria-labelledby and aria-hidden handle accessibility requirements.

Bootstrap Modal Size Examples

Bootstrap provides modifier classes to control modal size through the .modal-dialog element.

Sizes respond to viewport breakpoints, preventing horizontal scrollbars on narrow screens.

What is a Small Bootstrap Modal

Add modal-sm to .modal-dialog for a 300px max-width modal.

Best for confirmations, simple alerts, quick user notifications.

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

What is a Large Bootstrap Modal

The modal-lg class sets max-width to 800px.

Works well for forms, detailed content, multi-step wizards.

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

What is an Extra Large Bootstrap Modal

Use modal-xl for 1140px max-width.

Suited for data tables, complex layouts, dashboard views.

<div class="modal-dialog modal-xl">
<div class="modal-content">
<!-- content -->
</div>
</div>

What is a Fullscreen Bootstrap Modal

The modal-fullscreen class covers the entire viewport.

Responsive variants available:

• modal-fullscreen-sm-down – fullscreen below 576px
• modal-fullscreen-md-down – fullscreen below 768px
• modal-fullscreen-lg-down – fullscreen below 992px
• modal-fullscreen-xl-down – fullscreen below 1200px

<div class="modal-dialog modal-fullscreen-md-down">
<div class="modal-content">
<!-- content -->
</div>
</div>

Mobile users get fullscreen. Desktop users see standard modal sizing.

Bootstrap Modal Position Examples

Modal positioning controls where the dialog appears on screen.

Default placement sits near the top of the viewport with margin spacing.

How to Center a Bootstrap Modal Vertically

Add modal-dialog-centered to the .modal-dialog element.

<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<!-- content -->
</div>
</div>

Centers the modal both vertically and horizontally within the viewport.

How to Create a Side Modal in Bootstrap

Side modals require custom CSS since Bootstrap lacks built-in classes.

.modal-dialog-side {
position: fixed;
margin: 0;
width: 300px;
height: 100%;
right: 0;
top: 0;
}
.modal-dialog-side .modal-content {
height: 100%;
border-radius: 0;
}

Apply the custom class alongside .modal-dialog for a sidebar-style panel.

Bootstrap Modal Content Examples

The modal body accepts any HTML content: forms, images, videos, tables, or custom components.

How to Create a Bootstrap Modal with a Form

Place form elements inside .modal-body and handle submission via JavaScript or server-side processing.

Use Bootstrap input classes for consistent styling.

Bootstrap Login Modal Example

<div class="modal-body">
<form>
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Password</label>
<input type="password" class="form-control">
</div>
<button type="submit" class="btn btn-primary w-100">Sign In</button>
</form>
</div>

Check out dedicated Bootstrap login form examples for more patterns.

Bootstrap Registration Modal Example

<div class="modal-body">
<form>
<div class="row mb-3">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>
<div class="mb-3">
<input type="email" class="form-control" placeholder="Email">
</div>
<div class="mb-3">
<input type="password" class="form-control" placeholder="Password">
</div>
<button type="submit" class="btn btn-success w-100">Register</button>
</form>
</div>

Bootstrap Contact Form Modal Example

<div class="modal-body">
<form>
<div class="mb-3">
<input type="text" class="form-control" placeholder="Your Name">
</div>
<div class="mb-3">
<input type="email" class="form-control" placeholder="Your Email">
</div>
<div class="mb-3">
<textarea class="form-control" rows="4" placeholder="Message"></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Message</button>
</form>
</div>

See more Bootstrap contact form templates for advanced layouts.

How to Create a Bootstrap Modal with an Image

Use .img-fluid for responsive images inside the modal body.

<div class="modal-body p-0">
<img src="image.jpg" class="img-fluid" alt="Gallery image">
</div>

Remove padding with p-0 for edge-to-edge images. Works great for image galleries with lightbox functionality.

How to Create a Bootstrap Modal with a Video

Embed YouTube or HTML5 video using responsive ratio wrappers.

<div class="modal-body">
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/VIDEO_ID" allowfullscreen></iframe>
</div>
</div>

Stop video playback on modal close with event handling:

myModal.addEventListener('hidden.bs.modal', function () {
const iframe = this.querySelector('iframe');
iframe.src = iframe.src; // Resets and stops video
});

How to Create a Bootstrap Modal with a Table

Combine modal-dialog-scrollable with responsive table classes for data-heavy modals.

<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-body">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr><th>ID</th><th>Name</th><th>Status</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>Item One</td><td>Active</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>

Bootstrap Modal Behavior Examples

Control how users interact with and dismiss the modal dialog.

How to Create a Static Backdrop Modal in Bootstrap

Prevent closing when clicking outside with data-bs-backdrop="static".

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

Users must click a button to close. Good for mandatory confirmations.

How to Disable Modal Close on Escape Key

Add data-bs-keyboard="false" to the modal element.

<div class="modal fade" data-bs-keyboard="false">

Combine with static backdrop for maximum control over dismissal.

How to Create a Scrollable Bootstrap Modal

The modal-dialog-scrollable class adds a scrollbar to .modal-body when content exceeds viewport height.

<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-body">
<!-- Long content here -->
</div>
</div>
</div>

Header and footer stay fixed while body scrolls.

Bootstrap Modal Animation Examples

The .fade class controls the modal’s entrance and exit animation effects.

How to Create a Bootstrap Modal Without Animation

Remove the fade class for instant show/hide.

<div class="modal" tabindex="-1">
<!-- No fade class = no animation -->
</div>

Useful when usability requires immediate feedback.

How to Create a Slide-in Bootstrap Modal

Custom CSS keyframes create slide animations.

.modal.slide-right .modal-dialog {
transform: translateX(100%);
transition: transform 0.3s ease-out;
}
.modal.slide-right.show .modal-dialog {
transform: translateX(0);
}

Replace fade with your custom animation class.

Bootstrap Modal JavaScript Examples

The JavaScript API provides programmatic control over modal instances.

How to Open a Bootstrap Modal with JavaScript

Create a modal instance and call the show() method.

const myModal = new bootstrap.Modal(document.getElementById('myModal'));
myModal.show();

Works without trigger buttons for dynamic content loading.

How to Close a Bootstrap Modal with JavaScript

Use hide() to close or dispose() to destroy the instance.

myModal.hide(); // Closes modal
myModal.dispose(); // Removes instance completely

How to Pass Data to a Bootstrap Modal

Use relatedTarget and data attributes to transfer information from trigger to modal.

<button data-bs-toggle="modal" data-bs-target="#userModal" data-bs-user="John">
Open for John
</button>

const userModal = document.getElementById('userModal');
userModal.addEventListener('show.bs.modal', function (event) {
const button = event.relatedTarget;
const userName = button.getAttribute('data-bs-user');
this.querySelector('.modal-title').textContent = 'Hello, ' + userName;
});

Dynamic content without separate modals for each item.

How to Handle Bootstrap Modal Events

Four events fire during the modal lifecycle:

• show.bs.modal – fires immediately when show is called
• shown.bs.modal – fires after animation completes
• hide.bs.modal – fires immediately when hide is called
• hidden.bs.modal – fires after modal is hidden

myModal.addEventListener('shown.bs.modal', function () {
document.getElementById('inputField').focus();
});

Handle form resets, Ajax loading, or cleanup in these event callbacks.

Bootstrap Modal Accessibility Requirements

Proper accessibility ensures keyboard and screen reader users can interact with modals.

Required attributes:

• aria-labelledby – references the modal title ID
• aria-describedby – references description content (optional)
• aria-hidden="true" – hides closed modals from assistive tech
• tabindex="-1" – removes from tab order when hidden

Bootstrap handles focus management automatically. Focus moves into the modal on open and returns to the trigger on close.

Keyboard navigation works out of the box: Tab cycles through focusable elements, Escape closes the modal.

Follow the accessibility checklist and ensure proper color contrast in modal content.

Bootstrap Modal Troubleshooting

Common issues and fixes for modal component problems.

Why is My Bootstrap Modal Not Opening

Common causes:

• Missing Bootstrap JS bundle
• Incorrect data-bs-target selector (must match modal ID with #)
• JavaScript errors blocking execution
• Modal HTML missing from DOM

Check browser console for errors. Verify the target ID matches exactly.

Why is My Bootstrap Modal Showing Behind Elements

Z-index conflicts cause layering issues.

Solutions:

• Move modal markup outside of position: fixed or position: relative parents
• Place modal HTML just before </body>
• Override z-index if needed: .modal { z-index: 9999; }

Why is My Bootstrap Modal Not Closing

Usually caused by event conflicts or JavaScript errors.

Check for:

• Missing data-bs-dismiss="modal" on close buttons
• Event listeners calling event.stopPropagation()
• Static backdrop without visible close button
• Multiple Bootstrap versions loaded

Bootstrap Modal Version Differences

Bootstrap 4 and Bootstrap 5 modals share core concepts but differ in implementation details.

Bootstrap 4 Modal vs Bootstrap 5 Modal

Bootstrap 5 removes jQuery dependency entirely. All data attributes use the bs namespace prefix.

Migration requires updating attribute names and JavaScript method calls.

The vanilla JavaScript API in Bootstrap 5 offers better performance and smaller bundle sizes.

FAQ on Bootstrap Modal Examples

How do I create a basic Bootstrap modal?

Add a trigger button with data-bs-toggle="modal" and data-bs-target pointing to your modal ID. Structure the modal with .modal, .modal-dialog, and .modal-content containers. Include header, body, and footer sections inside the content wrapper.

Why is my Bootstrap modal not showing?

Check that Bootstrap’s JavaScript bundle is loaded after the modal markup. Verify the data-bs-target selector matches the modal’s ID exactly, including the hash symbol. Browser console errors often reveal missing dependencies or syntax issues.

How do I center a Bootstrap modal vertically?

Add the modal-dialog-centered class to your .modal-dialog element. This positions the modal in the center of the viewport both vertically and horizontally. Works with all modal sizes including small, large, and extra large variants.

Can I have multiple modals open at once?

Bootstrap supports only one modal at a time by design. Opening a second modal closes the first. For multi-step flows, toggle between modals using JavaScript or update content within a single modal dynamically using asynchronous requests.

How do I pass data to a Bootstrap modal?

Use data-bs-* attributes on trigger buttons and access them via event.relatedTarget in the show.bs.modal event. This lets multiple buttons share one modal while displaying different content based on which button was clicked.

How do I prevent the modal from closing when clicking outside?

Set data-bs-backdrop="static" on the modal element. Add data-bs-keyboard="false" to also prevent closing with the Escape key. Users must then click a button inside the modal to close it.

What is the difference between modal sizes in Bootstrap?

Bootstrap offers four size classes: modal-sm (300px), default (500px), modal-lg (800px), and modal-xl (1140px). The modal-fullscreen class covers the entire screen. Responsive variants like modal-fullscreen-md-down adapt to breakpoints.

How do I add a form inside a Bootstrap modal?

Place form elements directly inside the .modal-body section. Use Bootstrap checkbox, input, and select components for consistent styling. Handle form submission with JavaScript to prevent page reload and process data via API calls.

How do I stop a video when closing a Bootstrap modal?

Listen for the hidden.bs.modal event and reset the iframe source. Setting iframe.src = iframe.src stops YouTube playback. For HTML5 video elements, call the pause() method and optionally reset currentTime to zero.

Are Bootstrap modals accessible for screen readers?

Yes, when properly implemented. Include aria-labelledby referencing the title and aria-hidden="true" when closed. Bootstrap handles focus trapping automatically. Keyboard users can navigate with Tab and close with Escape for full inclusive design compliance.

Conclusion

These Bootstrap modal examples give you the foundation to build any popup window your project needs.

You now know how to control modal sizes, handle event listeners, pass dynamic data, and meet accessibility standards.

The modal component works with other UI elements like Bootstrap dropdown menus, tabs, and carousels to create complete user interfaces.

Start with the basic structure. Add customizations as your requirements grow.

Test on mobile devices. Check keyboard navigation. Validate your ARIA attributes.

The code snippets here are ready for production. Grab what you need and build something useful.