Modal
Use this modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Basic
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<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>
</div>
</div>
</div>Options
Colors
Use .modal-COLOR, where color is one the the pre-defined theme values: info, success, danger, warning, primary, secondary, white and dark
<!-- Button trigger modal -->
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#modal_5">
Danger modal
</button>
<!-- Modal -->
<div class="modal modal-danger fade" id="modal_5" tabindex="-1" role="dialog" aria-labelledby="modal_5" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h6" id="modal_title_6">This is way to dangerous</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="py-3 text-center">
<i class="fas fa-exclamation-circle fa-4x"></i>
<h5 class="heading h4 mt-4">Should we stop now?</h5>
<p>
You can easy create stackable modal boxes. For example, your inline content or Ajax response can contain a gallery:
</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-white" data-dismiss="modal">Probably not</button>
</div>
</div>
</div>
</div><!-- Button trigger modal -->
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#modal_success">
Success modal
</button>
<!-- Modal -->
<div class="modal modal-success fade" id="modal_success" tabindex="-1" role="dialog" aria-labelledby="modal_success" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h6" id="modal_title_6">It looks ok to me</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="py-3 text-center">
<i class="fas fa-exclamation-circle fa-4x"></i>
<h5 class="heading h4 mt-4">Let's get started</h5>
<p>
You can easy create stackable modal boxes. For example, your inline content or Ajax response can contain a gallery:
</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-white" data-dismiss="modal">OK, cool</button>
</div>
</div>
</div>
</div>Sizing
Modals have three optional sizes, available via modifier classes to be placed on a .modal-dialog. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
<!-- Extra large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".docs-example-modal-xl">Extra large modal</button>
<div class="modal fade docs-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h6" id="myExtraLargeModalLabel">Extra large modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div><!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".docs-example-modal-lg">Large modal</button>
<div class="modal fade docs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h6" id="myLargeModalLabel">Large modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div><!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".docs-example-modal-sm">Small modal</button>
<div class="modal fade docs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h6" id="mySmallModalLabel">Small modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>Fluid
<!-- Button trigger modal -->
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#modal_1">
Fluid modal
</button>
<!-- Modal -->
<div class="modal modal-fluid fade" id="modal_1" tabindex="-1" role="dialog" aria-labelledby="modal_1" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="row justify-content-center">
<div class="col-lg-8 text-center py-4">
<h6 class="h3">Unleash your creativity!</h6>
<p class="lead text-muted">
You can easy create stackable modal boxes. For example, your inline content or Ajax response can contain a gallery:
</p>
<div class="py-7">
<img src="../../assets/img/icons/essential/detailed/Apps.svg" class="img-fluid img-center svg-inject">
</div>
<button type="button" class="btn btn-primary" data-dismiss="modal">Let's do this!</button>
</div>
</div>
</div>
</div>
</div>
</div>Examples
Change username
<!-- Button trigger modal -->
<button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#modal-change-username">Change username</button>
<!-- Modal -->
<div class="modal fade" id="modal-change-username" tabindex="-1" role="dialog" aria-labelledby="modal-change-username" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<form>
<div class="modal-content">
<div class="modal-header">
<div class="modal-title d-flex align-items-center" id="modal-title-change-username">
<div>
<div class="icon icon-sm icon-shape icon-info rounded-circle shadow mr-3">
<i class="far fa-user"></i>
</div>
</div>
<div>
<h6 class="mb-0">Change username</h6>
</div>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="form-control-label">Old username</label>
<input class="form-control" type="text">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="form-control-label">New username</label>
<input class="form-control" type="text">
</div>
</div>
</div>
<div class="px-5 pt-4 mt-4 delimiter-top text-center">
<p class="text-muted text-sm">You will receive an email where you will be asked to confirm this action in order to be completed.</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Change my username</button>
</div>
</div>
</form>
</div>
</div>Delete account
<!-- Button trigger modal -->
<button type="button" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#modal-delete-account">Delete account</button>
<!-- Modal -->
<div class="modal modal-danger fade" id="modal-delete-account" tabindex="-1" role="dialog" aria-labelledby="modal-delete-account" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<form class="form-danger">
<div class="modal-content">
<div class="modal-body">
<div class="text-center">
<i class="far fa-exclamation-circle fa-3x opacity-8"></i>
<h5 class="text-white mt-4">Should we stop now?</h5>
<p class="text-sm text-sm">All your data will be erased. You will no longer be billed, and your username will be available to anyone.</p>
</div>
<div class="form-group">
<label class="form-control-label text-white">You email or username</label>
<input class="form-control" type="text">
</div>
<div class="form-group">
<label class="form-control-label text-white">To verify, type <span class="font-italic">delete my account</span> below</label>
<input class="form-control" type="text">
</div>
<div class="form-group">
<label class="form-control-label text-white">Your password</label>
<input class="form-control" type="password">
</div>
<div class="mt-4">
<button type="button" class="btn btn-block btn-sm btn-white text-danger">Delete my account</button>
<button type="button" class="btn btn-block btn-sm btn-link text-light mt-4" data-dismiss="modal">Not this time</button>
</div>
</div>
</div>
</form>
</div>
</div>Users
<!-- Button trigger modal -->
<button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#modal-users">Users</button>
<!-- Modal -->
<div class="modal fade" id="modal-users" tabindex="-1" role="dialog" aria-labelledby="modal-users" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h6" id="myLargeModalLabel">Users</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body p-0">
<div class="list-group list-group-flush w-100">
<div class="list-group-item">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="">
</a>
</div>
<div class="col ml-n2">
<a href="#!" class="d-block h6 mb-0">John Sullivan</a><div>
<span class="text-sm text-success">●</span>
<small>Online</small>
</div>
</div>
<div class="col-auto">
<button type="button" class="btn btn-xs btn-secondary btn-icon">
<span class="btn-inner--icon"><i class="far fa-plus"></i></span>
<span class="btn-inner--text">Add</span>
</button>
</div>
</div>
</div>
<div class="list-group-item">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">
</a>
</div>
<div class="col ml-n2">
<a href="#!" class="d-block h6 mb-0">Heather Wright</a><div>
<span class="text-sm text-warning">●</span>
<small>In a meeting</small>
</div>
</div>
<div class="col-auto">
<button type="button" class="btn btn-xs btn-secondary btn-icon">
<span class="btn-inner--icon"><i class="far fa-plus"></i></span>
<span class="btn-inner--text">Add</span>
</button>
</div>
</div>
</div>
<div class="list-group-item">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-3-800x800.jpg" class="">
</a>
</div>
<div class="col ml-n2">
<a href="#!" class="d-block h6 mb-0">James Lewis</a><div>
<span class="text-sm text-danger">●</span>
<small>Offline</small>
</div>
</div>
<div class="col-auto">
<button type="button" class="btn btn-xs btn-secondary btn-icon">
<span class="btn-inner--icon"><i class="far fa-plus"></i></span>
<span class="btn-inner--text">Add</span>
</button>
</div>
</div>
</div>
<div class="list-group-item">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-4-800x800.jpg" class="">
</a>
</div>
<div class="col ml-n2">
<a href="#!" class="d-block h6 mb-0">Martin Gray</a><div>
<span class="text-sm text-success">●</span>
<small>Online</small>
</div>
</div>
<div class="col-auto">
<button type="button" class="btn btn-xs btn-secondary btn-icon">
<span class="btn-inner--icon"><i class="far fa-plus"></i></span>
<span class="btn-inner--text">Add</span>
</button>
</div>
</div>
</div>
<div class="list-group-item">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="../../assets/img/theme/light/team-5-800x800.jpg" class="">
</a>
</div>
<div class="col ml-n2">
<a href="#!" class="d-block h6 mb-0">John Snow</a><div>
<span class="text-sm text-success">●</span>
<small>Online</small>
</div>
</div>
<div class="col-auto">
<button type="button" class="btn btn-xs btn-secondary btn-icon">
<span class="btn-inner--icon"><i class="far fa-plus"></i></span>
<span class="btn-inner--text">Add</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>