How to Create Bootstrap Modal in your Website

How to Create Bootstrap Modal in your Website

A Bootstrap Modal is used to show important information to site’s visitors. This can be some sort of confirmation (like cookies information, updating or deleting profile), session time out or a new product launch. You will also find that these Bootstrap Modals are used by website owners to collect email addresses for newsletter subscription.

Creating Bootstrap Modal in your Website

Modals are made even more powerful in Bootstrap 4. They are very easy to create and shows up on the top of your web page. Thes modal can be triggered by a link, button click or by a JavaScript code. They are also responsive so they automatically adapts themselves to every screen size.

In order to use Bootstrap Modal in your site you must implement Bootstrap first. This tutorial – How to Use Bootstrap will help you learn the implementation part.

Below is the HTML code of the Bootstrap Modal which you can place in any of your web page.

<!-- The button that triggers the Modal -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Bootstrap Modal -->
<div class="modal fade" id="myModal" 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">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</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-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<!-- END Bootstrap Modal -->

You can test the above Bootstrap Modal by clicking the Open Modal button below.

Test Modal



Explanation
Trigger Part: My Bootstrap Modal’s id is myModal and it can be triggered by using a button or a link that should have the following 2 attributes.

  • data-toggle=”modal”
  • data-target=”#myModal”
The modal class identifies that the div will act as the modal and the fade class adds transition effect to it. You can remove the fade class if you don’t want the transition effect in your Bootstrap Modal.

The modal-dialog class is used to provide width and margin to the modal.

The modal-header class forms the header of the modal. It contains a button with attribute data-dismiss=”modal”, on clicking it the modal closes.

The modal-title class is the place where you can provide the title for the Bootstrap Modal.

Similarly, modal-body is the body of the modal. Provide your contents here.

The modal-footer is the modal footer that contains a Close button.

Do you want to explore Bootstrap from the beginning. Then kindly check this tutorial on What is Bootstrap which will explain you this framework from the starting point.

Trigger Bootstrap Modal with JavaScript

It is not necessary to show Bootstrap Modal by Button or Link click, in fact you can call the .modal(“show”) method though JavaScript code to show the modal.

The below JavaScript code will show the modal whenever the page is loaded.

<script>
$(document).ready(function () {
    $("#myModal").modal("show");    
});
</script>

Change Bootstrap Modal Size

You can also change the size of Bootstrap modal to a smaller or larger one. For doing this you need to add a class to class=”modal-dialog”>.

For small Bootstrap modal add modal-sm class with the modal-dialog.

<div class="modal-dialog modal-sm">
Test Small Modal



For large Bootstrap modal add modal-lg class with the modal-dialog.

<div class="modal-dialog modal-lg"> 
Test Large Modal



By default a Bootstrap Modal is medium in size.

Share this article -

yogihosting

ABOUT THE AUTHOR

This article has been written by the Technical Staff of YogiHosting. Check out other articles on "WordPress, SEO, jQuery, HTML" and more.