Understanding Bootstrap Modals
Now let’s examine the different parts of the Bootstrap Modal, so we can understand it better.
The Default Modal
The default Bootstrap Modal looks like this:
To trigger the modal, you’ll need to include a link or a button. The markup for the trigger element might look like this:
<a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal">
Click to open Modal
Notice the link element has two custom data attributes:
data-target. The toggle tells Bootstrap what to do and the target tells Bootstrap which element is going to open. So whenever a link like that is clicked, a modal with an ID of “basicModal” will appear.
Now let’s see the code required to define the modal itself. Here’s the markup:
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<h4 class=”modal-title” id=”myModalLabel”>Basic Modal </h4>
<button type=”button” class=”close” data-dismiss=”modal” aria-label=”Close”>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
div of the modal should have the same ID as used in the trigger element above. In our case, it would be
Note: Custom attributes like
aria-hidden in the parent modal element are used for accessibility. It’s good practice to make your website accessible to all, so you should include these attributes since they won’t negatively affect the standard functionality of the modal.
In the modal’s HTML, we can see a wrapper
div nested inside the parent modal
div has a class of
modal-content that tells
bootstrap.js where to look for the contents of the modal. Inside this
div, we need to place the three sections I mentioned earlier: the header, body, and footer.
The modal header, as the name implies, is used to give the modal a title and some other elements like the “x” close button. This should have a
data-dismiss attribute that tells Bootstrap to remove the element.
Then we have the modal body, a sibling
div of the modal header. Consider the body an open canvas to play with. You can add any kind of data inside the body, including a YouTube video embed, an image, or just about anything else.
Lastly, we have the modal footer. This area is by default right aligned. In this area you could place action buttons like “Save”, “Close”, “Accept”, etc., that are associated with the action the modal is displaying.
Now we’re done with our first modal! You can check it out on our demo page.
Continue reading %Understanding Bootstrap Modals%