Bootstrap Modals

A Modal is a dialog window displayed above the main page content.

Modals are commonly used for:

• Login forms.
• Registration forms.
• Confirmation messages.
• Delete confirmations.
• Student details.
• Payment information.
• Important notifications.

A Bootstrap Modal generally contains the following structure:

• .modal – main modal container.
• .modal-dialog – modal dialog wrapper.
• .modal-content – visible modal content.
• .modal-header – modal heading area.
• .modal-body – main content area.
• .modal-footer – action area.

<div class="modal">

    <div class="modal-dialog">

        <div class="modal-content">

            ...

        </div>

    </div>

</div>

The .modal class creates the main Modal component.

<div
class="modal fade"
id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true">

    ...

</div>

The id is used to connect the Modal with its trigger.

The .modal-dialog class creates the dialog wrapper inside the Modal.

<div class="modal">

    <div class="modal-dialog">

        ...

    </div>

</div>

The dialog controls the positioning and width of the Modal window.

The .modal-content class contains the visible content of the Modal.

<div class="modal-dialog">

    <div class="modal-content">

        Modal content

    </div>

</div>

The content container normally contains the Modal header, body, and footer.

The .modal-header class creates the header section.

<div class="modal-header">

    <h5 class="modal-title">
        Modal Title
    </h5>

</div>

The header usually contains the title and close button.

The .modal-body contains the main content of the Modal.

<div class="modal-body">

    <p>
    This is the main modal content.
    </p>

</div>

Forms, paragraphs, tables, images, and other Bootstrap components can be placed inside the Modal body.

The .modal-footer is normally used for action buttons.

<div class="modal-footer">

    <button
    type="button"
    class="btn btn-secondary">

    Close

    </button>

    <button
    type="button"
    class="btn btn-primary">

    Save

    </button>

</div>

A button can open a Modal using data-bs-toggle="modal" and data-bs-target.

<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModal">

Open Modal

</button>

The data-bs-target attribute specifies which Modal should be opened.

<button
data-bs-toggle="modal"
data-bs-target="#myModal">

Open

</button>

The value #myModal refers to the element whose id is myModal.

The data-bs-dismiss="modal" attribute closes the current Modal.

<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal">

Close

</button>

It is commonly used with Close and Cancel buttons.

Bootstrap provides the .btn-close class for creating a close button.

<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close">

</button>

The aria-label provides an accessible name for the icon-only close button.

The .fade class adds a fade transition to the Modal.

<div
class="modal fade"
id="myModal">

    ...

</div>

The fade effect is commonly used in Bootstrap Modal examples.

The .fade class is optional. A Modal can also be displayed without the fade transition.

<div
class="modal"
id="myModal"
tabindex="-1">

    ...

</div>

Removing .fade removes the fade transition.

Use .modal-lg with .modal-dialog to create a larger Modal.

<div
class="modal-dialog modal-lg">

    <div class="modal-content">

        ...

    </div>

</div>

Large Modals are useful when the Modal needs more horizontal space.

Use .modal-sm for a smaller Modal.

<div
class="modal-dialog modal-sm">

    <div class="modal-content">

        ...

    </div>

</div>

Small Modals are useful for short messages and simple confirmations.

Use .modal-xl for an extra-large Modal.

<div
class="modal-dialog modal-xl">

    <div class="modal-content">

        ...

    </div>

</div>

Extra-large Modals are useful for dashboards, tables, reports, and other content that needs more space.

Use .modal-dialog-centered to vertically center the Modal in the viewport.

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

    <div class="modal-content">

        ...

    </div>

</div>

This is useful for short dialogs and confirmation messages.

Use .modal-dialog-scrollable when the Modal body contains a large amount of content.

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

    <div class="modal-content">

        ...

    </div>

</div>

This keeps the Modal structure usable while allowing the body content to scroll.

Forms can be placed inside Modals. This is useful for login, registration, editing, and data-entry forms.

<div class="modal-body">

    <form>

        <div class="mb-3">

            <label
            class="form-label">

            Name

            </label>

            <input
            type="text"
            class="form-control">

        </div>

        <button
        class="btn btn-primary">

        Save

        </button>

    </form>

</div>

A Login Modal can allow users to sign in without leaving the current page.

