UI Kit
...
Modal body text goes here.
Modal body text goes here.
Modal body text goes here.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Modal body text goes here.
<!-- Modal Components -->
<div class="example-modal">
<div class="modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary btn-sm" type="button" data-dismiss="modal">Close</button>
<button class="btn btn-primary btn-sm" type="button">Save changes</button>
</div>
</div>
</div>
</div>
</div>//- Modal Components
.example-modal
.modal
.modal-dialog(role="document")
.modal-content
.modal-header
h4.modal-title Modal title
button(type="button" class="close" data-dismiss="modal" aria-label="Close")
span(aria-hidden="true") ×
.modal-body
p Modal body text goes here.
.modal-footer
button(type="button" class="btn btn-secondary btn-sm" data-dismiss="modal") Close
button(type="button" class="btn btn-primary btn-sm") Save changes<!-- Modal Variations -->
<!-- Small Modal -->
<div class="modal fade" id="modalSmall" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>...</p>
</div>
</div>
</div>
</div>
<!-- Default Modal -->
<div class="modal fade" id="modalDefault" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary btn-sm" type="button" data-dismiss="modal">Close</button>
<button class="btn btn-primary btn-sm" type="button">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Large Modal -->
<div class="modal fade" id="modalLarge" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary btn-sm" type="button" data-dismiss="modal">Close</button>
<button class="btn btn-primary btn-sm" type="button">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Extra Large Modal -->
<div class="modal fade" id="modalXL" tabindex="-1" role="dialog">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary btn-sm" type="button" data-dismiss="modal">Close</button>
<button class="btn btn-primary btn-sm" type="button">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Modal with Scrolling Content -->
<div class="modal fade" id="modalScroll" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary btn-sm" type="button" data-dismiss="modal">Close</button>
<button class="btn btn-primary btn-sm" type="button">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Vertically Centered Modal -->
<div class="modal fade" id="modalCentered" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary btn-sm" type="button" data-dismiss="modal">Close</button>
<button class="btn btn-primary btn-sm" type="button">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Buttons to Trigger Modals -->
<button class="btn btn-secondary mr-3 mb-3" type="button" data-toggle="modal" data-target="#modalSmall">Small Modal</button>
<button class="btn btn-secondary mr-3 mb-3" type="button" data-toggle="modal" data-target="#modalDefault">Default Modal</button>
<button class="btn btn-secondary mr-3 mb-3" type="button" data-toggle="modal" data-target="#modalLarge">Large Modal</button>
<button class="btn btn-secondary mr-3 mb-3" type="button" data-toggle="modal" data-target="#modalXL">Extra Large Modal</button>
<button class="btn btn-secondary mr-3 mb-3" type="button" data-toggle="modal" data-target="#modalScroll">Scrolling Content</button>
<button class="btn btn-secondary mb-3" type="button" data-toggle="modal" data-target="#modalCentered">Vertically Centered Modal</button>//- Modal Variations
//- Small Modal
div(id="modalSmall" tabindex="-1" role="dialog").modal.fade
.modal-dialog.modal-sm(role="document")
.modal-content
.modal-header
h4.modal-title Modal title
button(type="button" class="close" data-dismiss="modal" aria-label="Close")
span(aria-hidden="true") ×
.modal-body
p ...
//- Default Modal
div(id="modalDefault" tabindex="-1" role="dialog").modal.fade
.modal-dialog(role="document")
.modal-content
.modal-header
h4.modal-title Modal title
button(type="button" class="close" data-dismiss="modal" aria-label="Close")
span(aria-hidden="true") ×
.modal-body
p Modal body text goes here.
.modal-footer
button(type="button" class="btn btn-secondary btn-sm" data-dismiss="modal") Close
button(type="button" class="btn btn-primary btn-sm") Save changes
//- Large Modal
div(id="modalLarge" tabindex='-1' role="dialog").modal.fade
.modal-dialog.modal-lg(role="document")
.modal-content
.modal-header
h4.modal-title Modal title
button(type="button" class="close" data-dismiss="modal" aria-label="Close")
span(aria-hidden="true") ×
.modal-body
p Modal body text goes here.
.modal-footer
button(type="button" class="btn btn-secondary btn-sm" data-dismiss="modal") Close
button(type="button" class="btn btn-primary btn-sm") Save changes
//- Extra Large Modal
div(id="modalXL" tabindex='-1' role="dialog").modal.fade
.modal-dialog.modal-xl(role="document")
.modal-content
.modal-header
h4.modal-title Modal title
button(type="button" class="close" data-dismiss="modal" aria-label="Close")
span(aria-hidden="true") ×
.modal-body
p Modal body text goes here.
.modal-footer
button(type="button" class="btn btn-secondary btn-sm" data-dismiss="modal") Close
button(type="button" class="btn btn-primary btn-sm") Save changes
//- Modal with Scrolling Content
div(id="modalScroll" tabindex="-1" role="dialog").modal.fade
.modal-dialog.modal-dialog-scrollable(role="document")
.modal-content
.modal-header
h4.modal-title Modal title
button(type="button" class="close" data-dismiss="modal" aria-label="Close")
span(aria-hidden="true") ×
.modal-body
p Modal body text goes here.
.modal-footer
button(type="button" class="btn btn-secondary btn-sm" data-dismiss="modal") Close
button(type="button" class="btn btn-primary btn-sm") Save changes
//- Vertically Centered Modal
div(id="modalCentered" tabindex="-1" role="dialog").modal.fade
.modal-dialog.modal-dialog-centered(role="document")
.modal-content
.modal-header
h4.modal-title Modal title
button(type="button" class="close" data-dismiss="modal" aria-label="Close")
span(aria-hidden="true") ×
.modal-body
p Modal body text goes here.
.modal-footer
button(type="button" class="btn btn-secondary btn-sm" data-dismiss="modal") Close
button(type="button" class="btn btn-primary btn-sm") Save changes
//- Buttons to Trigger Modals
button(type="button" class="btn btn-secondary mr-3 mb-3" data-toggle="modal" data-target="#modalSmall") Small Modal
button(type="button" class="btn btn-secondary mr-3 mb-3" data-toggle="modal" data-target="#modalDefault") Default Modal
button(type="button" class="btn btn-secondary mr-3 mb-3" data-toggle="modal" data-target="#modalLarge") Large Modal
button(type="button" class="btn btn-secondary mr-3 mb-3" data-toggle="modal" data-target="#modalXL") Extra Large Modal
button(type="button" class="btn btn-secondary mr-3 mb-3" data-toggle="modal" data-target="#modalScroll") Scrolling Content
button(type="button" class="btn btn-secondary mb-3" data-toggle="modal" data-target="#modalCentered") Vertically Centered Modal