Bootstrap Modal Plugin

The Modal Plugin

The Modal plugin is a dialog box/popup window that is displayed on top of the current page:

Tip: Plugins can be included individually (using Bootstrap’s individual “modal.js” file), or all at once (using “bootstrap.js” or “bootstrap.min.js”).

How To Create a Modal

The following example shows how to create a basic modal:

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>

</div>
</div>

Bootstrap Dropdown Components

Dropdowns

Class Description
.dropdown Indicates a dropdown menu
.dropdown-menu Builds the dropdown menu
.dropdown-menu-right Right-aligns a dropdown menu
.dropdown-header Adds a header inside the dropdown menu
.dropup Indicates a dropup menu
.disabled Disables an item in the dropdown menu