Modal
Use Bootstrap’s modal plugin with our custom styles to add dialogs to your site for notifications or completely custom content. Bootstrap docs
Cookie
Cookie
Cookie Policy
We use cookies to personalize content to make our site easier for you to use.
<a href="#" class="btn btn-primary rounded-pill mx-1 mb-2 mb-md-0" data-bs-toggle="modal" data-bs-target="#modal-01">Cookie</a>
<div class="modal fade modal-bottom-center" id="modal-01" tabindex="-1">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-body p-6">
<div class="row">
<div class="col-md-12 col-lg-8 mb-4 mb-lg-0 my-auto align-items-center">
<h4 class="mb-2">Cookie Policy</h4>
<p class="mb-0">We use cookies to personalize content to make our site easier for you to use.</p>
</div>
<!--/column -->
<div class="col-md-5 col-lg-4 text-lg-end my-auto">
<a href="#" class="btn btn-primary rounded-pill" data-bs-dismiss="modal" aria-label="Close">I Understand</a>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/.modal-body -->
</div>
<!--/.modal-content -->
</div>
<!--/.modal-dialog -->
</div>
<!--/.modal -->Subscription
Subscription
Join the mailing list and get %10 off
Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla.
<a href="#" class="btn btn-primary rounded-pill mx-1 mb-2 mb-md-0" data-bs-toggle="modal" data-bs-target="#modal-02">Subscription</a>
<div class="modal fade" id="modal-02" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-md">
<div class="modal-content text-center">
<div class="modal-body">
<button class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="row">
<div class="col-md-10 offset-md-1">
<figure class="mb-6"><nuxt-img src="/assets/img/illustrations/i7.png" srcset="/assets/img/illustrations/i7@2x.png 2x" alt="" /></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<h3>Join the mailing list and get %10 off</h3>
<p class="mb-6">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla.</p>
<div class="newsletter-wrapper">
<div class="row">
<div class="col-md-10 offset-md-1">
<!-- Begin Mailchimp Signup Form -->
<div id="mc_embed_signup">
<form action="https://elemisfreebies.us20.list-manage.com/subscribe/post?u=aa4947f70a475ce162057838d&id=b49ef47a9a" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group input-group form-floating">
<input type="email" value="" name="EMAIL" class="required email form-control" placeholder="Email Address" id="mce-EMAIL">
<label for="mce-EMAIL">Email Address</label>
<input type="submit" value="Join" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_ddc180777a163e0f9f66ee014_4b1bcfa0bc" tabindex="-1" value=""></div>
<div class="clear"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
</div>
<!-- /.newsletter-wrapper -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/.modal-body -->
</div>
<!--/.modal-content -->
</div>
<!--/.modal-dialog -->
</div>
<!--/.modal -->Sign In
<a href="#" class="btn btn-primary rounded-pill mx-1 mb-2 mb-md-0" data-bs-toggle="modal" data-bs-target="#modal-signin">Sign In</a>
<div class="modal fade" id="modal-signin" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content text-center">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<h2 class="mb-3 text-start">Welcome Back</h2>
<p class="lead mb-6 text-start">Fill your email and password to sign in.</p>
<form class="text-start mb-3">
<div class="form-floating mb-4">
<input type="email" class="form-control" placeholder="Email" id="loginEmail">
<label for="loginEmail">Email</label>
</div>
<div class="form-floating password-field mb-4">
<input type="password" class="form-control" placeholder="Password" id="loginPassword">
<span class="password-toggle"><i class="uil uil-eye"></i></span>
<label for="loginPassword">Password</label>
</div>
<a class="btn btn-primary rounded-pill btn-login w-100 mb-2">Sign In</a>
</form>
<!-- /form -->
<p class="mb-1"><a href="#" class="hover">Forgot Password?</a></p>
<p class="mb-0">Don't have an account? <a href="#" data-bs-target="#modal-signup" data-bs-toggle="modal" data-bs-dismiss="modal" class="hover">Sign up</a></p>
<div class="divider-icon my-4">or</div>
<nav class="nav social justify-content-center text-center">
<a href="#" class="btn btn-circle btn-sm btn-google"><i class="uil uil-google"></i></a>
<a href="#" class="btn btn-circle btn-sm btn-facebook-f"><i class="uil uil-facebook-f"></i></a>
<a href="#" class="btn btn-circle btn-sm btn-twitter"><i class="uil uil-twitter"></i></a>
</nav>
<!--/.social -->
</div>
<!--/.modal-content -->
</div>
<!--/.modal-body -->
</div>
<!--/.modal-dialog -->
</div>
<!--/.modal -->Sign Up
<a href="#" class="btn btn-primary rounded-pill mx-1 mb-2 mb-md-0" data-bs-toggle="modal" data-bs-target="#modal-signup">Sign Up</a>
<div class="modal fade" id="modal-signup" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content text-center">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<h2 class="mb-3 text-start">Sign up to Sandbox</h2>
<p class="lead mb-6 text-start">Registration takes less than a minute.</p>
<form class="text-start mb-3">
<div class="form-floating mb-4">
<input type="text" class="form-control" placeholder="Name" id="loginName">
<label for="loginName">Name</label>
</div>
<div class="form-floating mb-4">
<input type="email" class="form-control" placeholder="Email" id="loginEmail">
<label for="loginEmail">Email</label>
</div>
<div class="form-floating password-field mb-4">
<input type="password" class="form-control" placeholder="Password" id="loginPassword">
<span class="password-toggle"><i class="uil uil-eye"></i></span>
<label for="loginPassword">Password</label>
</div>
<div class="form-floating password-field mb-4">
<input type="password" class="form-control" placeholder="Confirm Password" id="loginPasswordConfirm">
<span class="password-toggle"><i class="uil uil-eye"></i></span>
<label for="loginPasswordConfirm">Confirm Password</label>
</div>
<a class="btn btn-primary rounded-pill btn-login w-100 mb-2">Sign Up</a>
</form>
<!-- /form -->
<p class="mb-0">Already have an account? <a href="#" data-bs-target="#modal-signin" data-bs-toggle="modal" data-bs-dismiss="modal" class="hover">Sign in</a></p>
<div class="divider-icon my-4">or</div>
<nav class="nav social justify-content-center text-center">
<a href="#" class="btn btn-circle btn-sm btn-google"><i class="uil uil-google"></i></a>
<a href="#" class="btn btn-circle btn-sm btn-facebook-f"><i class="uil uil-facebook-f"></i></a>
<a href="#" class="btn btn-circle btn-sm btn-twitter"><i class="uil uil-twitter"></i></a>
</nav>
<!--/.social -->
</div>
<!--/.modal-content -->
</div>
<!--/.modal-body -->
</div>
<!--/.modal-dialog -->
</div>
<!--/.modal -->Popup
To display any modal as a popup on your page, add .modal-popup class to your .modal.
Check out a live example: Demo 12.
<div class="modal fade modal-popup" id="modal-01" tabindex="-1">
...
</div>
<!--/.modal -->Think unique and be creative. Make a difference with Sandbox.
Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.
Buy Sandbox Nuxtjs