Hello and welcome to the 14th day of Bootstrap 4! Today we will learn about Bootstrap 4 Modals. Modals are a simple way to display information upon request. They let you easily add another layer upon your site and give you the possibility to create popups.
In today’s tutorial we will go through ways to position and size the modal. We will see what content we can place inside and how to access its full capabilities via JavaScript. In the end, we have created custom modals that you can build upon for your use-cases.
Let’s get going!
Photo credit to Chloe Gerard for her shot.
The article is split into the following parts:
- Basic Bootstrap 4 Modal
- Positioning the Bootstrap 4 Modal
- Sizing the Bootstrap 4 Modal
- Adding Content to the Bootstrap 4 Modal
- Opening the Bootstrap 4 Modal
- Advanced JavaScript
- Custom Bootstrap 4 Modals
- Further Reading
Basic Bootstrap 4 Modal
Oftentimes when designing a web page we want to show a piece of content only when the user performs a specific action. This is where modals come in handy. They are hidden by default and appear as an overlay only when the users clicks or performs a custom action. This helps with keeping your page simple and uncluttered.
The Bootstrap 4 modal component comes with a lot of options that help you easily create your desired content. Before starting to integrate the Bootstrap 4 modal, you should keep a few things in mind:
- you can only open one modal at a time (you can’t open a modal inside a modal).
- clicking on the backdrop will close the modal.
- it is advised to always have an explicit close button.
- the modal will cover the entire body of the webpage and will take over the scroll. If the modal is open, the scroll will effect the modal content, not the page.
- try and place the modal content just before the closing body tag
</body>. In this way, you will be sure your modal gets displayed when you open it.
In order to get started with the Bootstrap 4 modal, you will first need the code for the popup that gets shown. The basic class is .modal and it contains all other components. Inside you will need the .modal-dialog and the .modal-content.
There are 3 parts that you can place inside the .modal-content. First is the .modal-header that usually has the title and close button. Second, you have the .modal-body that provides padding for the information you place inside. And last, there is the .modal-footer that usually contains the action links.
Here how a basic modal window looks like:
<div class="modal fade" id="glassAnimals" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Glass Animals</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger">Track Artist</button>
</div>
</div>
</div>
</div>
In order to show it, you will need an action. The simplest example is to have a button that opens the modal when it is clicked. You can set this up via data attributes, that we will inspect later. For now, we will use the data-toggle=”modal” attribute and a link to the modal we want to show with the attribute data-target=”#id”.
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#glassAnimals"> Glass Animals Info </button>
And here is how it looks live. It is best if you open the CodePens in this tutorial in a separate window and view them full screen, so you can get the full experience for the modal.
Positioning the Bootstrap 4 Modal
Modals use position: fixed; This means the modal always stays in the same position relative to the viewport. Its top, bottom, left and right position are determined in relation to the enclosing screen. It makes no difference what other elements you have inside the page.
Scrolling Long Content
When the content inside the modal gets too long, a scroll appears for it. The scroll works on the whole page, not inside the modal. Here is an example to better understand the effect:
Side note: The code is identical to the one in Basic Example, I just added more text inside the .modal-body.
Vertical Centering
By default, the Bootstrap 4 modal has a short fixed distance to the top of the page. If you would rather have it centered vertically, you can add the .modal-dialog-centered class together with the .modal-dialog class.
<div class="modal fade" id="glassAnimals" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
...
</div>
</div>
</div>
Sizing the Bootstrap 4 Modal
Small Modal
You can make the modal smaller by adding the .modal-sm class to the .modal-dialog.
<div class="modal fade" id="glassAnimals" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
...
</div>
</div>
</div>
Large Modal
And if you want to make the modal larger, you can add the .modal-lg to the .modal-dialog. The larger size will kick in at a specific resolution, so the users doesn’t get a horizontal scroll on smaller devices.
<div class="modal fade" id="glassAnimals" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
...
</div>
</div>
</div>
Adding Content to the Bootstrap 4 Modal
Once you have the Bootstrap 4 positioned and with the right size for you, you will need to place your information inside. Here are some things that you need to keep in mind:
Using the Grid System
You can place a .container-fluid inside the .modal-body and you can make use of the grid system. You can split the modal into columns and also offset or nest them. If you want to refresh your memory regarding the possibilities, you can go back to the Bootstrap 4 grid system tutorial.
Here is an example with a grid system inside a modal body:
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#grid">
See Modal with Grid
</button>
<div class="modal fade" id="grid" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Gris System Info</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="row">
<div class="col">
...
</div>
</div>
<div class="row">
<div class="col">
...
</div>
<div class="col">
...
</div>
<div class="col">
...
</div>
</div>
<div class="row">
<div class="col-sm-4 offset-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
</div>
<div class="row">
<div class="col-sm-8">
<div class="row">
<div class="col-md-5">
...
</div>
<div class="col-md-7">
...
</div>
</div>
</div>
<div class="col-sm-4">
...
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Using Flex Utilities
You can also place flex containers inside the .modal-body. This will help you manage the space inside the modal and pull, grow or shrink elements. To see the full flex capabilities, you can go back to Day 3: Bootstrap 4 Flex Tutorial and Examples.
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#flex">
See Modal with Flex
</button>
<div class="modal fade" id="flex" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Flex Info</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="d-flex justify-content-center">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
<div class="d-flex justify-content-around">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
<div class="d-flex">
<div>Flex item</div>
<div>Flex item</div>
<div class="ml-auto">Flex item</div>
</div>
<div class="d-flex">
<div class="flex-grow-1">Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Adding Forms
One of the common use cases for Bootstrap 4 modals is to use them to open a form. In this way, the form is seen only by the people interested in that specific action.
We have an example of a register form that opens when you click the button. You will notice that we wrapped both the .modal-body and the .modal-footer inside a <form>. This is because the submit button is placed inside the footer.
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#form">
See Modal with Form
</button>
<div class="modal fade" id="form" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header border-bottom-0">
<h5 class="modal-title" id="exampleModalLabel">Create Account</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form>
<div class="modal-body">
<div class="form-group">
<label for="email1">Email address</label>
<input type="email" class="form-control" id="email1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">Your information is safe with us.</small>
</div>
<div class="form-group">
<label for="password1">Password</label>
<input type="password" class="form-control" id="password1" placeholder="Password">
</div>
<div class="form-group">
<label for="password1">Confirm Password</label>
<input type="password" class="form-control" id="password2" placeholder="Confirm Password">
</div>
</div>
<div class="modal-footer border-top-0 d-flex justify-content-center">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</form>
</div>
</div>
</div>
Adding Tooltips and Popovers
You can place tooltips and popovers inside modals and they will be shown without problems. When the modal is closed, they are also closed and disappear.
Here is an example with the form above and a tooltip and popover. Tooltips and popovers need to be initialised via JavaScript, make sure to check out their documentation to see more details.
<div class="container">
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#form">
See Modal with Form
</button>
</div>
<div class="modal fade" id="form" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header border-bottom-0">
<h5 class="modal-title" id="exampleModalLabel">Create Account</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form>
<div class="modal-body">
<div class="form-group">
<label for="email1">Email address</label>
<input type="email" class="form-control" id="email1" aria-describedby="emailHelp" placeholder="Enter email">
<a href="#" data-toggle="popover" title="Privacy Policy" data-content="Your information is safe with us."><small>Click to toggle popover</small></a>
</div>
<div class="form-group">
<label for="password1">Password</label>
<input type="password" class="form-control" id="password1" placeholder="Password">
</div>
<div class="form-group">
<label for="password1">Confirm Password</label>
<input type="password" class="form-control" id="password2" placeholder="Confirm Password">
</div>
</div>
<div class="modal-footer border-top-0 d-flex justify-content-center">
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Don't forget to submit your data before closing the modal.">
Close with Tooltip
</button>
<button type="submit" class="btn btn-success">Submit</button>
</div>
</form>
</div>
</div>
</div>
Adding Videos
You can place an Youtube video inside a Bootstrap 4 modal by adding an iFrame with it. To do this, you need to search for the desired video on Youtube and press on the share button under the video. You will be prompted with multiple options. You need to choose the embed one. You will be give a code that you can place inside your HTML. In our case, inside the modal.
The video will come with predefined width and height, which I deleted and wrote custom CSS to fit it in the modal. Once you have it sized for your modal, you can press play and it will work. But there is a problem: If you close the modal the video continues to play. So we need to write additional javascript to have the video stop playing when you close the modal.
Here is an example:
And the code:
//html
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#glassAnimals">
Glass Animals Video
</button>
<div class="modal fade" id="glassAnimals" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Glass Animals</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<iframe id="glassAnimalsVideo" src="https://www.youtube.com/embed/PhdtdUljThU" frameborder="0" allowfullscreen></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger">Track Artist</button>
</div>
</div>
</div>
</div>
//css
#glassAnimalsVideo {
width: 100%;
height: auto;
min-height: 300px;
}
//javascript
$(document).ready(function(){
/* we get the YouTube video url and store it in a variable */
var url = $("#glassAnimalsVideo").attr('src');
/* when the modal gets closed, the delete the url for the video */
$("#glassAnimals").on('hide.bs.modal', function(){
$("#glassAnimalsVideo").attr('src', '');
});
/* then the modal gets open, we asign the url for the video */
$("#glassAnimals").on('show.bs.modal', function(){
$("#glassAnimalsVideo").attr('src', url);
});
});
Opening the Bootstrap 4 Modal
You have two options to open a Bootstrap 4 modal: data attributes and writing JavaScript.
Via Data Attributes
In all our previous examples we have used data attributes. We have added an id for the modal and we have referenced it in the button that opens the modal with the data-target=”#id” attribute. You also need the data-toggle=”modal” attribute in order for this to work.
Options
There are a few more options that you can use when you open a modal. Here they are explained:
| Name | Type | Default | Description |
|---|---|---|---|
| backdrop | boolean or the string 'static' |
TRUE | Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn’t close the modal on click. |
| keyboard | boolean | TRUE | Closes the modal when escape key is pressed |
| focus | boolean | TRUE | Puts the focus on the modal when initialized. |
| show | boolean | TRUE | Shows the modal when initialized. |
To use one of the options with a data-attribute, you need to add "data-" before it. So, for example, to change the keyboard behaviour to false (so the ESC key will not close it), you will need to use data-keyboard=”false”.
Here is an example where we have used the backdrop option set to 'static'.
<div class="modal fade" id="glassAnimals" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> ... </div>
Via JavaScript Calls
The second option to open your modal is via JavaScript. In this case you will not need the data attributes anymore. Bu instead, you need to call the following JavaScript function:
$('#myModal').modal(options);
The options that you can pass on to the .modal() function are the ones from the table above. If you want to include them, you will not need to append “data-” anymore.
Here is an example of a modal that opened via JavaScript with the backdrop option set to static:
//html
<button type="button" class="btn btn-danger" id="modalButton">
Glass Animals Info
</button>
<div class="modal fade" id="glassAnimals" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Glass Animals</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger">Track Artist</button>
</div>
</div>
</div>
</div>
//js
$("#modalButton").click(function() {
$('#glassAnimals').modal({
backdrop: 'static'
});
});
Advanced JavaScript
Methods
There are a few additional methods that you can use when dealing with modals.
| Method | Description |
|---|---|
$('#myModal').modal('toggle') |
Manually toggles a modal. |
$('#myModal').modal('show') |
Manually opens a modal. |
$('#myModal').modal('hide') |
Manually hides a modal. |
$('#myModal').modal('handleUpdate') |
Manually readjust the modal’s position if the height of a modal changes while it is open. |
Events
When dealing with modals, there are a series of events that take place. We will take each event and describe its behaviour.
| Event Type | Description |
|---|---|
| show.bs.modal | This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event. |
| shown.bs.modal | This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event. |
| hide.bs.modal | This event is fired immediately when the hide instance method has been called. |
| hidden.bs.modal | This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). |
Here is an example where we change the class of the button that gets clicked to open a modal. We will make the button grey after the modal is shown with the shown.bs.modal event.
//html
<button type="button" class="btn btn-danger" id="modalButton">
Glass Animals Info
</button>
<div class="modal fade" id="glassAnimals" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
...
</div>
//js
$("#modalButton").click(function() {
$('#glassAnimals').modal({
backdrop: 'static'
});
});
$('#glassAnimals').on('shown.bs.modal', function (e) {
console.log('hey');
$("#modalButton").removeClass( "btn-danger" ).addClass( "btn-secondary" );
});
Varying Modal Content
If you have multiple elements that open modals with slightly different content, then you can add a varying content to the modal with the use of the events above. Since we can access the button that triggered the modal through the event, we can take from it the variable content.
We have created a modal that has a different content depending on the button you press. When you click on a button to delete one of the songs in the playlist, you will be prompted with a confirmation modal. The modal takes the name of the song through JavaScript, from the data-song attribute.
//html
<div class="container">
<div class="row">
<div class="col-12 col-md-5">
<h6 class="text-muted">Glass Animals Playlist</h6>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Agnes
<button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#glassAnimalsSong" data-song="Agnes">
<i class="fa fa-times"></i>
</button>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Youth
<button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#glassAnimalsSong" data-song="Youth">
<i class="fa fa-times"></i>
</button>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Life Itself
<button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#glassAnimalsSong" data-song="Life Itself">
<i class="fa fa-times"></i>
</button>
</li>
</ul>
</div>
</div>
</div>
<div class="modal fade" id="glassAnimalsSong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header border-bottom-0">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-center">
<h5>Are you sure you want to delete "<span id="song"></span>"?</h5>
</div>
<div class="modal-footer border-top-0 justify-content-between">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<button type="button" class="btn btn-danger">Yes</button>
</div>
</div>
</div>
</div>
//js
$('#glassAnimalsSong').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var song = button.data('song')
// Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this);
$('#song').text(song);
})
Fade Effect
If you don’t want the modal to appear and disappear with a fade effect, you can delete the .fade class from the .modal. This will make the modal appear with no effect.
<div class="modal" id="glassAnimals" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> ... </div>
Custom Bootstrap 4 Modals
Besides the variations that Bootstrap 4 provides, I thought some custom modals might also be useful. I have created modals with the following functions: login, subscribe, cart, cookie and discount. They might help you when you are creating your own variations.
Login Modal
The login modal features a classic login and the possibility to add social networks logins. The footer has a link to signup for users that are not members.
<div class="container">
<button type="button" class="btn btn-info btn-round" data-toggle="modal" data-target="#loginModal">
Login
</button>
</div>
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header border-bottom-0">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-title text-center">
<h4>Login</h4>
</div>
<div class="d-flex flex-column text-center">
<form>
<div class="form-group">
<input type="email" class="form-control" id="email1"placeholder="Your email address...">
</div>
<div class="form-group">
<input type="password" class="form-control" id="password1" placeholder="Your password...">
</div>
<button type="button" class="btn btn-info btn-block btn-round">Login</button>
</form>
<div class="text-center text-muted delimiter">or use a social network</div>
<div class="d-flex justify-content-center social-buttons">
<button type="button" class="btn btn-secondary btn-round" data-toggle="tooltip" data-placement="top" title="Twitter">
<i class="fab fa-twitter"></i>
</button>
<button type="button" class="btn btn-secondary btn-round" data-toggle="tooltip" data-placement="top" title="Facebook">
<i class="fab fa-facebook"></i>
</button>
<button type="button" class="btn btn-secondary btn-round" data-toggle="tooltip" data-placement="top" title="Linkedin">
<i class="fab fa-linkedin"></i>
</button>
</di>
</div>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<div class="signup-section">Not a member yet? <a href="#a" class="text-info"> Sign Up</a>.</div>
</div>
</div>
</div>
Subscribe Modal
The subscribe modal has a title and a text that should let users know the benefits of subscribing. The subscription form is created with .form-inline and it features an input field and a button.
<div class="container">
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#subscribeModal">
Subscribe
</button>
</div>
<div class="modal fade" id="subscribeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header border-bottom-0">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-title text-center">
<h4>Stay up to date!</h4>
<p>Join over 1.000 developers that get their news from us!</p>
</div>
<div class="d-flex justify-content-center">
<form class="form-inline subscribe-form">
<div class="form-group">
<label class="sr-only" for="email4">Email</label>
<input type="text" class="form-control mr-2" id="email4" placeholder="[email protected]">
</div>
<button type="submit" class="btn btn-success">Subscribe</button>
</form>
</div>
</div>
</div>
</div>
</div>
Cart Modal
Shopping carts are often place inside a modal. This is an easy way to show the cart contents without making the users change the page. In this example, the modal contains a table with the products and a checkout option.
<div class="container">
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#cartModal">
View Cart
</button>
</div>
<div class="modal fade" id="cartModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header border-bottom-0">
<h5 class="modal-title" id="exampleModalLabel">
Your Shopping Cart
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<table class="table table-image">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Product</th>
<th scope="col">Price</th>
<th scope="col">Qty</th>
<th scope="col">Total</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td class="w-25">
<img src="https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/vans.png" class="img-fluid img-thumbnail" alt="Sheep">
</td>
<td>Vans Sk8-Hi MTE Shoes</td>
<td>89
lt;/td>
<td class=”qty”><input type=”text” class=”form-control” id=”input1″ value=”2″></td>
<td>178
lt;/td>
<td>
<a href=”#” class=”btn btn-danger btn-sm”>
<i class=”fa fa-times”></i>
</a>
</td>
</tr>
</tbody>
</table>
<div class=”d-flex justify-content-end”>
<h5>Total: <span class=”price text-success”>89
lt;/span></h5>
</div>
</div>
<div class=”modal-footer border-top-0 d-flex justify-content-between”>
<button type=”button” class=”btn btn-secondary” data-dismiss=”modal”>Close</button>
<button type=”button” class=”btn btn-success”>Checkout</button>
</div>
</div>
</div>
</div>
Cookie Modal
The cookie modal is pretty common. You are probably used to having to accept the cookie policy on various sites. And since you may need to implement it yourself, here is a simple example. The cookie modal is fixed to the top and has a cookie notice and a button to accept the policy.
<div class="container">
<button type="button" class="btn btn-dark" data-toggle="modal" data-target="#cookieModal">
See Cookies
</button>
</div>
<div class="modal fade" id="cookieModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="notice d-flex justify-content-between align-items-center">
<div class="cookie-text">This website uses cookies to personalize content and analyse traffic in order to offer you a better experience.</div>
<div class="buttons d-flex flex-column flex-lg-row">
<a href="#a" class="btn btn-success btn-sm" data-dismiss="modal">I accept</a>
<a href="#a" class="btn btn-secondary btn-sm" data-dismiss="modal">Learn More</a>
</div>
</div>
</div>
</div>
</div>
</div>
Discount Modal
Another popular action on websites is to show a discount coupon on the bottom right of the screen. This can be easily accomplished with a Bootstrap 4 Modal. Here is an example:
<div class="container">
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#discountModal">
Show Discount
</button>
</div>
<div class="modal fade" id="discountModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body text-center">
<div class="icon text-danger">
<i class="fas fa-gift"></i>
</div>
<div class="notice">
<h4>Get 50% Discount</h4>
<p>For the next 24 hours you can get any product at half-price.</p>
<p>Use promo code <span class="badge badge-info">50-OFF</span> at checkout.</p>
</div>
<div class="code"></div>
</div>
<div class="modal-footer d-flex justify-content-between">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Nevermind</button>
<button type="button" class="btn btn-danger">Get Code</button>
</div>
</div>
</div>
</div>
And that is it! Today ends our series of tutorials. It has been some busy weeks but it was hopefully worth it! Please let me know you thoughts in the comments below. And if you would like some additional days of Bootstrap 4, tell me what components I should describe next.
All the code we have used in this tutorial is available on CodePen. Feel free to fork and edit. Congratulations on finishing this series! Best of luck in all your future projects 🙂
Photo credit to Ken Liew for his shot.
Further Reading
If you still have a bit of time, be sure to check out this resources too:
