Add to Cart Modal
Get the inside scoop on live sports action with instant pop-ups!
Bootstrap Docs
Modal markup
<!-- 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 card-header-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#signin" data-bs-toggle="tab" role="tab" aria-selected="true">
<i class="ci-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="ci-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="[email protected]">
</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 btn-shadow" 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="[email protected]">
</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 btn-shadow" 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.card-header-tabs
li.nav-item
a(href="#signin", data-bs-toggle="tab", role="tab", aria-selected="true").nav-link.active
i.ci-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.ci-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="[email protected]").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 btn-shadow") 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="[email protected]").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 btn-shadow") 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