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.

Talk Python's Mastodon Michael Kennedy's Mastodon