From the course: Bootstrap 4 Essential Training

Unlock the full course today

Join today to access over 22,500 courses taught by industry experts or purchase this course individually.

Use modals

Use modals - Bootstrap Tutorial

From the course: Bootstrap 4 Essential Training

Start my 1-month free trial

Use modals

“

that is in an element, showing up as an overlay on top of your page. Like with other components, modals have two parts, the trigger which can be a button or a link as well as a piece of content that you want to show in the modal. If you use a link, you'll need to target an ID that you want to use as your modal. equals modal attribute. Now the content you want to show as the modal needs to have the modal class so this is our main container for the entire element. In addition to the modal class, there's some other classes that set up the structure of how your modal works. Modal dialog is an extra container that is used for some additional spacing. There's another container class called modal content that you can use for the main content of the modal. You can also use an optional header for the title in your modal and you should probably use a header in all your modals. Now the modal body is where you put your main content and there is an optional footer for things like closed buttons…

Contents