From the course: Bootstrap 5 Essential Training

Unlock this course with a free trial

Join today to access over 25,300 courses taught by industry experts.

Modal

Modal

- Another component for displaying interactive content on the page are modals and this is a pretty popular component. So let's take a look at how they work. There's a bunch of classes that you can use. There's a modal class with a fade option. You can use to show or fade the modal or kind of animate the modal in. And then inside that you have a modal-dialog section, as well as a modal-content. And of course, you have the usual header, body, and footer classes that you can use. So let's take a look at what the code looks like in action. And I'm going to click on this and you can see that it animates kind of from the top in. Here's the header, the body, and the footer. And you can put buttons. You can see that I have the button right here that allows you to close it, but you can also have anything on the page. Like this other button also close this same box by saying data-bs-dismiss-"modal". So it doesn't need to just be this close button. It can actually be another button and that…

Contents