Bootstrap 5 Pop-up Modals: Cheat Sheet

Feb. 4, 2021, 2:47 p.m.
Bootstrap · 14 min read
Bootstrap 5 Pop-up Modals: Cheat Sheet
Last Modified: Feb. 19, 2021, 3:41 p.m.

Bootstrap recently released version 5.0.0 - beta1.

As of this new version, modals can now be full screen, so it seemed only right to cover the new feature in addition to the modals themselves. 

This article will cover: 

  1. How to use the Bootstrap 5.0.0 - beta1 CDN
  2. Bootstrap 5 modal basics
  3. Bootstrap 5 modal positions
  4. Bootstrap 5 modal sizes
  5. Bootstrap 5 modal static backdrop
  6. Bootstrap 5 modal appearing

 


 

How to use the Bootstrap 5.0.0-beta1 CDN

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

  <title>Bootstrap 5.0.0-beta1 Modal Cheat Sheet</title>

</head>
<body>


  <!-- Option 1: Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>


</body>
</html>

Bootstrap 5.0.0-beta1 CDNs have a Bootstrap CSS and Bootstrap JavaScript bundle that need to be added to use the Bootstrap features. 

 


 

The Basics of Bootstrap 5 Modals

Bootstrap 5 modals are comprised of a header, body, and footer.

 

Bootstrap Header

<div class="modal-header">
  <h5 class="modal-title">Modal title</h5>
  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>

The Bootstrap header contains a close button that dismisses the modal in addition to the modal title. The class attribute value is modal-header

Bootstrap Modal Header

 

Bootstrap Body

<div class="modal-body">
  <p>The modal body is where all fo the text, images, and links go.</p>
</div>

Next, is the Bootstrap body, modal-body. This is a required class attribute because of the padding connected with it. 

Paragraph tags, Bootstrap tooltips, popovers, and the Bootstrap grid system can all be included in the modal body. 

Bootstrap Modal Body

 

Bootstrap Footer

<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</button>
</div>

The Bootstrap footer, assigned using the class attribute value modal-footer, is the last section of the Bootstrap modal.

Buttons can be added to the modal for save and close actions.

All of its content is by default right-aligned given the CSS declaration justify-content:flex-end

Bootstrap Modal Footer

 

Basic Bootstrap 5 Modal

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>The modal body is where all the text, images, and links go.</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">Save changes</button>
      </div>
    </div>
  </div>
</div>

To create the basic modal, you need to start with a modal class attribute value.

Then nest a modal-dialog class attribute value within. Finally, nest a division element with a modal-content class attribute value. 

Now within the modal-content division element, you can add the modal-header, modal-body, and modal-footer

Basic Bootstrap Modal

 


 

Bootstrap 5 Modal Positions

Bootstrap modals have two options for positions: default and vertically centered.

 

Bootstrap 5 Modal Default Position

Bootstrap modal position by default is horizontally centered at the top of the page. 

You do not need to add any extra CSS to have this position for your modal.

Bootstrap modal default position

 

Bootstrap 5 Modal Vertically Centered

<div class="modal">
   <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>The modal body is where all the text, images, and links go.</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">Save changes</button>
        </div>
      </div>
   </div>
</div>

The other option is to vertically center your modal, in addition to it already being horizontally centered. 

Add the class attribute value modal-dialog-centered to the division element already containing the modal-dialog

Bootstrap Modal Vertically Centered

 

Bootstrap 5 Modal independent scroll for long content

  <div class="modal">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
          <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
          <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
          <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
          <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
          <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
          <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
          <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
          <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
          <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
          <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
          <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
          <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
          <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
          <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</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">Save changes</button>
        </div>
      </div>
    </div>
  </div>

If your modal-body has a large amount of content, add modal-dialog-scrollable to the class attribute value containing modal-dialog

Bootstrap Modal Scrollable Content

 


 

Bootstrap 5 Modal Sizes

Bootstrap modals have 6 default sizes: small, medium (default), large, extra-large, and full screen.

 

Small Bootstrap 5 Modal

<div class="modal">
   <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>The modal body is where all the text, images, and links go.</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">Save changes</button>
        </div>
      </div>
   </div>
</div>

Add modal-sm in the same class attribute as model-dialog to set a small Bootstrap modal with a max-width of 300px. 

Small Bootstrap Modal

 

Default Bootstrap 5 Modal

<div class="modal">
   <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>The modal body is where all the text, images, and links go.</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">Save changes</button>
        </div>
      </div>
   </div>
</div>

Boostrap Modal default size is a medium, with a max-width of 500px.

Default Bootstrap modal size

 

Large Bootstrap 5 Modal

<div class="modal">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>The modal body is where all the text, images, and links go.</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">Save changes</button>
        </div>
      </div>
   </div>
</div>

Add modal-lg in the same division element with the modal-dialog so the modal has a max-width of 800px. 

Bootstrap Modal Large

 

Extra Large Bootstrap 5 Modal

<div class="modal">
   <div class="modal-dialog modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>The modal body is where all the text, images, and links go.</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">Save changes</button>
        </div>
      </div>
   </div>