<div class="modal-body">

    <form>

        <label
        class="form-label">

        Email

        </label>

        <input
        type="email"
        class="form-control mb-3">

        <label
        class="form-label">

        Password

        </label>

        <input
        type="password"
        class="form-control">

        <button
        class="btn btn-primary mt-3">

        Login

        </button>

    </form>

</div>

A Modal can be used to confirm destructive actions such as deleting a record.

<div class="modal-body">

    <p>
    Are you sure you want to delete this student?
    </p>

</div>

<div class="modal-footer">

    <button
    class="btn btn-secondary"
    data-bs-dismiss="modal">

    Cancel

    </button>

    <button
    class="btn btn-danger">

    Delete

    </button>

</div>

Confirmation Modals help users avoid accidental actions.

Accessibility is important when creating Modal dialogs.

• Use a meaningful Modal title.
• Use aria-labelledby to associate the title.
• Use aria-describedby when appropriate for descriptive content.
• Use aria-hidden as required by the Modal structure.
• Provide an accessible label for icon-only close buttons.
• Make sure important actions are keyboard accessible.

<div
class="modal fade"
id="accessModal"
tabindex="-1"
aria-labelledby="accessModalLabel"
aria-describedby="accessModalDescription"
aria-hidden="true">

    ...

</div>

When a Modal opens, Bootstrap normally displays a backdrop behind the Modal. This visually separates the dialog from the page content.

The backdrop helps users understand that the Modal is currently the active interface layer.

<div
class="modal fade"
id="backdropModal"
tabindex="-1">

    ...

</div>

Bootstrap manages the backdrop automatically when the Modal is opened.

Avoid these common mistakes when working with Bootstrap Modals:

• Forgetting the id of the Modal.
• Using the wrong data-bs-target.
• Forgetting data-bs-toggle="modal".
• Forgetting the Bootstrap JavaScript bundle.
• Using too much content inside a small Modal.
• Forgetting a close mechanism.
• Ignoring keyboard accessibility.
• Using unclear confirmation messages.
• Putting essential information only inside a Modal.

A Modal can also be controlled directly with JavaScript.

const modalElement =
document.getElementById('myModal');

const modal =
new bootstrap.Modal(
modalElement
);

modal.show();

The show() method opens the Modal.

A Modal can be closed using the hide() method.

const modalElement =
document.getElementById('myModal');

const modal =
bootstrap.Modal.getInstance(
modalElement
);

modal.hide();

The hide() method closes an already initialized Modal.

Bootstrap Modals provide JavaScript events that can be used to respond to different stages of the Modal lifecycle.

Some useful events include:

• show.bs.modal
• shown.bs.modal
• hide.bs.modal
• hidden.bs.modal

const modal =
document.getElementById('myModal');

modal.addEventListener(
'shown.bs.modal',
function(){

    console.log(
    'Modal is now visible'
    );

});

A student management system can use a Modal to display student details.

<button
class="btn btn-info"
data-bs-toggle="modal"
data-bs-target="#studentModal">

View Student

</button>

<div
class="modal fade"
id="studentModal"
tabindex="-1"
aria-labelledby="studentModalLabel"
aria-hidden="true">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <h5
                class="modal-title"
                id="studentModalLabel">

                Student Details

                </h5>

                <button
                type="button"
                class="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close">

                </button>

            </div>

            <div class="modal-body">

                Name: Rahul Kumar
                <br>
                Course: Python
                <br>
                Status: Active

            </div>

        </div>

    </div>

</div>

This complete example demonstrates a Modal with a header, body, footer, close button, and form.

<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#registrationModal">

Register Student

</button>


<div
class="modal fade"
id="registrationModal"
tabindex="-1"
aria-labelledby="registrationModalLabel"
aria-hidden="true">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <h5
                class="modal-title"
                id="registrationModalLabel">

                Student Registration

                </h5>

                <button
                type="button"
                class="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close">

                </button>

            </div>


            <div class="modal-body">

                <form>

                    <div class="mb-3">

                        <label
                        class="form-label">

                        Student Name

                        </label>

                        <input
                        type="text"
                        class="form-control"
                        placeholder="Enter name">

                    </div>


                    <div class="mb-3">

                        <label
                        class="form-label">

                        Mobile Number

                        </label>

                        <input
                        type="tel"
                        class="form-control"
                        placeholder="Enter mobile number">

                    </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-primary">

                Register

                </button>

            </div>

        </div>

    </div>

</div>