Buy now
Modal
Add dialogs to your site for lightboxes, user notifications, etc.
Modal title
...
Modal title
Modal body text goes here.
Modal title
Modal body text goes here.
Modal title
Modal body text goes here.
Modal title
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 title
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 title
Modal body text goes here.
Modal markup
Modal title
Modal body text goes here.
<!-- Modal markup -->
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="fs-sm">Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary btn-sm">Save changes</button>
</div>
</div>
</div>
</div>// Modal markup
.modal(tabindex="-1", role="dialog")
.modal-dialog(role="document")
.modal-content
.modal-header
h5.modal-title
| Modal title
button(type="button", class="btn-close", data-bs-dismiss="modal", aria-label="Close")
.modal-body
p.fs-sm
| Modal body text goes here.
.modal-footer
button(type="button", class="btn btn-secondary btn-sm", data-bs-dismiss="modal")
| Close
button(type="button", class="btn btn-primary btn-sm")
| Save changes
Tabs and forms
<!-- 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 mb-0" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#signin" data-bs-toggle="tab" role="tab" aria-selected="true">
<i class="ai-unlocked me-2 mt-n1"></i>
Sign in
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#signup"data-bs-toggle="tab" role="tab" aria-selected="false">
<i class="ai-user me-2 mt-n1"></i>
Sign up
</a>
</li>
</ul>
<button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body tab-content py-4">
<form class="tab-pane fade show active" id="signin" autocomplete="off">
<div class="mb-3">
<label for="email1" class="form-label">Email address</label>
<input class="form-control" type="email" id="email1" placeholder="johndoe@example.com">
</label>
<div class="mb-3">
<label for="pass1" class="form-label">Password</label>
<div class="password-toggle">
<input class="form-control" type="password" 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-3 d-flex flex-wrap justify-content-between">
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="remember">
<label class="form-check-label" for="remember">Remember me</label>
</div>
<a class="fs-sm" href="#">Forgot password?</a>
</div>
<button class="btn btn-primary d-block" type="submit">Sign in</button>
</form>
<form class="tab-pane fade" id="signup" autocomplete="off">
<div class="mb-3">
<label for="name" class="form-label">Full name</label>
<input class="form-control" type="text" id="name" placeholder="John Doe">
</div>
<div class="mb-3">
<label for="email2" class="form-label">Email address</label>
<input class="form-control" type="email" id="email2" placeholder="johndoe@example.com">
</div>
<div class="mb-3">
<label for="pass2" class="form-label">Password</label>
<div class="password-toggle">
<input class="form-control" type="password" id="pass2">
<label class="password-toggle-btn">
<input class="password-toggle-check" type="checkbox">
<span class="password-toggle-indicator"></span>
</label>
</div>
</div>
<div class="mb-3">
<label for="pass3" class="form-label">Confirm password</label>
<div class="password-toggle">
<input class="form-control" type="password" id="pass3">
<label class="password-toggle-btn">
<input class="password-toggle-check" type="checkbox">
<span class="password-toggle-indicator"></span>
</label>
</div>
</div>
<button class="btn btn-primary d-block" type="submit">Sign in</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.mb-0
li.nav-item
a(href="#signin", data-bs-toggle="tab", role="tab", aria-selected="true").nav-link.active
i.ai-unlocked.me-2.mt-n1
| Sign in
li.nav-item
a(href="#signup", data-bs-toggle="tab", role="tab", aria-selected="false").nav-link
i.ai-user.me-2.mt-n1
| Sign up
button(type="button", class="btn-close", data-bs-dismiss="modal", aria-label="Close")
.modal-body.tab-content.py-4
form(autocomplete="off")#signin.tab-pane.fade.show.active
.mb-3
label(for="email1").form-label
| Email address
input(type="email", id="email1", placeholder="johndoe@example.com").form-control
.mb-3
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-3.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" class="btn btn-primary d-block") Sign in
form(autocomplete="off")#signup.tab-pane.fade
.mb-3
label(for="name").form-label
| Full name
input(type="text", id="name", placeholder="John Doe").form-control
.mb-3
label(for="email2").form-label
| Email address
input(type="email", id="email2", placeholder="johndoe@example.com").form-control
.mb-3
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-3
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", class="btn btn-primary d-block") Sign in
Live demo
<!-- Make sure the actual modal markup is present on the page and has the right id -->
<!-- Launch small modal -->
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modalSmall">
Small modal
</button>
<!-- Launch default modal -->
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modalDefault">
Default modal
</button>
<!-- Launch large modal -->
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modalLarge">
Large modal
</button>
<!-- Launch extra large modal -->
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modalXL">
Extra large modal
</button>
<!-- Launch long modal -->
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modalLong">
Long modal
</button>
<!-- Launch modal with srolling content -->
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modalScroll">
Srolling content
</button>
<!-- Launch vertically centered modal -->
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modalCentered">
Vertically centered modal
</button>// Make sure the actual modal markup is present on the page and has the right id
// Launch small modal
button(type="button", class="btn btn-outline-secondary", data-bs-toggle="modal", data-bs-target="#modalSmall")
| Small modal
// Launch default modal
button(type="button", class="btn btn-outline-secondary", data-bs-toggle="modal", data-bs-target="#modalDefault")
| Default modal
// Launch large modal
button(type="button", class="btn btn-outline-secondary", data-bs-toggle="modal", data-bs-target="#modalLarge")
| Large modal
// Launch extra large modal
button(type="button", class="btn btn-outline-secondary", data-bs-toggle="modal", data-bs-target="#modalXL")
| Extra large modal
// Launch long modal
button(type="button", class="btn btn-outline-secondary", data-bs-toggle="modal", data-bs-target="#modalLong")
| Long modal
// Launch modal with srolling content
button(type="button", class="btn btn-outline-secondary", data-bs-toggle="modal", data-bs-target="#modalScroll")
| Srolling content
// Launch vertically centered modal
button(type="button", class="btn btn-outline-secondary", data-bs-toggle="modal", data-bs-target="#modalCentered")
| Vertically centered modal