Bootstrap Modal

21 April 2025 | Category: Bootstrap

Bootstrap Tutorial: Create Interactive Modals

In this Bootstrap tutorial, you’ll learn how to use Bootstrap’s Modal classes to create pop-up dialogs for user interaction, perfect for forms, alerts, or content display. We’ll pair modals with images for a vibrant look.

What You’ll Learn

Creating a basic modal
Adding modal sizes
Including modal content
Combining modals with images

Prerequisites

Basic knowledge of HTML
A text editor (e.g., VS Code, Notepad)
A web browser (e.g., Chrome, Firefox)

Step 1: Understand Bootstrap Modals

Bootstrap Modals use the modal class with modal-dialog and modal-content to create pop-up windows that overlay the page. They’re triggered by buttons or links and support headers, bodies, and footers.

Assume Bootstrap CSS and JS are included in your project (we’ll skip the <link> and <script> tags as requested).

Step 2: Create a Basic Modal

Start with a simple modal triggered by a button. Use this code:

<div class="container">
    <h3>Basic Modal</h3>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#basicModal">
        Open Modal
    </button>
    <div class="modal fade" id="basicModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Modal Title</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>This is a simple modal with some content.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

Explanation:

container: Centers and constrains content.
btn btn-primary: Blue button to trigger the modal.
data-bs-toggle="modal" data-bs-target="#basicModal": Links the button to the modal.
modal fade: Creates the modal with a fade animation.
modal-dialog: Centers the modal window.
modal-content: Contains header, body, and footer.
btn-close and data-bs-dismiss="modal": Closes the modal.

Clicking the button opens the modal.

Step 3: Add Modal Sizes

Adjust modal size with modal-lg or modal-sm. Try this:

<div class="container">
    <h3>Large Modal</h3>
    <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#largeModal">
        Open Large Modal
    </button>
    <div class="modal fade" id="largeModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Large Modal</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>This is a larger modal with more space for content.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-success">Save</button>
                </div>
            </div>
        </div>
    </div>
</div>

Explanation:

btn btn-success: Green button to trigger the modal.
modal-lg: Increases the modal width.
modal-content: Includes a header, body, and footer with two buttons.
btn btn-success: Adds a green action button in the footer.

This creates a wider modal for more content.

Step 4: Include Modal Content

Add a form inside a modal for interactivity. Add this:

<div class="container">
    <h3>Modal with Form</h3>
    <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#formModal">
        Open Form Modal
    </button>
    <div class="modal fade" id="formModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Contact Us</h4>
                    <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" placeholder="Enter name">
                        </div>
                        <div class="mb-3">
                            <label for="message" class="form-label">Message</label>
                            <textarea class="form-control" id="message" rows="3" placeholder="Enter message"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-info">Submit</button>
                </div>
            </div>
        </div>
    </div>
</div>

Explanation:

btn btn-info: Cyan button to trigger the modal.
modal-body with form: Contains text input and textarea.
form-control: Styles form inputs.
btn btn-info: Cyan submit button in the footer.

This modal is ideal for contact forms.

Step 5: Combine with an Image

Pair a modal trigger with a dummy image for context. Try this:

<div class="container">
    <div class="row">
        <div class="col-8">
            <h3>Profile Modal</h3>
            <p>View user details.</p>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#profileModal">
                View Profile
            </button>
            <div class="modal fade" id="profileModal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">User Profile</h4>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <p>Name: Jane Doe</p>
                            <p>Email: jane@example.com</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-4">
            <img src="https://placehold.co/200x150/28a745/ffffff" class="img-fluid rounded" alt="Green placeholder">
        </div>
    </div>
</div>

Explanation:

row and col-8, col-4: Splits content into modal trigger (8 units) and image (4 units).
btn btn-primary: Blue button to open the modal.
modal-body: Displays simple profile details.
Uses a 200×150 green image for vibrancy.

The image suggests a user profile context.

Final Code

Here’s a combined example with varied modals and an image:

<div class="container">
    <div class="row mb-3">
        <div class="col-12">
            <h3>Simple Modal</h3>
            <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#simpleModal">
                Open Modal
            </button>
            <div class="modal fade" id="simpleModal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Simple Modal</h4>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <p>This is a basic modal example.</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-12">
            <h3>Form Modal</h3>
            <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#formModal2">
                Open Form Modal
            </button>
            <div class="modal fade" id="formModal2">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Feedback Form</h4>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <form>
                                <div class="mb-3">
                                    <label for="feedbackName" class="form-label">Name</label>
                                    <input type="text" class="form-control" id="feedbackName" placeholder="Enter name">
                                </div>
                                <div class="mb-3">
                                    <label for="feedback" class="form-label">Feedback</label>
                                    <textarea class="form-control" id="feedback" rows="3" placeholder="Enter feedback"></textarea>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-success">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-7">
            <h3>Project Modal</h3>
            <p>View project details.</p>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#projectModal">
                View Project
            </button>
            <div class="modal fade" id="projectModal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Project Details</h4>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <p>Project: Web App</p>
                            <p>Status: In Progress</p>
                        </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">View More</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-5">
            <img src="https://placehold.co/250x150/ff6b6b/ffffff" class="img-fluid rounded" alt="Red placeholder">
        </div>
    </div>
</div>

Output

Your webpage should show:

A simple modal triggered by a gray button with basic content.
A large modal with a form, triggered by a green button.
A project modal with details, triggered by a blue button, beside a red 250×150 image.
All modals are responsive, adjusting for mobile, with colorful images for a vibrant look.

Next Steps

Check the Bootstrap Modal Docs for more options.
Try modal-fullscreen for full-screen modals.
Use data-bs-backdrop="static" to prevent closing on click outside.

Conclusion

You’ve mastered Bootstrap Modals! With classes like modal, modal-dialog, and modal-content, plus striking images, you’ve created interactive pop-up dialogs. Keep experimenting to enhance your webpages.