Add dialogs to your site for lightboxes, user notifications, etc.
<!-- Modal markup -->
<div class="modal" 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 type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer flex-column flex-sm-row">
<button type="button" class="btn btn-secondary w-100 w-sm-auto mb-3 mb-sm-0" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary w-100 w-sm-auto ms-sm-3">Save changes</button>
</div>
</div>
</div>
</div>// Modal markup
.modal(tabindex="-1", role="dialog")
.modal-dialog(role="document")
.modal-content
.modal-header
h4.modal-title Modal title
button(type="button", class="btn-close", data-bs-dismiss="modal", aria-label="Close")
.modal-body
p Modal body text goes here.
.modal-footer.flex-column.flex-sm-row
button(type="button", class="btn btn-secondary w-100 w-sm-auto mb-3 mb-sm-0", data-bs-dismiss="modal")
| Close
button(type="button", class="btn btn-primary w-100 w-sm-auto ms-sm-3")
| Save changes
<!-- Modal with tabs and forms -->
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<ul class="nav nav-tabs flex-nowrap text-nowrap mb-n2" role="tablist">
<li class="nav-item">
<a href="#signin" class="nav-link flex-column flex-sm-row px-3 px-sm-4 active" data-bs-toggle="tab" role="tab" aria-selected="true">
<i class="ai-login me-sm-2 ms-sm-n1"></i>
<span class="d-none d-sm-inline">Sign in</span>
<span class="fs-sm fw-medium d-sm-none pt-1">Sign in</span>
</a>
</li>
<li class="nav-item">
<a href="#signup" class="nav-link flex-column flex-sm-row px-3 px-sm-4" data-bs-toggle="tab" role="tab" aria-selected="false">
<i class="ai-user me-sm-2 ms-sm-n1"></i>
<span class="d-none d-sm-inline">Sign up</span>
<span class="fs-sm fw-medium d-sm-none pt-1">Sign up</span>
</a>
</li>
</ul>
<button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body tab-content">
<form class="tab-pane fade show active mt-n2" id="signin" autocomplete="off">
<div class="mb-3 mb-sm-4">
<label for="email1" class="form-label">Email address</label>
<input type="email" class="form-control" id="email1" placeholder="johndoe@example.com">
</div>
<div class="mb-3 mb-sm-4">
<label for="pass1" class="form-label">Password</label>
<div class="password-toggle">
<input type="password" class="form-control" id="pass1">
<label class="password-toggle-btn">
<input class="password-toggle-check" type="checkbox">
<span class="password-toggle-indicator"></span>
</label>
</div>
</div>
<div class="mb-4 d-flex flex-wrap justify-content-between">
<div class="form-check mb-2">
<input type="checkbox" class="form-check-input" id="remember">
<label for="remember" class="form-check-label">Remember me</label>
</div>
<a href="#" class="fs-sm">Forgot password?</a>
</div>
<button type="submit" class="btn btn-primary w-100">Sign in</button>
</form>
<form class="tab-pane fade" id="signup" autocomplete="off">
<div class="mb-3 mb-sm-4">
<label for="name" class="form-label">Full name</label>
<input type="text" class="form-control" id="name" placeholder="John Doe">
</div>
<div class="mb-3 mb-sm-4">
<label for="email2" class="form-label">Email address</label>
<input type="email" class="form-control" id="email2" placeholder="johndoe@example.com">
</div>
<div class="mb-3 mb-sm-4">
<label for="pass2" class="form-label">Password</label>
<div class="password-toggle">
<input type="password" class="form-control" id="pass2">
<label class="password-toggle-btn">
<input type="checkbox" class="password-toggle-check">
<span class="password-toggle-indicator"></span>
</label>
</div>
</div>
<div class="mb-4">
<label for="pass3" class="form-label">Confirm password</label>
<div class="password-toggle">
<input type="password" class="form-control" id="pass3">
<label class="password-toggle-btn">
<input type="checkbox" class="password-toggle-check">
<span class="password-toggle-indicator"></span>
</label>
</div>
</div>
<button type="submit" class="btn btn-primary w-100">Sign up</button>
</form>
</div>
</div>
</div>
</div>// Modal with tabs and forms
.modal(tabindex="-1", role="dialog")
.modal-dialog(role="document")
.modal-content
.modal-header
ul(role="tablist").nav.nav-tabs.flex-nowrap.text-nowrap.mb-n2
li.nav-item
a(href="#signin", data-bs-toggle="tab", role="tab", aria-selected="true").nav-link.flex-column.flex-sm-row.px-3.px-sm-4.active
i.ai-login.me-sm-2.ms-sm-n1
span.d-none.d-sm-inline Sign in
span.fs-sm.fw-medium.d-sm-none.pt-1 Sign in
li.nav-item
a(href="#signup", data-bs-toggle="tab", role="tab", aria-selected="false").nav-link.flex-column.flex-sm-row.px-3.px-sm-4
i.ai-user.me-sm-2.ms-sm-n1
span.d-none.d-sm-inline Sign up
span.fs-sm.fw-medium.d-sm-none.pt-1 Sign up
button(type="button", class="btn-close", data-bs-dismiss="modal", aria-label="Close")
.modal-body.tab-content
form(autocomplete="off")#signin.tab-pane.fade.show.active.mt-n2
.mb-3.mb-sm-4
label(for="email1").form-label
| Email address
input(type="email", id="email1", placeholder="johndoe@example.com").form-control
.mb-3.mb-sm-4
label(for="pass1").form-label
| Password
.password-toggle
input(type="password" id="pass1").form-control
label.password-toggle-btn
input(type="checkbox").password-toggle-check
span.password-toggle-indicator
.mb-4.d-flex.flex-wrap.justify-content-between
.form-check.mb-2
input(type="checkbox" id="remember").form-check-input
label(for="remember").form-check-label
| Remember me
a(href="#").fs-sm
| Forgot password?
button(type="submit").btn.btn-primary.w-100
| Sign in
form(autocomplete="off")#signup.tab-pane.fade
.mb-3.mb-sm-4
label(for="name").form-label
| Full name
input(type="text", id="name", placeholder="John Doe").form-control
.mb-3.mb-sm-4
label(for="email2").form-label
| Email address
input(type="email", id="email2", placeholder="johndoe@example.com").form-control
.mb-3.mb-sm-4
label(for="pass2").form-label
| Password
.password-toggle
input(type="password", id="pass2").form-control
label.password-toggle-btn
input(type="checkbox").password-toggle-check
span.password-toggle-indicator
.mb-4
label(for="pass3").form-label
| Confirm password
.password-toggle
input(type="password" id="pass3").form-control
label.password-toggle-btn
input(type="checkbox").password-toggle-check
span.password-toggle-indicator
button(type="submit").btn.btn-primary.w-100
| Sign up
<!-- Launch modal button -->
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modalId">
Launch modal
</button>
<!-- Small modal -->
<div class="modal fade" id="modalId" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
...
</div>
</div>
</div>
<!-- Default modal -->
<div class="modal fade" id="modalId" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
...
</div>
</div>
</div>
<!-- Large modal -->
<div class="modal fade" id="modalId" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
...
</div>
</div>
</div>
<!-- Extra large modal -->
<div class="modal fade" id="modalId" tabindex="-1" role="dialog">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
...
</div>
</div>
</div>
<!-- Modal with srolling content -->
<div class="modal fade" id="modalId" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
...
</div>
</div>
</div>
<!-- Vertically centered modal -->
<div class="modal fade" id="modalId" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
...
</div>
</div>
</div>
<!-- Full screen modal -->
<div class="modal fade" id="modalId" tabindex="-1" role="dialog">
<div class="modal-dialog modal-fullscreen" role="document">
<div class="modal-content">
...
</div>
</div>
</div>// Launch modal button
button(type="button", data-bs-toggle="modal", data-bs-target="#modalId").btn.btn-outline-secondary
| Launch modal
// Small modal
div(tabindex="-1", role="dialog")#modalId.modal.fade
div(role="document").modal-dialog.modal-sm
div.modal-content
| ...
// Default modal
div(tabindex="-1", role="dialog")#modalId.modal.fade
div(role="document").modal-dialog
div.modal-content
| ...
// Large modal
div(tabindex="-1", role="dialog")#modalId.modal.fade
div(role="document").modal-dialog.modal-lg
div.modal-content
| ...
// Extra large modal
div(tabindex="-1", role="dialog")#modalId.modal.fade
div(role="document").modal-dialog.modal-xl
div.modal-content
| ...
// Modal with srolling content
div(tabindex="-1", role="dialog")#modalId.modal.fade
div(role="document").modal-dialog.modal-dialog-scrollable
div.modal-content
| ...
// Vertically centered modal
div(tabindex="-1", role="dialog")#modalId.modal.fade
div(role="document").modal-dialog.modal-dialog-centered
div.modal-content
| ...
// Full screen modal
div(tabindex="-1", role="dialog")#modalId.modal.fade
div(role="document").modal-dialog.modal-fullscreen
div.modal-content
| ...