LOADING

Getting Started

Introduction Source and Credits

Foundation

Support Changelog

Components

Alerts Badge Breadcrumb Buttons New Button group Card Carousel Collapse Dropdowns Hot Forms Jumbotron List group Media object Modal Navigations Pagination PopoversProgress Scrollspy Spinners Hot Tooltips

Section

Pages

Modal

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Default Modal

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Default Modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header bg-gray">
<h5 class="modal-title" id="exampleModalLabel"> DEFAULT MODAL</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled 
</p>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Image Modal

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exaimg">
Modal with image
</button>
<!-- Modal -->
<div class="modal fade" id="exaimg" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="curve">
<div class="modal-header p-0">
<img src="images/s-1.jpg" class="img-fluid" alt="" title="">
</div>
</div>
<div class="modal-body">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled 
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

Form Modal

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Register">
Register form
</button>
<!-- Modal -->
<div class="modal fade" id="Register" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content w-100 border-top-10">
<div class="modal-header border-0 text-center d-block mt-3">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<span><img src="images/noavatar.png" class="rounded-circle mb-2" alt=""></span>
<h3 class="text-uppercase mt-3">Register Yourself</h3>
</div>
<div class="modal-body px-3 mb-3 pt-0">
<!-- Login Form Begin -->
<form>
<div class="form-group">
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-user"></i></div>
</div>
<input type="text" class="form-control form-control-lg" placeholder="User Name">
</div>
</div>
<div class="form-group">
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="far fa-envelope-open"></i></div>
</div>
<input type="email" class="form-control form-control-lg" placeholder="Type Email">
</div>
</div>
<div class="form-group">
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-unlock-alt"></i></div>
</div>
<input type="password" class="form-control form-control-lg" id="exampleInputPassword1" placeholder="********">
</div>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
<div class="form-check mt-3 text-center d-block">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">I agree to the <a href="#">terms and conditions</a></label>
</div>
</form>
<!-- Registration Form End -->
</div>
</div>
</div>
</div>