Learn how to create a modal using the bootstrap for your web application. Bootstrap modal is the easiest way of creating notification and confirmation popup messages with the addition of few bootstrap classes.

A Bootstrap modal is a popup which displays when you click the button or open a web page.

Perform form submission of user input on popup dialog box using the using the bootstrap modal plugin. Create your own modal content with the header, body and the footer using bootstrap.

Create Bootstrap Modal

Open a simple modal on click of the button 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

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.

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.

Create 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

Output

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

Output

How to Remove Animation From Bootstrap Modal

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

Output


Reference
Getbootstrap Doc

Leave a Reply

Your email address will not be published. Required fields are marked *