postImage

How to create a Bootstrap 5 Modal.

blogImage

By Amarachi Iheanacho

Technical Writer

Last updated: 7 May 2024

Bootstrap 5 Modal

Bootstrap 5 modals are essential web components that display content in a foreground window and temporarily disable interaction with the main page.

Typically a bootstrap 5 modal popups on the screen and deactivates the rest of the screen, forcing the user to pay attention and complete the interaction stated on the modal.

Table Of Contents

  • Introduction to Bootstrap 5 Modals
  • Prerequisites
  • Overview of the Contrast UI Library
  • How to Add the Contrast Library CDN
  • Creating a Custom Modal
  • Modal Sizes and How to Use Them
  • Positioning Modals on the Screen
  • Conclusion
  • Additional Resources

Introduction to Bootstrap 5 Modals

In this tutorial, we will build interactive Bootstrap 5 modals using contrast, that are perfect for engaging users and ensuring they focus on your message or task.

Bootstrap 5 Checkboxes

Prerequisites

To make the most of this article, ensure you have a basic understanding of:

  • HTML.
  • CSS.
  • JavaScript

Overview of the Contrast UI Library

Contrast is a comprehensive Bootstrap UI kit that includes over 2000 components, making it easier to develop responsive and mobile-first websites. It simplifies the web development process and integrates seamlessly with any project.

How to Add the Contrast Bootstrap 5 Library CDN

To use the Contrast Bootstrap library, include the following CDN links in the <head> tag of your HTML file.

html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap/css/cdb.min.css" />

After including the CSS CDN links, we then include the JavaScript CDN link responsible for creating dynamic components at the bottom of our project. We do this because we want our components to load up before functionalities like interactivity and dynamicity.

html
<script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/cdb.min.js"></script>

Here's how your HTML file should look after adding the CDNs:

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap/css/cdb.min.css" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/cdb.min.js"></script>
  </body>
</html>

Creating a Custom Bootstrap 5 Modal

Here is an example of a custom modal using the Contrast Bootstrap library. For more details, refer to the Contrast documentation.

html
<button type="button" class="btn btn-dark btn-flat" data-toggle="modal" data-target="#customModal1">
  Modal
</button>
<div
  class="modal fade"
  id="customModal1"
  tabindex="-1"
  role="dialog"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="card-border card">
      <img style="width: 100%" src="../img/modal.jpg" />
      <div class="card-body">
        <div class="card-title">Title</div>
        <p class="card-text">
          Quisque a varius augue. Etiam volutpat ipsum nec mi porttitor, nec fermentum enim
          fermentum. Curabitur metus eros, scelerisque vel urna a, condimentum molestie mauris.
          Aliquam blandit congue risus ac sollicitudin. Proin tempus bibendum sem. Morbi pulvinar a
          metus sit amet ullamcorper.
        </p>
        <div class="d-flex">
          <div class="d-flex justify-content-start" style="flex: 50%">
            <button class="btn btn-dark btn-flat">Label</button>
          </div>
          <div class="d-flex justify-content-end" style="flex: 50%">
            <button class="btn btn-light btn-flat close" type="button" data-dismiss="modal">
              Cancel
            </button>
            <button class="btn btn-dark btn-flat">Done</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Bootstrap 5 Modal

Bootstrap 5 Modal Sizes

Contrast Bootstrap 5 allows you to choose from small, medium (default), and large sizes for modals. Here's how to specify the size:

html
<!-- Small modal -->
<div class="modal-dialog modal-sm">
  <!-- Modal content here -->
</div>


<!-- Large modal -->
<div class="modal-dialog modal-lg">
  <!-- Modal content here -->
</div>

Here is how are boostrap 5 modal size will be on your Html file:

html
<button
type="button"
class="btn btn-light btn-flat"
data-toggle="modal"
data-target="#customModal2"
>
Small Modal
</button>
<div
class="modal fade"
id="customModal2"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-sm">
    <div class="card">
    <div class="card-body">
        <div class="card-title">Title</div>
        <p class="card-text">
            Quisque a varius augue. Etiam volutpat ipsum nec mi porttitor,nec
            fermentum enim fermentum. Curabitur metus eros, scelerisque
            vel urna a, condimentum molestie mauris. Aliquam blandit congue
            risus ac sollicitudin. Proin tempus bibendum sem. Morbi pulvinar
             a metus sit amet ullamcorper.
        </p>
        <div class="d-flex">
        <div class="d-flex justify-content-start" style="flex: 50%">
            <button class="btn btn-dark btn-flat">Label</button>
        </div>
        <div class="d-flex justify-content-end" style="flex: 50%">
            <button
            class="btn btn-light btn-flat close"
            type="button"
            data-dismiss="modal"
            >
            Cancel
            </button>
            <button class="btn btn-dark btn-flat">Done</button>
        </div>
        </div>
    </div>
    </div>
</div>
</div>


