The Modal Component in Bootstrap 4

The Bootstrap 4 Modals are built by using HTML, CSS, and JavaScript (jQuery). As a modal is displayed, the underneath content in the web page becomes “inactive” that a user cannot interact with until it is closed. The scroll bars are removed for underlying content so that modal content can be scrolled.

You may use Modal Bootstrap 4 for adding user notifications, lightboxes, marketing some important service or product, making announcements etc.

A few quick modal demos in this tutorial

vertically centered tooltip in modal small custom modal onload

In this tutorial, I will show you how to create modals by using Bootstrap 4 framework with live demos and complete code.

You may be interested in learning how to create Bootstrap 5 based Modals

A simple modal example

Let me begin by creating a simple modal by using the built-in classes and data attributes. A modal generally has three sections:

The Modal header – Display a title/heading with controls like close option.
Modal body – Convey the message to the user, place a form, images, videos etc.
Modal footer – The optional component where you may place actionable stuff like “Subscription”, “Create Account” buttons etc.

See the example below with all three components in the Bootstrap 4 Modal:

See online demo and code

The markup for the example:

Launch demo modal

</button>

<h5 class="modal-title" id="Modal-simple-demo-label">Heading for the Modal</h5>

</button>

</div>

The content of the modal comes here. <br />

Add text, images or videos!

</div>

<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

</div>

The requirements:

You are required to include the Bootstrap CSS file, jQuery, and popper JS files and finally Bootstrap JS file in order to make the modal component work. I have included all these by CDN:

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css” integrity=”sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy” crossorigin=”anonymous”>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js”></script>

How modal code works?

Step 1:

First of all, you can see a modal launch button that used the data-target attribute. Its value is matched to the ID of the main div containing modal i.e.

<div class=”modal fade” id=”Modal-simple-demo” tabindex=”-1″ role=”dialog” aria-labelledby=”Modal-simple-demo-label” aria-hidden=”true”>

Besides, the data-toggle=”modal” attribute is also used in the launch button.

Step 2:

The modal header is defined by using the .modal-header class in a div. In our example header, the modal contains the title and close button.

Step 3:

The body of the modal where you will write the content or display images/videos is defined by using a <div> that is given the .modal-body class.

Step 4:

The footer is set by using another div with .modal-footer class. There, I used a few Bootstrap 4 buttons classes.

Display modal vertically centered example

As you launched the above modal by pressing the button, you might notice the modal displayed upwards as per your screen. It was not vertically centered by default.

If you require displaying the modal aligned vertically centered then just add the .modal-dialog-centered class with .modal-dialog. Have a look at this demo:

See online demo and code

The markup:

<h3>Bootstrap 4 Modal</h3>

Open Vertically Centered Modal

</button>

<h5 class="modal-title" id="Modal-vert-center-demo-label">Vertically centered modal</h5>

</button>

</div>

This modal is aligned <br />

Vertically centered!

</div>

<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

</div>

Displaying tooltips in Modal dialog example

As mentioned earlier, you may display content as per the requirement in the modal body. The following example displays the tooltips by using Bootstrap 4 tooltip component classes in the modal body:

See online demo and code

The markup for the demo:

<h3>Bootstrap 4 Modal</h3>

Open Modal with Tooltips

</button>

<h5 class="modal-title" id="Modal-vert-center-demo-label">Modal with Tooltips</h5>

</button>

</div>

A demo of using tooltips in different directions <br />

<a href="#" data-toggle="tooltip-demo" data-placement="top" title="Top direction">Towards Top</a>

<a href="#" data-toggle="tooltip-demo" data-placement="bottom" title="Bottom!">Towards Bottom</a>

<a href="#" data-toggle="tooltip-demo" data-placement="left" title="Left!">Towards Left</a>

<a href="#" data-toggle="tooltip-demo" data-placement="right" title="Right!">Towards Right</a>

</div>

</div>

You also need to initiate the tooltip component via jQuery:

$(document).ready(function(){

$('[data-toggle="tooltip-demo"]').tooltip();

});

</script>

You can see, the tooltips are displayed towards left, right, top, and bottom directions.

A demo of displaying popovers

Similarly, you may use the popover component in the Modal dialog. Have a look at the demo:

See online demo and code

The markup:

<h3>Bootstrap 4 Modal</h3>

Open Modal with popovers

</button>

<h5 class="modal-title" id="Modal-pop-demo-label">Modal with Popover</h5>

</button>

</div>

A demo of using poover component in Modal<br />

<a href="#" data-toggle="modal-popover-demo" title="Using Popover in Modal" data-content="This demo uses popover component in a modal">Toggle popover link</a>

<a href="#" data-toggle="modal-popover-demo" role="button" class="btn btn-primary" title="Link button" data-content="This demo uses popover component in a modal">Toggle popover button link</a>

</div>

</div>

The script for initializing the popover:

$(document).ready(function(){

$('[data-toggle="modal-popover-demo"]').popover();

});

Create large and small-sized modal windows

Bootstrap 4 has classes to create small and large modal dialogs. In Bootstrap 3 modals, you had to customize the sizes by grabbing the modal classes and changing the height or width of modal as per the requirement. You can also do this in Bootstrap 4, however, it also has built-in classes for creating the standard small and large-sized modal windows.

The size of the modals will adjust as per the user’s device. Following classes can be used with .modal-dialog class:

modal-lg //For creating large sized modal
modal-sm //For small size modals

Have a look at this demo where you can see two buttons to launch large and small size modal dialogs:

See online demo and code

The markup for small and large size modals:

100

