Bootstrap Modal Plugin

Introduction

In our previous blog, we explored essential UI components such as Bootstrap Input Sizing, Media Objects, and the popular Carousel Plugin. These tools help create responsive forms, media layouts, and engaging image sliders that enhance any website’s user experience.

In this blog, we’re moving forward with more interactive and advanced Bootstrap components. We will learn about the Modal, Tooltip, Popover, and Scrollspy plugins. Each of these plays a key role in building dynamic, user-friendly interfaces. With simple examples and student-friendly explanations, you’ll understand how and when to use each plugin effectively.

Let’s begin learning these essential Bootstrap plugins with Credo Systemz.

1. Bootstrap Modal Plugin

The Modal Plugin
The Bootstrap Modal Plugin allows you to create popups or dialog boxes that can display content such as messages, forms, or images. It is highly customizable and widely used in web applications.

Important Note: Always include data-bs-backdrop="static" and data-bs-keyboard="false" if you want to prevent closing the modal by clicking outside or pressing Esc.

How To Create a Modal

To create a modal in Bootstrap, you need to define an HTML structure and use Bootstrap classes to make it functional.

Example Explained
Below is a simple example of a Bootstrap modal:

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
Open Modal
</button>

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        This is a modal example.
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

The “Trigger” part:

You need to use a button or link to open the modal window.
The button with data-bs-toggle="modal" is used to open the modal when clicked. The button with data-bs-target="#myModal" points to the id of the modal.

The “Modal” part:

This part of the modal is the outer container and must have the class modal. It acts as the shell that holds the modal dialog box.

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    ...
  </div>
</div>

The id="myModal" is used to uniquely identify the modal.
The .modal class highlights and marks the content as a modal.
The class modal fade applies Bootstrap’s fade animation. Remove fade to disable the effect.
modal-dialog positions and sizes the modal.

Important Note: You must provide a unique id for each modal so that Bootstrap can properly target it with the trigger button.

The “Modal content” part:

This section is placed inside the modal-dialog and defines the layout of the modal, split into header, body, and footer sections.

<div class="modal-content">
  <div class="modal-header">
    <h4 class="modal-title">Modal Heading</h4>
    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
  </div>
  <div class="modal-body">
    This is a modal example.
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
  </div>
</div>

modal-header is where the title and close button appear.
modal-body contains the main content like text, images, or videos.
modal-footer holds action buttons and is right-aligned by default.

Modal Size

You can control the modal size using the following classes inside modal-dialog:

.modal-lg for a large modal.
.modal-sm for a small modal.

Important Note: Use appropriate modal size depending on the content. Too large modals may break responsiveness on small devices.

Request more information

Bootstrap Modal Plugin