Modal
Dialogs for lightboxes, user notifications, or completely custom content.
Modal markup
<!-- Basic modal markup -->
<div class="modal fade" 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 class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body content goes here.</p>
</div>
<div class="modal-footer flex-column flex-sm-row align-items-stretch">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>Tabs and forms
Welcome back
Create an account
<!-- Custom modal markup with tabs, forms and cover image -->
<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content row row-cols-1 row-cols-lg-2 flex-row g-0 overflow-hidden">
<div class="col order-lg-2">
<div class="position-relative d-flex align-items-end h-100 pt-4 px-4 px-sm-5 px-lg-0">
<button type="button" class="btn-close position-absolute top-0 end-0 z-2 mt-3 me-3" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="ratio position-relative z-1" style="--cz-aspect-ratio: calc(1030 / 1032 * 100%)">
<img src="assets/img/account/cover.png" alt="Girl">
</div>
<span class="position-absolute top-0 start-0 w-100 h-100 d-none-dark" style="background: linear-gradient(-90deg, #accbee 0%, #e7f0fd 100%)"></span>
<span class="position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark" style="background: linear-gradient(-90deg, #1b273a 0%, #1f2632 100%)"></span>
</div>
</div>
<div class="col d-flex flex-column order-lg-1">
<div class="modal-header d-block border-0 pt-sm-5 px-sm-5 pb-2">
<ul class="nav nav-tabs mt-sm-n2" role="tablist">
<li class="nav-item" role="presentation">
<button type="button" class="nav-link text-nowrap active" data-bs-toggle="tab" data-bs-target="#signin" role="tab" aria-controls="signin" aria-selected="true">
<i class="ci-log-in fs-base opacity-75 ms-n1 me-2"></i>
Sign in
</button>
</li>
<li class="nav-item" role="presentation">
<button type="button" class="nav-link text-nowrap" data-bs-toggle="tab" data-bs-target="#signup" role="tab" aria-controls="signup" aria-selected="false">
<i class="ci-user fs-base opacity-75 ms-n1 me-2"></i>
Sign up
</button>
</li>
</ul>
</div>
<div class="modal-body tab-content px-sm-5 pb-sm-5">
<div class="tab-pane fade show active" id="signin" role="tabpanel">
<h2 class="h5 mb-4">Welcome back</h2>
<form>
<div class="position-relative mb-4">
<input type="email" class="form-control" placeholder="Email" required>
</div>
<div class="mb-4">
<div class="password-toggle">
<input type="password" class="form-control" placeholder="Password" required>
<label class="password-toggle-button fs-lg" aria-label="Show/hide password">
<input type="checkbox" class="btn-check">
</label>
</div>
</div>
<div class="form-check mb-4">
<input type="checkbox" class="form-check-input" id="remember-30">
<label for="remember-30" class="form-check-label">Remember for 30 days</label>
</div>
<button type="submit" class="btn btn-primary w-100">Sign In</button>
</form>
</div>
<div class="tab-pane fade" id="signup" role="tabpanel">
<h2 class="h5">Create an account</h2>
<form>
<div class="position-relative mb-3">
<label for="register-email" class="form-label">Email</label>
<input type="email" class="form-control" id="register-email" required>
</div>
<div class="mb-4">
<label for="register-password" class="form-label">Password</label>
<div class="password-toggle">
<input type="password" class="form-control" id="register-password" minlength="8" placeholder="Minimum 8 characters" required>
<label class="password-toggle-button fs-lg" aria-label="Show/hide password">
<input type="checkbox" class="btn-check">
</label>
</div>
</div>
<div class="d-flex flex-column gap-2 mb-4">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="save-pass">
<label for="save-pass" class="form-check-label">Save the password</label>
</div>
</div>
<button type="submit" class="btn btn-primary w-100">Create an account</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>Live demo
<!-- 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>