Bootstrap 4 Modal
Clash Royale CLAN TAG#URR8PPP googletag.cmd.push(function() googletag.display('div-gpt-ad-1422003450156-2'); );
Bootstrap 4 Modal
❮ Previous
Next ❯
Bootstrap 4 Modal
The Modal component is a dialog box/popup window that is displayed on top of the current
page:
How To Create a Modal
The following example shows how to create a basic modal:
Example
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary"
data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal
Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal
body..
</div>
<!-- Modal footer -->
<div
class="modal-footer">
<button
type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Try it Yourself »
Add animation
Use the .fade class to add a fading effect when opening and closing the modal:
Example
<!-- Fading modal -->
<div class="modal fade"></div>
<!--
Modal without animation -->
<div class="modal"></div>
Try it Yourself »
Modal Size
Change the size of the modal by adding the .modal-sm
class for
small modals or .modal-lg class for large modals.
Add the size class to the <div> element with class .modal-dialog:
Small Modal
<div class="modal-dialog modal-sm">
Try it Yourself »
Large Modal
<div class="modal-dialog modal-lg">
Try it Yourself »
By default, modals are medium in size.
Centered Modal
Center the modal vertically and horizontally within the page, with the .modal-dialog-centered
class:
Example
<div class="modal-dialog modal-dialog-centered">
Try it Yourself »
Complete Bootstrap Modal Reference
For a complete reference of all modal options, methods and events, go to our
Bootstrap JS Modal Reference.
❮ Previous
Next ❯