Bootstrap Modal

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.

Bonus: download a Free Bootstrap CHEAT SHEET that will show you 20+ most important examples to learn in Bootstrap.

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.

Test it Live

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 .modal in the <div> element. Inside this element add two other class .modal-dialog and .modal-content in which the second class comes after the first.

  • Now, in the class .modal-content put your header, body and the footer content using the classes modal-header, modal-body and modal-footer.

  • In the modal header class, put the button with the class .close and attribute data-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 attribute data-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 .modal to the modal. Suppose you have given Mymodal as a class then, you have to use attributes data-toggle="modal" and data-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

Test it Live

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.

Test it Live

Output


Remove Animation From Bootstrap Modal

You can remove the animation from the modal by just removing the class .fade from the modal.

Test it Live

Output


Add forms, notifications, confirmations to your popup dialog box to display on form submissions.

DOWNLOAD Free Bootstrap CHEAT SHEET