Typography
General
<!-- Modal -->
<div class="modal d-block position-static" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-header">
<!-- Title -->
<h5 class="modal-title">Modal title</h5>
<!-- /Title -->
<!-- Close Button -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<!-- /Close Button -->
</div>
<!-- /Header -->
<!-- Body -->
<div class="modal-body">
<p class="m-0">Modal body text goes here.</p>
</div>
<!-- /Body -->
<!-- Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save Changes</button>
</div>
<!-- /Footer -->
</div>
</div>
</div>
<!-- /Modal -->Live Demo
<!-- Launch Modal Button -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-demo-01">
Launch Modal
</button>
<!-- /Launch Modal Button -->
<!-- Modal -->
<div class="modal fade" id="modal-demo-01" tabindex="-1" role="dialog" aria-labelledby="modal-demo-01-lbl" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-header">
<!-- Title -->
<h5 class="modal-title" id="modal-demo-01-lbl">Modal Title</h5>
<!-- /Title -->
<!-- Close Button -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<!-- /Close Button -->
</div>
<!-- /Header -->
<!-- Body -->
<div class="modal-body">
...
</div>
<!-- /Body -->
<!-- Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save Changes</button>
</div>
<!-- /Footer -->
</div>
</div>
</div>
<!-- /Modal -->Long Content
<!-- Launch Modal Button -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-demo-02">
Launch Modal
</button>
<!-- /Launch Modal Button -->
<!-- Modal -->
<div class="modal fade" id="modal-demo-02" tabindex="-1" role="dialog" aria-labelledby="modal-demo-02-lbl" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-header">
<!-- Title -->
<h5 class="modal-title" id="modal-demo-02-lbl">Modal Title</h5>
<!-- /Title -->
<!-- Close Button -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<!-- /Close Button -->
</div>
<!-- /Header -->
<!-- Body -->
<div class="modal-body">
<h4>What is Lorem Ipsum?</h4>
<p>...</p>
<h4>Where does it come from?</h4>
<p>...</p>
<p>...</p>
<h4>Why do we use it?</h4>
<p>...</p>
<h4>Where can I get some?</h4>
<p>...</p>
</div>
<!-- /Body -->
<!-- Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save Changes</button>
</div>
<!-- /Footer -->
</div>
</div>
</div>
<!-- /Modal --><!-- Launch Modal Button -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-demo-03">
Launch Modal
</button>
<!-- /Launch Modal Button -->
<!-- Modal -->
<div class="modal fade" id="modal-demo-03" tabindex="-1" role="dialog" aria-labelledby="modal-demo-03-lbl" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-header">
<!-- Title -->
<h5 class="modal-title" id="modal-demo-03-lbl">Modal Title</h5>
<!-- /Title -->
<!-- Close Button -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<!-- /Close Button -->
</div>
<!-- /Header -->
<!-- Body -->
<div class="modal-body">
<h4>What is Lorem Ipsum?</h4>
<p>...</p>
<h4>Where does it come from?</h4>
<p>...</p>
<p>...</p>
<h4>Why do we use it?</h4>
<p>...</p>
<h4>Where can I get some?</h4>
<p>...</p>
</div>
<!-- /Body -->
<!-- Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save Changes</button>
</div>
<!-- /Footer -->
</div>
</div>
</div>
<!-- /Modal -->Vertically Centered
<!-- Launch Modal Button -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-demo-04">
Launch Modal
</button>
<!-- /Launch Modal Button -->
<!-- Modal -->
<div class="modal fade" id="modal-demo-04" tabindex="-1" role="dialog" aria-labelledby="modal-demo-04-lbl" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-header">
<!-- Title -->
<h5 class="modal-title" id="modal-demo-04-lbl">Modal Title</h5>
<!-- /Title -->
<!-- Close Button -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<!-- /Close Button -->
</div>
<!-- /Header -->
<!-- Body -->
<div class="modal-body">
<p class="m-0">Modal body text goes here.</p>
</div>
<!-- /Body -->
<!-- Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save Changes</button>
</div>
<!-- /Footer -->
</div>
</div>
</div>
<!-- /Modal -->