Bootstrap Modal
Our Bootstrap modals are lightweight and multi-purpose popups that are built with HTML, CSS, and JavaScript. The three primary sections of a Bootstrap modal are header, body, and footer. Modals are positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead. Use Bootstrap’s JavaScript modal plugin to add dialogues to your site for lightboxes, user notifications, or completely custom content.
Keep reading our Bootstrap Modal examples and learn how to use it.
Example
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary ml-3">Save changes</button>
</div>
</div>
</div>
</div>Variations
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-block btn-primary mb-3" data-toggle="modal" data-target="#modal-default">Default</button>
<div class="modal fade" id="modal-default" tabindex="-1" role="dialog" aria-labelledby="modal-default" aria-hidden="true">
<div class="modal-dialog modal- modal-dialog-centered modal-" role="document">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="modal-title-default">Type your modal title</h6>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-link ml-auto" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-block btn-warning mb-3" data-toggle="modal" data-target="#modal-notification">Notification</button>
<div class="modal fade" id="modal-notification" tabindex="-1" role="dialog" aria-labelledby="modal-notification" aria-hidden="true">
<div class="modal-dialog modal-danger modal-dialog-centered modal-" role="document">
<div class="modal-content bg-gradient-danger">
<div class="modal-header">
<h6 class="modal-title" id="modal-title-notification">Your attention is required</h6>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="py-3 text-center text-white">
<i class="ni ni-bell-55 ni-3x"></i>
<h4 class="heading mt-4">You should read this!</h4>
<p class="text-white">A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white">Ok, Got it</button>
<button type="button" class="btn btn-link text-white ml-auto" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<button class="btn btn-block btn-info mb-3" data-toggle="modal" data-target="#loginModal">
Login
<i class="material-icons ml-3">assignment</i>
</button>
<div class="modal fade" id="loginModal" tabindex="-1" role="">
<div class="modal-dialog modal-login" role="document">
<div class="modal-content">
<div class="card card-signup">
<div class="modal-header">
<div class="card-header card-header-primary text-center">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="material-icons">clear</i>
</button>
<h4 class="card-title">Log in</h4>
<div class="social-line">
<a href="javascript:;" class="btn btn-just-icon btn-link text-white">
<i class="fab fa-facebook-f"></i>
</a>
<a href="javascript:;" class="btn btn-just-icon btn-link text-white">
<i class="fab fa-twitter"></i>
</a>
<a href="javascript:;" class="btn btn-just-icon btn-link text-white">
<i class="fab fa-google"></i>
</a>
</div>
</div>
</div>
<div class="modal-body">
<form class="form" method="" action="">
<p class="description text-center">Or Be Classical</p>
<div class="card-body">
<div class="form-group md-form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="material-icons">face</i>
</div>
</div>
<input type="text" class="form-control" placeholder="First Name...">
</div>
</div>
<div class="form-group md-form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="material-icons">email</i>
</div>
</div>
<input type="text" class="form-control" placeholder="Email...">
</div>
</div>
<div class="form-group md-form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="material-icons">lock_outline</i>
</div>
</div>
<input type="password" placeholder="Password..." class="form-control">
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer justify-content-center">
<a href="javascript:;" class="btn btn-primary btn">Get Started</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>