From the course: Bootstrap 4 Layouts: Responsive Single-Page Design

Unlock the full course today

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

Reusable modal templates

Reusable modal templates - Bootstrap Tutorial

From the course: Bootstrap 4 Layouts: Responsive Single-Page Design

Start my 1-month free trial

Reusable modal templates

- [Instructor] It's time to start working on the interactivity for our project. And the first thing I'm going to do is show you how to use something called modals. So modals are a design pattern in JavaScript, or really any programming language that let's you highlight some kind of element on the page and what you do is essentially this allow people to interact with the rest of your interface, while you're showing them something. So you could for example click on one of these monsters and then have a modal showing a bigger version or a full version of what the monster looks like, which is what we're going to do. And the way that you do those in bootstrap is by creating a modal, or a piece of code, for each place that you want to do that in. So what I'm showing you that's a little bit different, is that you can create a template that you can reuse for an modal on the page. It's a lot more powerful. So let's start by looking at our code. We're actually back into this layout…

Contents