postImage

How to create a Bootstrap 5 Modal.

blogImage

By Amarachi Iheanacho

Technical Writer

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

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.

1<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/css/bootstrap.min.css"/>
2<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.

1<script src="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/js/bootstrap.min.js"></script>
2<script src="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/js/popper.min.js"></script>
3<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

1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/css/bootstrap.min.css"/>
8 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/css/cdb.min.css"/>
9 <title>Document</title>
10</head>
11<body>
12
13
14<script src="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/js/bootstrap.min.js"></script>
15<script src="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/js/popper.min.js"></script>
16<script src="https://cdn.jsdelivr.net/npm/cdbootstrap@1.0.0/js/cdb.min.js"></script>
17
18</body>
19
20</html>

Custom Modal

This is the Contrast Bootstrap default modal.

1<button type="button" class="btn btn-dark btn-flat" data-toggle="modal" data-target="#customModal1">
2 Modal
3</button>
4<div
5 class="modal fade"
6 id="customModal1"
7 tabindex="-1"
8 role="dialog"
9 aria-labelledby="exampleModalLabel"
10 aria-hidden="true"
11>
12 <div class="modal-dialog">
13 <div class="card-border card">
14 <img style="width: 100%" src="../img/modal.jpg" />
15 <div class="card-body">
16 <div class="card-title">Title</div>
17 <p class="card-text">
18 Quisque a varius augue. Etiam volutpat ipsum nec mi porttitor, nec fermentum enim
19 fermentum. Curabitur metus eros, scelerisque vel urna a, condimentum molestie mauris.
20 Aliquam blandit congue risus ac sollicitudin. Proin tempus bibendum sem. Morbi pulvinar a
21 metus sit amet ullamcorper.
22 </p>
23 <div class="d-flex">
24 <div class="d-flex justify-content-start" style="flex: 50%">
25 <button class="btn btn-dark btn-flat">Label</button>
26 </div>
27 <div class="d-flex justify-content-end" style="flex: 50%">
28 <button class="btn btn-light btn-flat close" type="button" data-dismiss="modal">
29 Cancel
30 </button>
31 <button class="btn btn-dark btn-flat">Done</button>
32 </div>
33 </div>
34 </div>
35 </div>
36 </div>
37</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, modal-sm class to indicate that we want our modal to be small, and modal-lg class for a large modal.