101

102

103

<h3>Bootstrap 4 Modal</h3>

Open Large Modal

</button>

Open Small Modal

</button>

<h5 class="modal-title" id="Modal-large-demo-label">Large sized Modal</h5>

</button>

</div>

A demo of large size modal<br />

</div>

</div>

<h5 class="modal-title" id="Modal-small-demo-label">Small size Modal</h5>

</button>

</div>

A demo of small size modal<br />

</div>

</div>

How to customize the height and width of Modal in Bootstrap 4?

Rather than using the default settings for height and width for Bootstrap modals (for normal, small or large sizes), you may specify your own as per requirement.

For that, you need to use the custom CSS after the reference of Bootstrap CSS file. The following example shows using the CSS in <style> section.

There, I used the .modal-dialog class and set the width as follows:

See online demo and code

The CSS

<style>

.modal-dialog {

width: 430px;

}

</style>

Overriding the default colors demo

Similarly, by using the .modal-content property after the reference of Bootstrap 4 CSS, you may customize the color scheme of the content area and .modal-header for the header of the modal.

See a demonstration below where I changed the header and content default colors by overriding these classes:

See online demo and code

The CSS for this demo:

<style>

.modal-dialog {

width: 360px;

}

.modal-header {

background-color: #004000;

padding:5px 5px;

color:#FFF;

border-bottom:1px dashed #BBBB00;

}

.modal-content {

/* 80% of window height */

height: 90%;

background-color:#D7FFEB;

}

.modal-footer {

background-color:#004000;

padding: 1rem;

border-top: 1px solid #e9ecef;

}

</style>

The markup:

Open Custom Modal

</button>

<h5 class="modal-title" id="Modal-custom-demo-label">Customzing Bootstrap Modal</h5>

</button>

</div>

A demo of large cutomizing modal<br />

Changing the background color of header<br />

content area<br />

and fotter

</div>

<button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>

<button type="button" class="btn btn-info" data-dismiss="modal">Abort</button>

</div>

In the same way, you may get the other classes and override the default styles.

Related Tutorial: Customize Bootstrap 3 modals

Removing the animation as modal closes

In all above examples, you might have seen the usage of .fade class in the <div> with .modal class (the first div). That gives modals a fading effect as you open or close the modal window by pressing the cross sign or click somewhere in “backdrop”.

If you want to remove this effect, simply delete the fade class. See this example where modal dialog displays without any effect:

See online demo and code

Only this bit is changed to the main div:

<div class=”modal” id=”Modal-nofade-demo” tabindex=”-1″ role=”dialog” aria-labelledby=”Modal-nofade-demo-label” aria-hidden=”true”>

That is, the fade class is removed.

Display the modal as web page loads

In all above examples, the modal is launched as you pressed the button. In certain situation, you may require loading the modal dialog as the web page loads.

For that, you may use the modal’s show method in jQuery code as shown in the example below. Click the image or link below to load the example page and you will see modal is loaded:

See online demo and code

Just add the following script before the </body> tag:

$(document).ready(function(){

$('#Modal-onload-demo').modal('show');

});

Make sure using the correct modal ID in the jQuery code.

Disable the keyboard Escape key example

Again, in all above examples, the modal window is closed as you press the “Esc” key in the keyboard along with options of closing by clicking the cross button or clicking on “backdrop”.

You may disable the keyboard Esc key by using the keyboard: false in the jQuery code or by using data-attribute. Open the demo page and try closing by pressing the Esc key:

See online demo and code

The script:

$('#Modal-keyboard-demo').modal({

keyboard: false

})

See the complete code along with markup on the demo page.

Note: You may also use the data attribute for disabling the keyboard if you do not want to use the jQuery code. For example:

data-keyboard=”false”

This markup will also work for above example without jQuery code:

<div class=”modal fade” id=”Modal-keyboard-demo” tabindex=”-1″ data-keyboard=”false” role=”dialog” aria-labelledby=”Modal-keyboard-demo-label” aria-hidden=”true”>

Disabling the backdrop in modal Bootstrap

Similarly, you may set the backdrop false via JavaScript or data attribute. In that case, the modal will not be closed by clicking anywhere outside of the modal. You may also disable keyboard and backdrop together, so a user may close the modal only by pressing the cross button or buttons in the modal.

Have a look at the demo below where I disabled keyboard Esc as well as the backdrop by using the data attributes.

See online demo and code

The markup:

<h3>Bootstrap 4 Modal</h3>

Open Modal - keyboard/backdrop disabled

</button>

<h5 class="modal-title" id="Modal-key-back-demo-label">Disabled Esc/backdrop</h5>

</button>

</div>

Keyboard and backdrop disabled <br />

Press cross or button to close Modal

</div>

<button type="button" class="btn btn-success" data-dismiss="modal">Cancel</button>

</div>

These two attributes are used:

data-keyboard=”false” data-backdrop=”false”

No JavaScript.

Modals

vertically centered tooltip in modal small custom modal onload

A simple modal example

See online demo and code

Display modal vertically centered example

See online demo and code

Displaying tooltips in Modal dialog example

See online demo and code

A demo of displaying popovers

See online demo and code

Create large and small-sized modal windows

See online demo and code

How to customize the height and width of Modal in Bootstrap 4?

See online demo and code

Overriding the default colors demo

See online demo and code

Removing the animation as modal closes

See online demo and code

Display the modal as web page loads

See online demo and code

Disable the keyboard Escape key example

See online demo and code

Disabling the backdrop in modal Bootstrap

See online demo and code

Related Tutorials: