Python for Entrepreneurs Transcripts
Chapter: Web design: CSS Frontend frameworks and Bootstrap
Lecture: Concept: Dialogs in Bootstrap
Login or
purchase this course
to watch this video and the rest of the course contents.
0:03
Let's review what it takes to get a dialogue in Bootstrap on a web page. Remember, there is two parts, we are going to need some kind of trigger,
0:12
that can be a button, or a hyperlink styles of button or even a plain hyperlink if you really want.
0:18
Here, the important part is that we have data-toggle and that toggle mode is set to modal
0:24
and the data-target is set to that id of the modal dialogue, so # in CSS means id. And then we are going to have to have the HTML fragment to show
0:34
and that is a little more complicated but it's always the same so you just copy and paste it, it's fine, we have a class "modal fade",
0:40
of course we are setting the id, if you are going to have more than one thing,
0:44
one dialogue on your page, it's super important that you use different ids, HTML is suppose to have one and only one thing with the given id,
0:54
basically id is supposed to be unique per element and there is some other stuff that we could set,
0:58
we've got the modal dialogue, the content, the header, the title, the body, we also have the data-dismiss.
1:05
If we want to have like a little "close" button in the upper right and maybe a "close" or "cancel" button on the bottom
1:11
be sure to give them the data-dismiss="modal". And then, you are free to put whatever you want in product details,
1:17
this whole area is just standard HTML, so you can use things like the grid layout, and hero images, whatever you need.