postImage

How to create a Bootstrap 5 Modal.

blogImage

By Amarachi Iheanacho

Technical Writer

Bootstrap 5 Modals are a piece of web component that is used to show information or solicit a response or a certain kind of interaction from the user or viewer.

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

  • What are we building?
  • Prerequisites
  • Understanding what Contrast is
  • Adding the Contrast library CDN
  • Custom Modal
  • Modal Sizes
  • Modal Position
  • Conclusion
  • Resources

What we are building

In this article, we are going to create bootstrap 5 modals.

Bootstrap 5 Checkboxes

Prerequisites

To make the most of this article, you must have the following:

  • A basic understanding of HTML.
  • A basic understanding of CSS.
  • A basic understanding of JavaScript

Understanding what Contrast is

Contrast or Contrast Design Bootstrap is an elegant bootstrap UI kit featuring over 2000+ essential components. Contrast helps simplify the web development process and can be integrated with any project to build mobile-first, responsive, and elegant websites and web apps.

Adding the Contrast library CDN

To create our Bootstrap 5 Checkboxes and Radio buttons we are going to use the Contrast Bootstrap library CDN.

We include the CSS CDN responsible for the Bootstrap styling in the <head> in our 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>

After adding the CDNs our HTML file should look like this

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>

Custom Modal

This is the Contrast Bootstrap default modal. You can find out more by going through the 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

Modal Sizes

With Contrast Bootstrap, we get access to three different sizes of modal, small, medium(also default), and large modal. To create incorporate these sizes in our modal we give the modal div these classes, the modal-sm class to indicate that we want our modal to be small, and the modal-lg class for a large modal.

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

Modal Positions

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

In this article we discussed what modals are on a webpage and why they are used, we also explained what the Contrast UI library is and used it to create modals in our application.

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.

ad-banner

Related Posts

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

Comments

...