Prev Next

BS5 Modal

Bootstrap 5 Modal is a dialog box or popup window for displaying content, such as forms, alerts, or additional information.

Key Topics

Basic Modal

Create a modal using the .modal class with a button to trigger it.

<!-- Trigger Button -->
<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">
                Modal content goes 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 changes</button>
            </div>
        </div>
    </div>
</div>

Explanation: Use the .modal class to create a modal container, and the data-bs-toggle and data-bs-target attributes to link a button to the modal.

Make a modal scrollable by adding the .modal-dialog-scrollable class.

<div class="modal fade" id="scrollableModal" tabindex="-1" aria-labelledby="scrollableModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="scrollableModalLabel">Scrollable Modal</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Long content goes here to make the modal scrollable.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Explanation: Adding the .modal-dialog-scrollable class makes the modal body scrollable for large content.

Include a form inside a modal for user input.

<div class="modal fade" id="formModal" tabindex="-1" aria-labelledby="formModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="formModalLabel">Modal Form</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="exampleInputEmail1" class="form-label">Email address</label>
                        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                    </div>
                    <div class="mb-3">
                        <label for="exampleInputPassword1" class="form-label">Password</label>
                        <input type="password" class="form-control" id="exampleInputPassword1">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>

Explanation: Forms can be included in the modal body for collecting user input.

Complete Modal Example

This example combines basic, scrollable, and form modals into one cohesive layout.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Modal Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-4">
        <h2>Bootstrap Modal</h2>
        <!-- Buttons to Trigger Modals -->
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
            Launch Basic Modal
        </button>
        <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#scrollableModal">
            Launch Scrollable Modal
        </button>
        <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#formModal">
            Launch Form Modal
        </button>

        <!-- Modals Here -->
        <!-- Basic Modal Code -->
        <!-- Scrollable Modal Code -->
        <!-- Form Modal Code -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: This layout integrates all modal variations, showcasing Bootstrap's flexibility.

Key Takeaways

  • Use .modal for creating modals and data-bs-toggle for triggering them.
  • Add .modal-dialog-scrollable for scrollable modals.
  • Include forms inside modals for user interaction.
Prev Next