<button
type="button"
class="btn btn-light btn-flat"
data-toggle="modal"
data-target="#customModal3"
>
Medium Modal
</button>
<div
class="modal fade"
id="customModal3"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog">
    <div class="card">
    <div class="card-body">
        <div class="card-title">Title</div>
        <p class="card-text">
        Quisque a varius augue. Etiam volutpat ipsum nec mi porttitor,nec
        fermentum enim fermentum. Curabitur metus eros, scelerisque
        vel urna a, condimentum molestie mauris. Aliquam blandit
        congue risus ac sollicitudin. Proin tempus bibendum sem.
        Morbi pulvinar a metus sit amet ullamcorper.
        </p>
        <div class="d-flex">
        <div class="d-flex justify-content-start" style="flex: 50%">
            <button class="btn btn-dark btn-flat">Label</button>
        </div>
        <div class="d-flex justify-content-end" style="flex: 50%">
            <button
            class="btn btn-light close"
            type="button"
            data-dismiss="modal"
            >
            Cancel
            </button>
            <button class="btn btn-dark btn-flat">Done</button>
        </div>
        </div>
    </div>
    </div>
</div>
</div>


<button
type="button"
class="btn btn-light btn-flat"
data-toggle="modal"
data-target="#customModal4"
>
Large Modal
</button>
<div
class="modal fade"
id="customModal4"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-lg">
    <div class="card">
    <div class="card-body">
        <div class="card-title">Title</div>
        <p class="card-text">
            Quisque a varius augue. Etiam volutpat ipsum nec mi
            porttitor, nec fermentum enim fermentum. Curabitur
            metus eros, scelerisque vel urna a, condimentum molestie
            mauris. Aliquam blandit congue risus ac sollicitudin.
            Proin tempus bibendum sem. Morbi pulvinar a metus
            sit amet ullamcorper.
        </p>
        <div class="d-flex">
        <div class="d-flex justify-content-start" style="flex: 50%">
            <button class="btn btn-dark btn-flat">Label</button>
        </div>
        <div class="d-flex justify-content-end" style="flex: 50%">
            <button
            class="btn btn-light btn-flat close"
            type="button"
            data-dismiss="modal"
            >
            Cancel
            </button>
            <button class="btn btn-dark btn-flat">Done</button>
        </div>
        </div>
    </div>
    </div>
</div>
</div>


<button
type="button"
class="btn btn-light btn-flat"
data-toggle="modal"
data-target="#customModal5"
>
Fluid Modal
</button>
<div
class="modal fade"
id="customModal5"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-fluid">
    <div class="card">
    <div class="card-body">
        <div class="card-title">Title</div>
        <p class="card-text">
        Quisque a varius augue. Etiam volutpat ipsum nec mi
        porttitor, nec fermentum enim fermentum. Curabitur
        metus eros, scelerisque vel urna a, condimentum molestie
        mauris. Aliquam blandit congue risus ac sollicitudin.
        Proin tempus bibendum sem. Morbi pulvinar a metus
        sit amet ullamcorper.
        </p>
        <div class="d-flex">
        <div class="d-flex justify-content-start" style="flex: 50%">
            <button class="btn btn-light btn-flat">Label</button>
        </div>
        <div class="d-flex justify-content-end" style="flex: 50%">
            <button
            class="btn btn-light btn-flat close"
            type="button"
            data-dismiss="modal"
            >
            Cancel
            </button>
            <button class="btn btn-dark btn-flat">Done</button>
        </div>
        </div>
    </div>
    </div>
</div>
</div>
</div>
</div>

Bootstrap 5 Modal

Positioning Boostrap 5 Modals on the Screen

You can position modals in various places on the screen, such as top-left, top-right, bottom-left, bottom-right, or center. Specify the position using the appropriate class in the modal-dialog div.

