bootstrap-4-modal

Day 14: Bootstrap 4 Modals Tutorial and Examples

 

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!

bootstrap-4-modal-start

Photo credit to Chloe Gerardfor her shot.

The article is split into the following parts:

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 .card-body that provides padding for the information you place inside. And last, there is the .card-footer that usually contains the action links.

Here how a basic modal window looks like:

bootstrap-4-basic-modal

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”.

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.

dark

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:

dark

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.

dark


Sizing the Bootstrap 4 Modal

Small Modal

You can make the modal smaller by adding the .modal-sm class to the .modal-dialog.

dark


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.

dark


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:

dark


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.

dark


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.

dark


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.

dark


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:

dark

And the code:

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'.

dark


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:

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:

dark


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.

dark


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.

dark


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.

dark


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.

dark


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.

dark


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.

dark



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>

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.

dark


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:

dark



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 🙂

bootstrap-4-modals-finish

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:

 

 

Sharing is caring!

Cristina Conacel

Cristina is a web developer and the owner of BootstrapBay. She likes foxes, clean design, writing blog posts and creating themes that are useful to other developers.