1<button
2type="button"
3class="btn btn-light btn-flat"
4data-toggle="modal"
5data-target="#customModal2"
6>
7Small Modal
8</button>
9<div
10class="modal fade"
11id="customModal2"
12tabindex="-1"
13role="dialog"
14aria-labelledby="exampleModalLabel"
15aria-hidden="true"
16>
17<div class="modal-dialog modal-sm">
18 <div class="card">
19 <div class="card-body">
20 <div class="card-title">Title</div>
21 <p class="card-text">
22 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.
23 </p>
24 <div class="d-flex">
25 <div class="d-flex justify-content-start" style="flex: 50%">
26 <button class="btn btn-dark btn-flat">Label</button>
27 </div>
28 <div class="d-flex justify-content-end" style="flex: 50%">
29 <button
30 class="btn btn-light btn-flat close"
31 type="button"
32 data-dismiss="modal"
33 >
34 Cancel
35 </button>
36 <button class="btn btn-dark btn-flat">Done</button>
37 </div>
38 </div>
39 </div>
40 </div>
41</div>
42</div>
43
44<button
45type="button"
46class="btn btn-light btn-flat"
47data-toggle="modal"
48data-target="#customModal3"
49>
50Medium Modal
51</button>
52<div
53class="modal fade"
54id="customModal3"
55tabindex="-1"
56role="dialog"
57aria-labelledby="exampleModalLabel"
58aria-hidden="true"
59>
60<div class="modal-dialog">
61 <div class="card">
62 <div class="card-body">
63 <div class="card-title">Title</div>
64 <p class="card-text">
65 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.
66 </p>
67 <div class="d-flex">
68 <div class="d-flex justify-content-start" style="flex: 50%">
69 <button class="btn btn-dark btn-flat">Label</button>
70 </div>
71 <div class="d-flex justify-content-end" style="flex: 50%">
72 <button
73 class="btn btn-light close"
74 type="button"
75 data-dismiss="modal"
76 >
77 Cancel
78 </button>
79 <button class="btn btn-dark btn-flat">Done</button>
80 </div>
81 </div>
82 </div>
83 </div>
84</div>
85</div>
86
87<button
88type="button"
89class="btn btn-light btn-flat"
90data-toggle="modal"
91data-target="#customModal4"
92>
93Large Modal
94</button>
95<div
96class="modal fade"
97id="customModal4"
98tabindex="-1"
99role="dialog"
100aria-labelledby="exampleModalLabel"
101aria-hidden="true"
102>
103<div class="modal-dialog modal-lg">
104 <div class="card">
105 <div class="card-body">
106 <div class="card-title">Title</div>
107 <p class="card-text">
108 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.
109 </p>
110 <div class="d-flex">
111 <div class="d-flex justify-content-start" style="flex: 50%">
112 <button class="btn btn-dark btn-flat">Label</button>
113 </div>
114 <div class="d-flex justify-content-end" style="flex: 50%">
115 <button
116 class="btn btn-light btn-flat close"
117 type="button"
118 data-dismiss="modal"
119 >
120 Cancel
121 </button>
122 <button class="btn btn-dark btn-flat">Done</button>
123 </div>
124 </div>
125 </div>
126 </div>
127</div>
128</div>
129
130<button
131type="button"
132class="btn btn-light btn-flat"
133data-toggle="modal"
134data-target="#customModal5"
135>
136Fluid Modal
137</button>
138<div
139class="modal fade"
140id="customModal5"
141tabindex="-1"
142role="dialog"
143aria-labelledby="exampleModalLabel"
144aria-hidden="true"
145>
146<div class="modal-dialog modal-fluid">
147 <div class="card">
148 <div class="card-body">
149 <div class="card-title">Title</div>
150 <p class="card-text">
151 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.
152 </p>
153 <div class="d-flex">
154 <div class="d-flex justify-content-start" style="flex: 50%">
155 <button class="btn btn-light btn-flat">Label</button>
156 </div>
157 <div class="d-flex justify-content-end" style="flex: 50%">
158 <button
159 class="btn btn-light btn-flat close"
160 type="button"
161 data-dismiss="modal"
162 >
163 Cancel
164 </button>
165 <button class="btn btn-dark btn-flat">Done</button>
166 </div>
167 </div>
168 </div>
169 </div>
170</div>
171</div>
172</div>
173</div>

Bootstrap 5 Modal

Modal Positions

1<div class="example">
2<button
3type="button"
4class="btn btn-light btn-flat"
5data-toggle="modal"
6data-target="#customModal11"
7>
8Top Left Modal
9</button>
10<div
11class="modal fade"
12id="customModal11"
13tabindex="-1"
14role="dialog"
15aria-labelledby="exampleModalLabel"
16aria-hidden="true"
17>
18<div class="modal-dialog modal-top-left">
19 <div class="card">
20 <div class="card-body">
21 <div class="card-title">Title</div>
22 <p class="card-text">
23 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.
24 </p>
25 <div class="d-flex">
26 <div class="d-flex justify-content-start" style="flex: 50%">
27 <button class="btn btn-dark btn-flat">Label</button>
28 </div>
29 <div class="d-flex justify-content-end" style="flex: 50%">
30 <button
31 class="btn btn-light btn-flat close"
32 type="button"
33 data-dismiss="modal"
34 >
35 Cancel
36 </button>
37 <button class="btn btn-dark btn-flat">Done</button>
38 </div>
39 </div>
40 </div>
41 </div>
42</div>
43</div>
44
45<button
46type="button"
47class="btn btn-light btn-flat"
48data-toggle="modal"
49data-target="#customModal12"
50>
51Top Right Modal
52</button>
53<div
54class="modal fade"
55id="customModal12"
56tabindex="-1"
57role="dialog"
58aria-labelledby="exampleModalLabel"
59aria-hidden="true"
60>
61<div class="modal-dialog modal-top-right">
62 <div class="card">
63 <div class="card-body">
64 <div class="card-title">Title</div>
65 <p class="card-text">
66 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.
67 </p>
68 <div class="d-flex">
69 <div class="d-flex justify-content-start" style="flex: 50%">
70 <button class="btn btn-dark btn-flat">Label</button>
71 </div>
72 <div class="d-flex justify-content-end" style="flex: 50%">
73 <button
74 class="btn btn-light close"
75 type="button"
76 data-dismiss="modal"
77 >
78 Cancel
79 </button>
80 <button class="btn btn-dark btn-flat">Done</button>
81 </div>
82 </div>
83 </div>
84 </div>
85</div>
86</div>
87
88<button
89type="button"
90class="btn btn-light btn-flat"
91data-toggle="modal"
92data-target="#customModal13"
93>
94Bottom Left Modal
95</button>
96<div
97class="modal fade"
98id="customModal13"
99tabindex="-1"
100role="dialog"
101aria-labelledby="exampleModalLabel"
102aria-hidden="true"
103>
104<div class="modal-dialog modal-bottom-left">
105 <div class="card">
106 <div class="card-body">
107 <div class="card-title">Title</div>
108 <p class="card-text">
109 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.
110 </p>
111 <div class="d-flex">
112 <div class="d-flex justify-content-start" style="flex: 50%">
113 <button class="btn btn-dark btn-flat">Label</button>
114 </div>
115 <div class="d-flex justify-content-end" style="flex: 50%">
116 <button
117 class="btn btn-light btn-flat close"
118 type="button"
119 data-dismiss="modal"
120 >
121 Cancel
122 </button>
123 <button class="btn btn-dark btn-flat">Done</button>
124 </div>
125 </div>
126 </div>
127 </div>
128</div>
129</div>
130
131<button
132type="button"
133class="btn btn-light btn-flat"
134data-toggle="modal"
135data-target="#customModal14"
136>
137Bottom Right Modal
138</button>
139<div
140class="modal fade"
141id="customModal14"
142tabindex="-1"
143role="dialog"
144aria-labelledby="exampleModalLabel"
145aria-hidden="true"
146>
147<div class="modal-dialog modal-bottom-right">
148 <div class="card">
149 <div class="card-body">
150 <div class="card-title">Title</div>
151 <p class="card-text">
152 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.
153 </p>
154 <div class="d-flex">
155 <div class="d-flex justify-content-start" style="flex: 50%">
156 <button class="btn btn-light btn-flat">Label</button>
157 </div>
158 <div class="d-flex justify-content-end" style="flex: 50%">
159 <button
160 class="btn btn-light btn-flat close"
161 type="button"
162 data-dismiss="modal"
163 >
164 Cancel
165 </button>
166 <button class="btn btn-dark btn-flat">Done</button>
167 </div>
168 </div>
169 </div>
170 </div>
171</div>
172</div>
173
174<button
175type="button"
176class="btn btn-light btn-flat"
177data-toggle="modal"
178data-target="#customModal15"
179>
180Center Modal
181</button>
182<div
183class="modal fade"
184id="customModal15"
185tabindex="-1"
186role="dialog"
187aria-labelledby="exampleModalLabel"
188aria-hidden="true"
189>
190<div class="modal-dialog modal-center">
191 <div class="card">
192 <div class="card-body">
193 <div class="card-title">Title</div>
194 <p class="card-text">
195 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.
196 </p>
197 <div class="d-flex">
198 <div class="d-flex justify-content-start" style="flex: 50%">
199 <button class="btn btn-light btn-flat">Label</button>
200 </div>
201 <div class="d-flex justify-content-end" style="flex: 50%">
202 <button
203 class="btn btn-light btn-flat close"
204 type="button"
205 data-dismiss="modal"
206 >
207 Cancel
208 </button>
209 <button class="btn btn-dark btn-flat">Done</button>
210 </div>
211 </div>
212 </div>
213 </div>
214</div>
215
216
217

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:

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.Try contrast pro

ad-banner

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

Related Posts

Comments

...