Bootstrap 5 Modal is basically a popup window shown on clicking on an element like button or text link. It uses JavaScript to show the content on click with lightbox effect. The modal popup can be closed either by clicking on the close button or clicking outside the modal window. Modal is also referred with many other names like popup, dialog or alert. Note this popup alert is different than the original Bootstrap alert component.
In this tutorial let us create some modal popups to understand the details of the component.
Bootstrap 5 Modal Tutorial
This tutorial covers the following topics:
- Modal triggered on button click
- Scrolling content inside modal
- Sizing of modals
- Modal with tooltip and popover
- Using grid layout inside modal content
- Customizing modal component
1. Creating a Simple Modal Triggered on Button Click
A Bootstrap modal contains two components – button and modal window. Below is the button code for a modal:
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#Modal1">
Click to launch modal
</button>As you see, it is nothing but a button component with additional attributes:
- The attribute data-toggle=”modal” is used to identify the button as a modal component.
- Next is the data-target=”#Modal1″ which is an ID should be unique. This same ID needs to be used in the modal component.
Below is the code for the modal popup, you should use this code between the body section of the Bootstrap starter template.
<div class="modal fade" id="Modal1" tabindex="-1" role="dialog" aria-labelledby="Modal1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalLabel">Here is a Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Here goes the content of the modal.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-warning">Save</button>
</div>
</div>
</div>
</div>There are multiple CSS classes used in a modal component:
- The outer div wrapper should have a “.modal” CSS class. The additional “.fade” class is used for fading the modal box which is optional.
- The ID should be same as the ID value set for the button component.
- Ensure to add other attributes like tabindex, role and aria-hidden.
- The modal content should be added within <div> tags identified with “.modal-dialog” class.
- Modal has a panel or card structure having content, header, title, body and footer classes.
- All parts of the modal should be wrapped inside a <div> with “.modal-content” class.
- The header section is identified with “.modal-header” class and has two components – title and button. The title component uses “.modal-title” and is used to add a heading to the modal popup. The button components is used for including close icon (X) to close the modal dialog box.
- The modal body uses the class “.modal-body” and contains the body of the modal which can be any elements like text, button, tooltip or popover.
- The footer section uses “.modal-footer” and contains two buttons – one for closing and another for saving. The close button will actually close the modal popup. But the save button is a dummy button and you should add your own code to save the documents on the server.
The final output will simply look like a button and clicking on it will trigger a popup modal box.
You can add any type of content inside the modal body section and also have variations in header and footer sections.
2. Creating Modal with Scrolling Content
When the content length is long, it can be scrolled within the modal without scrolling the outside page. Below is the code for creating scrollable modal popup.
<button type="button" class="btn btn-danger btn-md" data-toggle="modal" data-target="#Modal2">
Open modal
</button>
<div class="modal fade" id="Modal2" tabindex="-1" role="dialog" aria-labelledby="Modal2" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalLabel">Modal with Scrolling Content</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Here is the content for modal, enter lengthy content so that you can see the scrolling effect.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-md" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-info btn-md">Save</button>
</div>
</div>
</div>
</div>The scrolling modal will look like below:
3. Sizing of Modals
Sizing here indicates the width of the modal. You can increase or decrease the size by adding “.modal-lg” or “.modal-sm” class to the “.modal-dialog” class.
The complete code the larger modal box is given below:
<button class="btn btn-primary" data-toggle="modal" data-target=".example-modal-lg">Large modal</button>
<div class="modal fade example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="LargeModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalLabel">Large Modal Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Here goes the content of large modal.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger">Save</button>
</div>
</div>
</div>
</div>Similarly the complete code for smaller modal box is as below:
<button type="button" class="btn btn-warning" data-toggle="modal" data-target=".example-modal-sm">Small modal</button>
<div class="modal fade example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="SmallModal" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalLabel">Small Modal Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Here goes the content of small modal.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-secondary">Save</button>
</div>
</div>
</div>
</div>You can see larger, default and smaller modal sizes as below.
4. Modal with Tooltip and Popover
It is also possible to insert tooltips and popovers inside the modal content. Below is the code for doing that:
<!-- Button trigger for modal -->
<button type="button" class="btn btn-secondary btn-md" data-toggle="modal" data-target="#Modaltooltip">
Modal with Popover and Tooltip
</button>
<!-- Modal -->
<div class="modal fade" id="Modaltooltip" tabindex="-1" role="dialog" aria-labelledby="Modaltooltip" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalLabel">Here is a Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h5>Popover in Modal</h5>
<p>Click button for popover. <a href="#" role="button" class="btn btn-dark" title="Popover Title" data-content="Enter content to be shown inside popover" data-toggle="popover">button</a></p>
<hr>
<h5>Tooltip in Modal</h5>
<p>Hover over <a href="#" title="Tooltip on Top" data-toggle="tooltip">this hyperlink</a> to see a tooltip.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-md" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-warning btn-md">Save</button>
</div>
</div>
</div>
</div>The tooltip and popover will look like below. The tooltip will on top show on hover and the popover will show in left on click.
Note: Remember tooltip and popover needs additional Popper JavaScript along with Bootstrap script files. Learn more about Bootstrap tooltips and Bootstrap popover components.
5. Inserting Grid Layout Inside Modal Content
Bootstrap has powerful flexbox grid layout system. You can easily insert content inside the modal using grid layout columns. Below is an example to insert different types of grid columns within a modal.
<button type="button" class="btn btn-dark btn-md" data-toggle="modal" data-target="#Modalgrid">
Modal with Grid
</button>
<div class="modal fade" id="Modalgrid" tabindex="-1" role="dialog" aria-labelledby="Modalgrid" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalLabel">Here is a Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="gridmodal">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
<div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
</div>
<div class="row">
<div class="col-sm-9">
.col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
.col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
.col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-md" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-warning btn-md">Save</button>
</div>
</div>
</div>
</div>It should look like below in the browser:
6. Customizing Bootstrap Modal Component
As you can see, the latest Bootstrap version allows you to add any type of content inside the modal popup. You can customize the color, borders and look of each item within the modal by additional additional CSS on your own. For example, in the above grid example we have used a custom CSS class “.gridmodal” to add background, border and spacing like below.
<style>
.gridmodal .row>[class^=col-] {
padding-top: .75rem;
padding-bottom: .75rem;
margin-bottom: .75em;
background-color: rgba(86,61,124,.15);
border: 1px solid rgba(86,61,124,.2);
}
</style>You can also add the CSS class to the default Bootstrap classes. For example, when you want to add shadow effect to the modal buttons you can just add “btn-md” class like below.
<!-- Button trigger for modal -->
<button type="button" class="btn btn-secondary btn-md" data-toggle="modal" data-target="#Modal1">
Click to launch modal
</button>
<!-- Modal -->
<div class="modal fade" id="Modal1" tabindex="-1" role="dialog" aria-labelledby="Modal1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalLabel">Here is a Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Here goes the content of the modal.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-md" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-warning btn-md">Save</button>
</div>
</div>
</div>
</div>We have added the custom “btn-md” class to the three button components and the result will be shown like below on the browser:
The custom CSS for the “btn-md” class is given below which can be added inside the header part of the HTML page within <style>…</style> tags. Or you can add the code in external CSS file (probably your theme’s style.css” and link the CSS in the header.
.btn-md {
border-width: 0;
outline: none;
border-radius: 2px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
cursor: pointer;
}Wrapping Up
Modals are an easy way to show content in a popup dialog box. This helps a lot to focus on the main content offered on the page. Interested users can click the link or button to invoke the modal windows and read further.
Leave a Reply
Your email is safe with us.