How to create a Bootstrap 5 Modal.
Tags: css, webdev, programming, codenewbie
Published: 2022-01-13 09:51:13

---
title: How to create a Bootstrap 5 Modal.
published: true
date: 2021-01-10 01:16:04 UTC
tags: ['css', 'webdev', 'programming', 'codenewbie']
canonical_url: https://www.devwares.com/blog//how-to-create-a-bootstrap5-modal
---

Bootstrap 4 Modals are a piece of web component that is used to show information or solicit response ora 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 with Contrast.

![Bootstrap 5 Checkboxes](https://www.devwares.com/blog/images/custom-modal.gif)

## Prerequisites

To make the most of this article, it is important that you 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 Bootstarp 5 Chcekboxes 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@1.0.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/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@1.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/js/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/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@1.0.0/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/css/cdb.min.css"/>
    <title>Document</title>
</head>
<body>
 

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

</body>

</html>

```

## Custom Modal

This is the Contrast Bootstrap default modal.

```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](https://www.devwares.com/blog/images/custom-modal.gif)

## 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, `modal-sm` class to indicate that we want our modal to be small, and `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](https://www.devwares.com/blog/images/img-sizes.gif)

## 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 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="#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>

```

![Bootstrap 5 Modal](https://www.devwares.com/blog/images/modal-position.gif)

## 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.


### Create Stunning Websites and Web Apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help 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 UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking [here](https://cdbootstrap-demo.netlify.app).

![Contrast](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yuz057uo4vkmvma7bdom.png)

Contrast Bootstrap PRO was built using the most popular CSS 
framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc. project with a clean, prebuilt and well documented template and UI components. Learn more about [contrast](https://www.devwares.com/product/bootstrap-contrast-pro).




## Resources

You may also find the following resources useful:

- [Link to the modal documentation](https://www.devwares.com/docs/contrast/javascript/components/modal)
- [Get the Contrast PRO](https://www.devwares.com/product/bootstrap-contrast-pro)

- [How to use Bootstrap in React Using a React Library](https://www.devwares.com/blog/using-bootstrap-in-react/)

- [How to create Tailwind CSS Modal](https://www.devwares.com/blog/how-to-create-tailwind-css-modal)

- [How to use tailwind css in HTML]  (https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML)

- [Why tailwind CSS is good](https://www.devwares.com/blog/why-tailwind-css-is-good)

- [How to use Tailwind CSS in Nextjs](https://www.devwares.com/blog/tailwind-css-in-nextjs)

- [How to create Tailwind CSS Components for your Website](https://www.devwares.com/blog/how-to-create-tailwind-css-components-for-your-website)

- [How to create Tailwind CSS Animation](https://www.devwares.com/blog/create-animation-with-tailwind-css/)

- [Tailwind grid-How to use tailwind CSS grid templates in your project](https://www.devwares.com/blog/how-to-add-tailwind-css-grid-to-your-project/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind form-How to create and style a Responsive Form using Tailwind CSS](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/)

- [Tailwind CSS Flex: How to use Tailwind CSS Flex](https://www.devwares.com/blog/how-to-use-tailwind-css-flex/)

- [How to use tailwind CSS padding, margin and border in your project](https://www.devwares.com/blog/how-to-use-tailwind-css-padding-margin-and-border-in-your-project/)

- [How to use Tailwind CSS Width](https://www.devwares.com/blog/Tailwind-width/)

- [Tailwind CSS CDN-How to use the Tailwind CSS JIT CDN](https://www.devwares.com/blog/how-to-use-the-tailwind-css-JIT-CDN/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [How to use Tailwind CSS in HTML](https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML/)

- [Tailwind CSS table-How to Create Tailwind CSS tables](https://www.devwares.com/blog/how-to-create-tailwind-css-tables/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [Why is tailwind CSS better than other CSS framework](https://www.devwares.com/blog/why-tailwind-css-is-good/)

- [10 tailwind CSS templates and themes](https://www.devwares.com/blog/tailwind-css-10-templates-and-themes/)

- [How to add tailwind CSS colors and Fonts to your project](https://www.devwares.com/blog/how-to-add-tailwind-css-colors-and-fonts-to-your-project/)

- [Differences between Tailwind CSS and SASS](https://www.devwares.com/blog/differences-between-tailwind-css-and-sass/)

- [Differences Between Tailwind CSS and Bootstrap](https://www.devwares.com/blog/diffrences-between-tailwind-css-and-bootstrap/)

- [10 Awesome projects built with Tailwind CSS](https://www.devwares.com/blog/awesome-10-projects-built-with-tailwind/).

- [How to install Tailwind CSS in Vue.js](https://www.devwares.com/blog/how-to-install-tailwind-css-in-vuejs/).

- [How to use Tailwind CSS in React](https://www.devwares.com/blog/how-to-use-tailwind-css-in-react/)

- [How to install Tailwind CSS with Laravel](https://www.devwares.com/blog/how-to-install-tailwind-css-in-laravel/)

- [How to create react date picker](https://www.devwares.com/blog/create-datepicker-with-contrast/)

- [React bootstrap 5 form-How to create React forms](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/).

- [How to create a beautiful React multiselect](https://www.devwares.com/blog/create-multiselect-with-contrast/).

- [How to create a beautiful React Bootstrap progress bar](https://www.devwares.com/blog/create-progress-with-contrast/).

- [How to create a beautiful React Bootstrap select with icons](https://www.devwares.com/blog/create-select-with-contrast/).

- [How to create a beautiful Bootstrap 5 stepper](https://www.devwares.com/blog/create-stepper-with-contrast/)

- [How to create a beautiful React Bootstrap table]
(https://www.devwares.com/blog/create-tables-with-contrast/)

- [How to create beautiful React Bootstrap tabs](https://www.devwares.com/blog/create-tabs-with-contrast/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind Modal-How to create a React Modal using Tailwind CSS.](https://www.devwares.com/blog/how-to-create-a-react-modal-using-tailwind-css/)

- [How to create a Bootstrap 5 Modal.](https://www.devwares.com/blog/how-to-create-a-bootstrap5-modal/)

- [How to Create React Tabs with Tailwind CSS](https://www.devwares.com/blog/how-to-create-react-tabs-with-tailwind-css/)

- [How to implement dark mode in React using tailwind css](https://www.devwares.com/blog/how-to-implement-dark-mode-in-tailwind-css/)

- [How to Implement a React Step Progress Bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-implement-a-react-step-progress-bar-using-tailwind-css/)