bootstrap
  1. bootstrap-modal
PreviousNext

Bootstrap Modal

  • Bootstrap Modal is a pop-up window that is displayed on top of the web content.
  • It is used to display information or to get user input.

Syntax

To create a Bootstrap Modal, you need to use the following syntax:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Example

Here is an example of how to create a Bootstrap Modal.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo 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">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </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>
Try Playground

Sizes

Modals have three optional sizes, available via modifier classes to be placed on a .modal-dialog. 

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalfull">
    Fullscreen modal
</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalxl">
    Extra large modal
</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModallg">
    Large modal
</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalsm">
    Small modal
</button>

<!-- Modal Fullscreen -->
<div class="modal fade" id="exampleModalfull" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen">
        ...
    </div>
</div>
<!-- Modal Fullscreen -->
<div class="modal fade" id="exampleModalxl" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        ...
    </div>
</div>
<!-- Modal Fullscreen -->
<div class="modal fade" id="exampleModallg" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        ...
    </div>
</div>
<!-- Modal Fullscreen -->
<div class="modal fade" id="exampleModalsm" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        ...
    </div>
</div>
Try Playground

Explanation

The code above uses the following classes to create a Bootstrap Modal:

  • data-toggle="modal": This attribute tells Bootstrap that the element opens a modal window.
  • data-target="#exampleModal": This attribute specifies which modal window to open.
  • modal: This class specifies that the target element is a modal window.
  • fade: This class adds a transition effect when the modal window is displayed or hidden.
  • modal-dialog: This class specifies the size of the modal window.
  • modal-content: This class adds padding and background color to the modal window.
  • modal-header: This class adds a header section to the modal window.
  • modal-title: This class adds a title to the modal window header.
  • modal-body: This class adds a body section to the modal window.
  • modal-footer: This class adds a footer section to the modal window.

Use

Bootstrap Modal can be used to create pop-up windows that display information, forms, or images. It is also commonly used to display messages to the user, such as warning messages or confirmations.

Important Points

  • Bootstrap Modal is a pop-up window that is displayed on top of the web content.
  • Bootstrap Modal can be used to display information or get user input.
  • Bootstrap Modal can be customized with a range of options, such as size, animation, and button labels.

Summary

Bootstrap Modal is a useful tool for creating pop-up windows that display information or gather user input. With its flexible options and customization possibilities, Bootstrap Modal is an essential component of web development with Bootstrap.

SpinnersAccordion
Published on: