Bootstrap 3 Modal

The Bootstrap modal component allows you to add a stylized dialog box to your website.

Add a stylized dialog box to your website with the Bootstrap modal component.

Modals are created with 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">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="modalLabel">Modal Title</h4>
</div>
<div class="modal-body">
Modal content...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Size

By default, Modals are medium sized. You can also make them small or large.

Small Modal

For a small modal, 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">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="modalLabelSmall">Modal Title</h4>
</div>

<div class="modal-body">
Modal content...
</div>

</div>
</div>
</div>

Large Modal

For a large modal, 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">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="modalLabelLarge">Modal Title</h4>
</div>

<div class="modal-body">
Modal content...
</div>

</div>
</div>
</div>

Removing the Fade In/Fade Out Effect

Remove the .fade class to get rid of the fade 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">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="modalLabelLarge">Modal Title</h4>
</div>

<div class="modal-body">
Modal content...
</div>

</div>
</div>
</div>