Bootstrap 4 Modal

Display a Bootstrap-styled modal dialog box with a minimum of code.

Bootstrap enables you to add a modal dialog box to your site. A modal is a dialog box that takes the focus while the rest of the screen is dimmed or grayed out. This forces the user to take action on the dialog box before continuing.

To create a modal, use the .modal class along with various other .modal-* classes to define each section of the modal.

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#flipFlop">
Click Me
</button>

<!-- The modal -->
<div class="modal fade" id="flipFlop" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="modalLabel">Flip-flop</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
A type of open-toed sandal.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Modal Size

Modals have a default size of medium. You can specify small or large as required.

Small Modal

For a small modal dialog box, add the .modal-sm class to the .modal-dialog:

Due to the port-size for these examples, you might need to open this example in preview mode to see the proper effect.

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#smallShoes">
Click Me
</button>

<!-- The modal -->
<div class="modal fade" id="smallShoes" tabindex="-1" role="dialog" aria-labelledby="modalLabelSmall" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">

<div class="modal-header">
<h4 class="modal-title" id="modalLabelSmall">Small Shoes</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>

<div class="modal-body">
Small shoes are typically worn by people with small feet.
</div>

</div>
</div>
</div>

Large Modal

For a large modal dialog box, add the .modal-lg class to the .modal-dialog:

Due to the port-size for these examples, you might need to open this example in preview mode to see the proper effect.

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#largeShoes">
Click Me
</button>

<!-- The modal -->
<div class="modal fade" id="largeShoes" tabindex="-1" role="dialog" aria-labelledby="modalLabelLarge" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">

<div class="modal-header">
<h4 class="modal-title" id="modalLabelLarge">Large Shoes</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>

<div class="modal-body">
Large shoes are usually avoided by people with small feet.
</div>

</div>
</div>
</div>

Remove Fade Effect

You can remove the .fade class to get rid of the fade-in/fade-out effect.

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#largeShoes">
Click Me
</button>

<!-- The modal -->
<div class="modal" id="largeShoes" tabindex="-1" role="dialog" aria-labelledby="modalLabelLarge" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">

<div class="modal-header">
<h4 class="modal-title" id="modalLabelLarge">Boot Polish</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>

<div class="modal-body">
Remove that faded effect by adding boot polish!
</div>

</div>
</div>
</div>