Bootstrap Modal is the easiest way of creating notification and confirmation popup messages with the addition of few bootstrap classes.
Here is the simple example of Bootstrap Modal, click the button given below:-
A Bootstrap modal is the best way of adding popup to website pages. Open a simple modal on button click which contains the header, body and the footer. Place your notification messages or forms inside the modal and open it only when the user clicks the button or perform some action.
The modal also contains the close button and the cross button which will close the modal when you click on them.
How to Create a Modal Using Bootstrap
You can create your own modal content with the header, body and the footer using Bootstrap. To create a modal using the bootstrap, you have to use classes with its use. See each class one by one and find the steps to create modal in the given below list.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!-- .Launch Modal Button--> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Mymodal"> Launch Modal </button> <!-- .modal --> <div class="modal fade" id="Mymodal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> × </button> <h4 class="modal-title"> Notification </h4> </div> <div class="modal-body"> Are you sure you want to continue? </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"> Close </button> <button type="button" class="btn btn-primary"> Ok </button> </div> </div> </div> </div> |
Output
Steps to create your own modal
If you want to create your modal, then follow the below given steps with classes.
-
Add the class
.modalin the <div> element. Inside this element add two other class.modal-dialogand.modal-contentin which the second class comes after the first. -
Now, in the class
.modal-contentput your header, body and the footer content using the classesmodal-header,modal-bodyandmodal-footer. -
In the modal header class, put the button with the class
.closeand attributedata-dismiss="modal"to show the cross button to the top right side of the modal and close the modal on click of the button. In addition to this, add your title using the class.modal-title -
The content will come inside the class
.modal-content. -
Close buttons and the other action buttons will come inside the footer part of the modal with class
.modal-footer. The close comes with the attributedata-dismiss="modal". -
After you complete creating the modal, you can start creating a button to open a modal on click and place it in the appropriate position on your website. Given some id with the class
.modalto the modal. Suppose you have given Mymodal as a class then, you have to use attributesdata-toggle="modal"anddata-target="#Mymodal"to create a button and open modal.
Bootstrap Modal Size
A modal can also be resized using the bootstrap classes .modal-lg and .modal-sm. However, the class .modal-md cannot resize the modal size so you don’t need to use this class.
Small Size Bootstrap Modal
To create a small size modal, you have to use the class modal-sm. This class reduces the modal size smaller as compared to the default modal size.
See the example below to use this class and make modal smaller
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!-- .Launch Modal Button--> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Mysmallmodal"> Launch Small Modal </button> <!-- .modal --> <div class="modal fade" id="Mysmallmodal"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> × </button> <h4 class="modal-title"> Notification </h4> </div> <div class="modal-body"> This is a small size modal. </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"> Close </button> <button type="button" class="btn btn-primary"> Ok </button> </div> </div> </div> </div> |
Output
Large Size Bootstrap Modal
To create a large size modal, you have to use the class .modal-lg. The class increases the size of the modal to some extent as compared to the default modal size.
See the example below to check the larger size modal using this class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!-- .Launch Modal Button--> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Mylargemodal"> Launch Large Modal </button> <!-- .modal --> <div class="modal fade" id="Mylargemodal"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> × </button> <h4 class="modal-title"> Notification </h4> </div> <div class="modal-body"> Create your large size modal with this. </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"> Close </button> <button type="button" class="btn btn-primary"> Ok </button> </div> </div> </div> </div> |
Output
Remove Animation From Bootstrap Modal
You can remove the animation from the modal by just removing the class .fade from the modal.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!-- .Launch Modal Button--> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#MymodalRemoveAnim"> Launch Modal Without Animation </button> <!-- .modal --> <div class="modal" id="MymodalRemoveAnim"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> × </button> <h4 class="modal-title"> Notification </h4> </div> <div class="modal-body"> Modal without the animation effect. </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"> Close </button> <button type="button" class="btn btn-primary"> Ok </button> </div> </div> </div> </div> |
Output
Add forms, notifications, confirmations to your popup dialog box to display on form submissions.