Bootstrap Modal

The Modal is a component in Bootstrap. It is a dialog box appearing on the top of the web page. Learn how to implement Modal in Bootstrap. With this lesson, you can learn how to:

  • Create a Modal
  • Create a Modal Dialog
  • Set Modal Content i.e. header, title, body, footer, etc.
  • How to fade Modal
  • How to resize a Modal in Bootstrap

To create a Modal in Bootstrap, use the:

  • .modal class

To create a Modal Dialog:

  • .modal-dialog: Create a modal on the web page
  • .modal-dialog-centered: Center modal on the web page

Set Modal Content:

  • .modal-content: For the modal header, body, and footer
  • .modal-header: Header of the modal
  • .modal-title: Title of the modal
  • .modal-body: Body of the modal
  • .modal-footer: Footer of the modal

Fade Modal:

  • .fade class

Resize Modal:

  • .modal-sm: Create small modals
  • .modal-lg: Create large modals

Example – Bootstrap Modal

Let us now see an example to create a Modal in Bootstrap:


Bootstrap Modal Example

Click on the button Warning:

Bootstrap Modal Example

Video Tutorial – Bootstrap Modal

The following is the complete video tutorial to learn how to work with Modal in Bootstrap:

If you liked the tutorial, spread the word and share the link and our website Studyopedia with others.

Read More:


Bootstrap List Groups
Top Bootstrap Interview Questions and Answers
Studyopedia Editorial Staff
[email protected]

We work to create programming tutorials for all.

No Comments

Post A Comment

Discover more from Studyopedia

Subscribe now to keep reading and get access to the full archive.

Continue reading