Modal
Click the background or the close button to dismiss.
The last paragraph tag in the body will not have a margin bottom.
The footer is supposed to only contain action buttons. Buttons will automatically float right, be uppercase and have a margin-left of 8px.
Add the .modal-close class to the button that will dismiss the modal.
Example
<div class="modal" id="modalExample0">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5>Modal Header</h5>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus fugit, numquam quibusdam qui debitis mollitia?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, itaque.</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary-alt">Save</button>
<button class="btn btn-secondary-alt modal-close">Cancel</button>
</div>
</div>
</div>
</div>
Launch modal
Add onclick="openModal(#id)" to an element to make it open the modal.
<button class="btn btn-primary" onclick="openModal('modalExample1')">Open with button</button>
<a href="#" onclick="openModal('modalExample1')">Open with link</a>
<span onclick="openModal('modalExample1')">Open with span</span>
<div class="modal" id="modalExample1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5>Modal Header</h5>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus fugit, numquam quibusdam qui debitis mollitia?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, itaque.</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary-alt">Save</button>
<button class="btn btn-secondary-alt modal-close">Cancel</button>
</div>
</div>
</div>
</div>
Scrolling
A modal with long content will expand beyond the viewport height and the whole modal is then scrollable.
<div class="modal" id="modalExample2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5>Modal Header</h5>
</div>
<div class="modal-body">
<p>Lorem ipsum...</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary-alt">Save</button>
<button class="btn btn-secondary-alt modal-close">Cancel</button>
</div>
</div>
</div>
</div>
Use the .modal-dialog-scrollable class with .modal-dialog to make only the modal body scrollable. This makes the whole modal visible inside the viewport.
<div class="modal" id="modalExample3">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5>Modal Header</h5>
</div>
<div class="modal-body">
<p>Lorem ipsum...</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary-alt">Save</button>
<button class="btn btn-secondary-alt modal-close">Cancel</button>
</div>
</div>
</div>
</div>
Vertically centered
<div class="modal" id="modalExample4">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5>Modal Header</h5>
</div>
<div class="modal-body">
<p>This modal is vertically centered.</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary-alt">Save</button>
<button class="btn btn-secondary-alt modal-close">Cancel</button>
</div>
</div>
</div>
</div>
Sizing
<div class="modal" id="modalExample4">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5>Modal Header</h5>
</div>
<div class="modal-body">
<p>This modal is vertically centered.</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary-alt">Save</button>
<button class="btn btn-secondary-alt modal-close">Cancel</button>
</div>
</div>
</div>
</div>