html
<div class="example">
  <button
    type="button"
    class="btn btn-light btn-flat"
    data-toggle="modal"
    data-target="#customModal11"
  >
    Top Left Modal
  </button>
  <div
    class="modal fade"
    id="customModal11"
    tabindex="-1"
    role="dialog"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-top-left">
      <div class="card">
        <div class="card-body">
          <div class="card-title">Title</div>
          <p class="card-text">
            Quisque a varius augue. Etiam volutpat ipsum nec mi porttitor, nec fermentum enim
            fermentum. Curabitur metus eros, scelerisque vel urna a, condimentum molestie mauris.
            Aliquam blandit congue risus ac sollicitudin. Proin tempus bibendum sem. Morbi pulvinar
            a metus sit amet ullamcorper.
          </p>
          <div class="d-flex">
            <div class="d-flex justify-content-start" style="flex: 50%">
              <button class="btn btn-dark btn-flat">Label</button>
            </div>
            <div class="d-flex justify-content-end" style="flex: 50%">
              <button class="btn btn-light btn-flat close" type="button" data-dismiss="modal">
                Cancel
              </button>
              <button class="btn btn-dark btn-flat">Done</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <button
    type="button"
    class="btn btn-light btn-flat"
    data-toggle="modal"
    data-target="#customModal12"
  >
    Top Right Modal
  </button>
  <div
    class="modal fade"
    id="customModal12"
    tabindex="-1"
    role="dialog"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-top-right">
      <div class="card">
        <div class="card-body">
          <div class="card-title">Title</div>
          <p class="card-text">
            Quisque a varius augue. Etiam volutpat ipsum nec mi porttitor,nec fermentum enim
            fermentum. Curabitur metus eros, scelerisque vel urna a, condimentum molestie mauris.
            Aliquam blandit congue risus ac sollicitudin. Proin tempus bibendum sem. Morbi pulvinar
            a metus sit amet ullamcorper.
          </p>
          <div class="d-flex">
            <div class="d-flex justify-content-start" style="flex: 50%">
              <button class="btn btn-dark btn-flat">Label</button>
            </div>
            <div class="d-flex justify-content-end" style="flex: 50%">
              <button class="btn btn-light close" type="button" data-dismiss="modal">
                Cancel
              </button>
              <button class="btn btn-dark btn-flat">Done</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <button
    type="button"
    class="btn btn-light btn-flat"
    data-toggle="modal"
    data-target="#customModal13"
  >
    Bottom Left Modal
  </button>
  <div
    class="modal fade"
    id="customModal13"
    tabindex="-1"
    role="dialog"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-bottom-left">
      <div class="card">
        <div class="card-body">
          <div class="card-title">Title</div>
          <p class="card-text">
            Quisque a varius augue. Etiam volutpat ipsum nec mi porttitor,nec fermentum enim
            fermentum. Curabitur metus eros, scelerisque vel urna condimentum molestie mauris.
            Aliquam blandit congue risus ac sollicitudin. Proin tempus bibendum sem. Morbi pulvinara
            metus sit amet ullamcorper.
          </p>
          <div class="d-flex">
            <div class="d-flex justify-content-start" style="flex: 50%">
              <button class="btn btn-dark btn-flat">Label</button>
            </div>
            <div class="d-flex justify-content-end" style="flex: 50%">
              <button class="btn btn-light btn-flat close" type="button" data-dismiss="modal">
                Cancel
              </button>
              <button class="btn btn-dark btn-flat">Done</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <button
    type="button"
    class="btn btn-light btn-flat"
    data-toggle="modal"
    data-target="#customModal14"
  >
    Bottom Right Modal
  </button>
  <div
    class="modal fade"
    id="customModal14"
    tabindex="-1"
    role="dialog"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-bottom-right">
      <div class="card">
        <div class="card-body">
          <div class="card-title">Title</div>
          <p class="card-text">
            Quisque a varius augue. Etiam volutpat ipsum nec mi porttitor, nec fermentum enim
            fermentum. Curabitur metus eros, scelerisque vel urna a, condimentum molestie
            mauris.Aliquam blandit congue risus ac sollicitudin. Proin tempus bibendum sem. Morbi
            pulvinar a metus sit amet ullamcorper.
          </p>
          <div class="d-flex">
            <div class="d-flex justify-content-start" style="flex: 50%">
              <button class="btn btn-light btn-flat">Label</button>
            </div>
            <div class="d-flex justify-content-end" style="flex: 50%">
              <button class="btn btn-light btn-flat close" type="button" data-dismiss="modal">
                Cancel
              </button>
              <button class="btn btn-dark btn-flat">Done</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <button
    type="button"
    class="btn btn-light btn-flat"
    data-toggle="modal"
    data-target="#customModal15"
  >
    Center Modal
  </button>
  <div
    class="modal fade"
    id="customModal15"
    tabindex="-1"
    role="dialog"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-center">
      <div class="card">
        <div class="card-body">
          <div class="card-title">Title</div>
          <p class="card-text">
            Quisque a varius augue. Etiam volutpat ipsum nec mi porttitor,nec fermentum enim
            fermentum. Curabitur metus eros, scelerisque vel urna a, condimentum molestie mauris.
            Aliquam blandit congue risus ac sollicitudin. Proin tempus bibendum sem. Morbi pulvinar
            a metus sit amet ullamcorper.
          </p>
          <div class="d-flex">
            <div class="d-flex justify-content-start" style="flex: 50%">
              <button class="btn btn-light btn-flat">Label</button>
            </div>
            <div class="d-flex justify-content-end" style="flex: 50%">
              <button class="btn btn-light btn-flat close" type="button" data-dismiss="modal">
                Cancel
              </button>
              <button class="btn btn-dark btn-flat">Done</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Bootstrap 5 Modal

Conclusion

This guide provided a detailed walkthrough on creating and customizing Bootstrap 5 modals using the Contrast UI library. Modals are powerful tools for engaging users and can be tailored to fit the design and functionality of your website.

Resources

You may also find the following resources useful:

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

Related Posts

Previous
How to create a React Timepicker using React Bootstrap
Next
How to create a Responsive Bootstrap 5 Sidebar