</div>

Set the modal to extra large by adding the modal-xl class attribute value to the model-dialog division element.

Extra large Bootstrap modal

 


 

Full-Screen Bootstrap 5 Modal

Full Screen Bootstrap Modal

As of version 5.0.0, Bootstrap now offers full-screen modals.

 

Always Full-Screen Bootstrap 5 Modal 

<div class="modal">
   <div class="modal-dialog modal-fullscreen">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>The modal body is where all the text, images, and links go.</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">Save changes</button>
        </div>
      </div>
   </div>
</div>

Add modal-fullscreen to the modal-dialog class attribute value if you want the modal to always be full screen.

 

Full-Screen Bootstrap 5 Modal on Small Viewports Only

<div class="modal">
   <div class="modal-dialog modal-fullscreen-sm-down">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>The modal body is where all the text, images, and links go.</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">Save changes</button>
        </div>
      </div>
   </div>
</div>

Add modal-fullscreen-sm-down for the modal to be full screen when the viewport is below 576px. 

 

Full-Screen Bootstrap 5 Modal on Viewpoints Medium and Below

<div class="modal">
   <div class="modal-dialog modal-fullscreen-md-down">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>The modal body is where all the text, images, and links go.</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">Save changes</button>
        </div>
      </div>
   </div>
</div>

Add modal-fullscreen-md-down to the division element with the class attribute value modal-dialog to change the modal to full screen when the viewport is below 768px.  

 

Full-Screen Bootstrap 5 Modal on Viewpoints Large and Below

<div class="modal">
   <div class="modal-dialog modal-fullscreen-lg-down">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>The modal body is where all the text, images, and links go.</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">Save changes</button>
        </div>
      </div>
   </div>
</div>

Use the class attribute value model-fullscreen-lg-down to show a full-screen modal when the viewport is below 992px. 

 

Full-Screen Bootstrap 5 Modal on Viewpoints Extra Large and Below

<div class="modal">
   <div class="modal-dialog modal-fullscreen-xl-down">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>The modal body is where all the text, images, and links go.</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">Save changes</button>
        </div>
      </div>
   </div>
</div>

Or use the class attribute value modal-fullscreen-xl-down so any viewport below 1200px has a full screen modal. 

 

Full-Screen Bootstrap 5 Modal on Viewpoints Extra-extra Large and Below

<div class="modal">
   <div class="modal-dialog modal-fullscreen-xxl-down">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>The modal body is where all the text, images, and links go.</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">Save changes</button>
        </div>
      </div>
   </div>
</div>

Finally, you can add modal-fullscreen-xxl-down to the division element with the class attribute value modal-dialog so the modal appears full screen on screens below 1400px. 

 


 

Bootstrap 5 Modal Static Backdrop

Disable Bootstrap 5 Modal closing when clicking outside it

<div class="modal" data-bs-backdrop="static" data-bs-keyboard="false">
   <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>The modal body is where all the text, images, and links go.</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">Save changes</button>
        </div>
      </div>
   </div>
</div>

Limit the user's interaction with the rest of the page when the modal appears by making the background static. 

This prevents the user from dismissing the modal by clicking off it or clicking escape. 

Add data-bs-backdrop="static" and data-bs-keyboard="false" to the division element with the modal class attribute value. 

 


 

How to make the Bootstrap 5 Modal appear

 

Making the Bootstrap 5 Modal callable

  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel">
    <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">
          <p>The modal body is where all the text, images, and links go.</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">Save changes</button>
        </div>
      </div>
    </div>
  </div>

Calling the Boostrap Modal requires a button or link. But to connect the button, the modal first needs a few more configurations. 

Add an id to the modal division element.

Add a tabindex to make sure the modal appears in front of the page content.

Add an aria-labelledby attribute that will call the modal's title id so screen readers can help users navigate and establish relationships between the label and the object.

Finally, add fade to the modal attribute value so the modal fades in from the top of the page when it's called.

 

Bootstrap 5 Modal appearing by button click

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

Add a button element with a data-bs-toggle="modal" and a data-bs-target attribute. The data-bs-target needs to call the id of the modal.

Bootstrap modal button

 

Bootstrap 5 Modal appearing by link click

 <a data-bs-toggle="modal" href="#exampleModal">Launch demo modal</a>

You can also choose to make the modal callable with a link. 

Bootstrap modal link

 

Bootstrap 5 Modal appearing on page load with JQuery

<head>
      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
  crossorigin="anonymous"></script>
</head>

<body>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel">
    <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">
          <p>The modal body is where all the text, images, and links go.</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">Save changes</button>
        </div>
      </div>
    </div>
</div>


<script type="text/javascript">
    $(window).on('load', function() {
        $('#exampleModal').modal('show');
    });
</script>
</body>

To have the modal appear on the page load using jQuery: 

  1. Add the jQuery CDN to the <head></head> tags
  2. Add the on load function listed above to the <body></body> tags that calls the modal by its id.





Post a Comment
Join the community

0 Comments
1
Jaysha
Written By
Jaysha
Hello! I enjoy learning about new CSS frameworks, animation libraries, and SEO.