Modal examples & templates
Bootstrap Modal examples & templates
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident optio voluptas hic nesciunt, nulla voluptatum labore aliquid quia repudiandae molestias ducimus aut assumenda rerum suscipit consequatur quam odio facere at.
If you want to learn about advanced usage of Modals, read our free tutorial Creating Automated web application .
See also: Modal Core Documentation, Modal Forms and Modal Styles.
Click buttons below to launch modals demo
.jpg)
.jpg)
.jpg)
Modal Cookies
<!-- Button trigger modal-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalCookie1">Cookies</button>
<!--Modal: modalCookie-->
<div class="modal fade top" id="modalCookie1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true" data-backdrop="false">
<div class="modal-dialog modal-frame modal-top modal-notify modal-info" role="document">
<!--Content-->
<div class="modal-content">
<!--Body-->
<div class="modal-body">
<div class="row d-flex justify-content-center align-items-center">
<p class="pt-3 pr-2">We use cookies to improve your website experience</p>
<a type="button" class="btn btn-primary">Learn more <i class="fa fa-book ml-1"></i></a>
<a type="button" class="btn btn-outline-primary waves-effect" data-dismiss="modal">Ok, thanks</a>
</div>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: modalCookie-->
Modal Coupon
<!--Section: Live preview-->
<section>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalCoupon">Launch modal</button>
<div class="modal-dialog modal-frame modal-top modal-notify modal-success" role="document" style="max-width: 100%;">
<!--Content-->
<div class="modal-content">
<!--Body-->
<div class="modal-body">
<div class="row d-flex justify-content-center align-items-center">
<h2>
<span class="badge">v52gs1</span>
</h2>
<p class="pt-3 mx-4">We have a gift for you! Use this code to get a
<strong>10% discount</strong>.</p>
<a type="button" class="btn btn-success">Get it
<i class="fa fa-book ml-1 white-text"></i>
</a>
<a type="button" class="btn btn-outline-success waves-effect" data-dismiss="modal">No, thanks</a>
</div>
</div>
</div>
<!--/.Content-->
</div>
</section>
<!--Section: Live preview-->
Modal Discount
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalDiscount">Launch modal</button>
<div class="modal-dialog modal-side modal-bottom-right modal-notify modal-danger" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading">Discount offer:
<strong>10% off</strong>
</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="row">
<div class="col-3">
<p></p>
<p class="text-center">
<i class="fa fa-gift fa-4x"></i>
</p>
</div>
<div class="col-9">
<p>Sharing is caring. Therefore, from time to time we like to give our visitors small gifts. Today is
one
of those days.</p>
<p>
<strong>Copy the following code and use it at the checkout. It's valid for
<u>one day</u>.</strong>
</p>
<h2>
<span class="badge">v52gs1</span>
</h2>
</div>
</div>
</div>
<!--Footer-->
<div class="modal-footer flex-center">
<a href="https://mdbootstrap.com/products/jquery-ui-kit/" class="btn btn-danger">Get
it now
<i class="fa fa-diamond ml-1 white-text"></i>
</a>
<a type="button" class="btn btn-outline-danger waves-effect" data-dismiss="modal">No, thanks</a>
</div>
</div>
<!--/.Content-->
</div>
Modal Related content
Related article
.jpg)
My travel to paradise
Lorem ipsum dolor sit amet consectetur adipisicing elit [...]
<!-- Button trigger modal-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalRelatedContent">Launch
modal</button>
<!--Modal: modalRelatedContent-->
<div class="modal fade right" id="modalRelatedContent" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true" data-backdrop="false">
<div class="modal-dialog modal-side modal-bottom-right modal-notify modal-info" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading">Related article</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="row">
<div class="col-5">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(55).jpg" class="img-fluid"
alt="">
</div>
<div class="col-7">
<p><strong>My travel to paradise</strong></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit [...]</p>
<button type="button" class="btn btn-primary btn-md">Read more</button>
</div>
</div>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: modalRelatedContent-->
Modal Abandoned cart
<!-- Button trigger modal-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalAbandonedCart">Launch
modal</button>
<!-- Modal: modalAbandonedCart-->
<div class="modal fade right" id="modalAbandonedCart" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true" data-backdrop="false">
<div class="modal-dialog modal-side modal-bottom-right modal-notify modal-info" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading">Product in the cart
</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="row">
<div class="col-3">
<p></p>
<p class="text-center"><i class="fa fa-shopping-cart fa-4x"></i></p>
</div>
<div class="col-9">
<p>Do you need more time to make a purchase decision?</p>
<p>No pressure, your product will be waiting for you in the cart.</p>
</div>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<a type="button" class="btn btn-primary">Go to cart</a>
<a type="button" class="btn btn-outline-primary waves-effect" data-dismiss="modal">Cancel</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Modal: modalAbandonedCart-->
Modal Confirm delete
<!-- Button trigger modal-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalConfirmDelete">Launch
modal</button>
<!--Modal: modalConfirmDelete-->
<div class="modal fade" id="modalConfirmDelete" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-sm modal-notify modal-danger" role="document">
<!--Content-->
<div class="modal-content text-center">
<!--Header-->
<div class="modal-header d-flex justify-content-center">
<p class="heading">Are you sure?</p>
</div>
<!--Body-->
<div class="modal-body">
<i class="fa fa-times fa-4x animated rotateIn"></i>
</div>
<!--Footer-->
<div class="modal-footer flex-center">
<a href="" class="btn btn-outline-danger">Yes</a>
<a type="button" class="btn btn-danger waves-effect" data-dismiss="modal">No</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: modalConfirmDelete-->
Modal Poll
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalPoll">Launch modal</button>
<div class="modal-dialog modal-full-height modal-right modal-notify modal-info" role="document">
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading lead">Feedback request
</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="text-center">
<i class="fa fa-file-text-o fa-4x mb-3 animated rotateIn"></i>
<p>
<strong>Your opinion matters</strong>
</p>
<p>Have some ideas how to improve our product?
<strong>Give us your feedback.</strong>
</p>
</div>
<hr>
<!-- Radio -->
<p class="text-center">
<strong>Your rating</strong>
</p>
<div class="form-check mb-4">
<input class="form-check-input" name="group1" type="radio" id="radio-17" value="option1" checked>
<label class="form-check-label" for="radio-17">Very good</label>
</div>
<div class="form-check mb-4">
<input class="form-check-input" name="group1" type="radio" id="radio-27" value="option2">
<label class="form-check-label" for="radio-27">Good</label>
</div>
<div class="form-check mb-4">
<input class="form-check-input" name="group1" type="radio" id="radio-37" value="option3">
<label class="form-check-label" for="radio-37">Mediocre</label>
</div>
<div class="form-check mb-4">
<input class="form-check-input" name="group1" type="radio" id="radio-47" value="option4">
<label class="form-check-label" for="radio-47">Bad</label>
</div>
<div class="form-check mb-4">
<input class="form-check-input" name="group1" type="radio" id="radio-57" value="option5">
<label class="form-check-label" for="radio-57">Very bad</label>
</div>
<!-- Radio -->
<p class="text-center">
<strong>What could we improve?</strong>
</p>
<!--Basic textarea-->
<div class="md-form">
<textarea type="text" id="form7textarea" class="md-textarea form-control" rows="3"></textarea>
<label for="form7textarea">Your message</label>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<a type="button" class="btn btn-primary waves-effect waves-light">Send
<i class="fa fa-paper-plane ml-1"></i>
</a>
<a type="button" class="btn btn-outline-primary waves-effect" data-dismiss="modal">Cancel</a>
</div>
</div>
</div>
Modal Cart
<!-- Button trigger modal-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalCart">Launch modal</button>
<!-- Modal: modalCart -->
<div class="modal fade" id="modalCart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Your cart</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Product name</th>
<th>Price</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Product 1</td>
<td>100$</td>
<td><a><i class="fa fa-remove"></i></a></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Product 2</td>
<td>100$</td>
<td><a><i class="fa fa-remove"></i></a></td>
</tr>
<tr>
<th scope="row">3</th>
<td>Product 3</td>
<td>100$</td>
<td><a><i class="fa fa-remove"></i></a></td>
</tr>
<tr>
<th scope="row">4</th>
<td>Product 4</td>
<td>100$</td>
<td><a><i class="fa fa-remove"></i></a></td>
</tr>
<tr class="total">
<th scope="row">5</th>
<td>Total</td>
<td>400$</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<!--Footer-->
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Close</button>
<button class="btn btn-primary">Checkout</button>
</div>
</div>
</div>
</div>
<!-- Modal: modalCart -->
Modal Push
<!-- Button trigger modal-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalPush">Launch modal</button>
<!--Modal: modalPush-->
<div class="modal fade" id="modalPush" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-notify modal-info" role="document">
<!--Content-->
<div class="modal-content text-center">
<!--Header-->
<div class="modal-header d-flex justify-content-center">
<p class="heading">Be always up to date</p>
</div>
<!--Body-->
<div class="modal-body">
<i class="fa fa-bell fa-4x animated rotateIn mb-4"></i>
<p>Do you want to receive the push notification about the newest posts?</p>
</div>
<!--Footer-->
<div class="modal-footer flex-center">
<a href="https://mdbootstrap.com/products/jquery-ui-kit/" class="btn btn-primary ">Yes</a>
<a type="button" class="btn btn-outline-primary waves-effect" data-dismiss="modal">No</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: modalPush-->
Modal YouTube
<!-- Button trigger modal-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalYT">Launch modal</button>
<!--Modal: modalYT-->
<div class="modal fade" id="modalYT" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<!--Content-->
<div class="modal-content">
<!--Body-->
<div class="modal-body mb-0 p-0">
<div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/A3PDXmYoF5U" allowfullscreen></iframe>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center flex-column flex-md-row">
<span class="mr-4">Spread the word!</span>
<div>
<a type="button" class="btn-floating btn-sm btn-fb">
<i class="fa fa-facebook"></i>
</a>
<!--Twitter-->
<a type="button" class="btn-floating btn-sm btn-tw">
<i class="fa fa-twitter"></i>
</a>
<!--Google +-->
<a type="button" class="btn-floating btn-sm btn-gplus">
<i class="fa fa-google-plus"></i>
</a>
<!--Linkedin-->
<a type="button" class="btn-floating btn-sm btn-ins">
<i class="fa fa-linkedin"></i>
</a>
</div>
<button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: modalYT-->
Modal Vimeo
<!-- Button trigger modal-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalVM">Launch modal</button>
<!--Modal: modalVM-->
<div class="modal fade" id="modalVM" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<!--Content-->
<div class="modal-content">
<!--Body-->
<div class="modal-body mb-0 p-0">
<div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
<iframe class="embed-responsive-item" src="https://player.vimeo.com/video/115098447" allowfullscreen></iframe>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center flex-column flex-md-row">
<span class="mr-4">Spread the word!</span>
<div>
<a type="button" class="btn-floating btn-sm btn-fb">
<i class="fa fa-facebook"></i>
</a>
<!--Twitter-->
<a type="button" class="btn-floating btn-sm btn-tw">
<i class="fa fa-twitter"></i>
</a>
<!--Google +-->
<a type="button" class="btn-floating btn-sm btn-gplus">
<i class="fa fa-google-plus"></i>
</a>
<!--Linkedin-->
<a type="button" class="btn-floating btn-sm btn-ins">
<i class="fa fa-linkedin"></i>
</a>
</div>
<button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: modalVM-->
Modal Product MDB Pro component
Product Name
$49
$89
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
wolf moon officia aute,
non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
wolf moon officia aute,
non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
wolf moon officia aute,
non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalQuickView">Launch modal</button>
<!-- Modal: modalQuickView -->
<div class="modal fade" id="modalQuickView" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div class="col-lg-5">
<!--Carousel Wrapper-->
<div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails" data-ride="carousel">
<!--Slides-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(23).jpg"
alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(24).jpg"
alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(25).jpg"
alt="Third slide">
</div>
</div>
<!--/.Slides-->
<!--Controls-->
<a class="carousel-control-prev" href="#carousel-thumb" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-thumb" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
<ol class="carousel-indicators">
<li data-target="#carousel-thumb" data-slide-to="0" class="active"> <img class="d-block" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(23).jpg"
class="img-fluid"></li>
<li data-target="#carousel-thumb" data-slide-to="1"><img class="d-block" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(24).jpg"
class="img-fluid"></li>
<li data-target="#carousel-thumb" data-slide-to="2"><img class="d-block" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(25).jpg"
class="img-fluid"></li>
</ol>
</div>
<!--/.Carousel Wrapper-->
</div>
<div class="col-lg-7">
<h2 class="h2-responsive product-name">
<strong>Product Name</strong>
</h2>
<h4 class="h4-responsive">
<span class="green-text">
<strong>$49</strong>
</span>
<span class="grey-text">
<small>
<s>$89</s>
</small>
</span>
</h4>
<!--Accordion wrapper-->
<div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header" role="tab" id="headingOne1">
<a data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne1" aria-expanded="true"
aria-controls="collapseOne1">
<h5 class="mb-0">
Collapsible Group Item #1 <i class="fa fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<!-- Card body -->
<div id="collapseOne1" class="collapse show" role="tabpanel" aria-labelledby="headingOne1"
data-parent="#accordionEx">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
squid. 3
wolf moon officia aute,
non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<!-- Accordion card -->
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header" role="tab" id="headingTwo2">
<a class="collapsed" data-toggle="collapse" data-parent="#accordionEx" href="#collapseTwo2"
aria-expanded="false" aria-controls="collapseTwo2">
<h5 class="mb-0">
Collapsible Group Item #2 <i class="fa fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<!-- Card body -->
<div id="collapseTwo2" class="collapse" role="tabpanel" aria-labelledby="headingTwo2"
data-parent="#accordionEx">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
squid. 3
wolf moon officia aute,
non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<!-- Accordion card -->
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header" role="tab" id="headingThree3">
<a class="collapsed" data-toggle="collapse" data-parent="#accordionEx" href="#collapseThree3"
aria-expanded="false" aria-controls="collapseThree3">
<h5 class="mb-0">
Collapsible Group Item #3 <i class="fa fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<!-- Card body -->
<div id="collapseThree3" class="collapse" role="tabpanel" aria-labelledby="headingThree3"
data-parent="#accordionEx">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
squid. 3
wolf moon officia aute,
non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<!-- Accordion card -->
</div>
<!-- Accordion wrapper -->
<!-- Add to Cart -->
<div class="card-body">
<div class="row">
<div class="col-md-6">
<select class="md-form mdb-select colorful-select dropdown-primary">
<option value="" disabled selected>Choose your option</option>
<option value="1">White</option>
<option value="2">Black</option>
<option value="3">Pink</option>
</select>
<label>Select color</label>
</div>
<div class="col-md-6">
<select class="md-form mdb-select colorful-select dropdown-primary">
<option value="" disabled selected>Choose your option</option>
<option value="1">XS</option>
<option value="2">S</option>
<option value="3">L</option>
</select>
<label>Select size</label>
</div>
</div>
<div class="text-center">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button class="btn btn-primary">Add to cart
<i class="fa fa-cart-plus ml-2" aria-hidden="true"></i>
</button>
</div>
</div>
<!-- /.Add to Cart -->
</div>
</div>
</div>
</div>
</div>
</div>
// Material Select Initialization
$(document).ready(function() {
$('.mdb-select').materialSelect();
});
Modal Social share
<!-- Button trigger modal-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalSocial">Launch modal</button>
<!--Modal: modalSocial-->
<div class="modal fade" id="modalSocial" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog cascading-modal" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header light-blue darken-3 white-text">
<h4 class="title"><i class="fa fa-users"></i> Spreed the word!</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<!--Body-->
<div class="modal-body mb-0 text-center">
<!--Facebook-->
<a type="button" class="btn-floating btn-fb"><i class="fa fa-facebook"></i></a>
<!--Twitter-->
<a type="button" class="btn-floating btn-tw"><i class="fa fa-twitter"></i></a>
<!--Google +-->
<a type="button" class="btn-floating btn-gplus"><i class="fa fa-google-plus"></i></a>
<!--Linkedin-->
<a type="button" class="btn-floating btn-li"><i class="fa fa-linkedin"></i></a>
<!--Instagram-->
<a type="button" class="btn-floating btn-ins"><i class="fa fa-instagram"></i></a>
<!--Pinterest-->
<a type="button" class="btn-floating btn-pin"><i class="fa fa-pinterest"></i></a>
<!--Youtube-->
<a type="button" class="btn-floating btn-yt"><i class="fa fa-youtube"></i></a>
<!--Dribbble-->
<a type="button" class="btn-floating btn-dribbble"><i class="fa fa-dribbble"></i></a>
<!--Vkontakte-->
<a type="button" class="btn-floating btn-vk"><i class="fa fa-vk"></i></a>
<!--Stack Overflow-->
<a type="button" class="btn-floating btn-so"><i class="fa fa-stack-overflow"></i></a>
<!--Slack-->
<a type="button" class="btn-floating btn-slack"><i class="fa fa-slack"></i></a>
<!--Github-->
<a type="button" class="btn-floating btn-git"><i class="fa fa-github"></i></a>
<!--Comments-->
<a type="button" class="btn-floating btn-comm"><i class="fa fa-comments"></i></a>
<!--Email-->
<a type="button" class="btn-floating btn-email"><i class="fa fa-envelope"></i></a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: modalSocial-->
Getting started : download & setup
Download
All the components and features are part of MDBootstrap package.
MDBootstrap (Material Design for Bootstrap) is a free (MIT Licensed) framework combining Material Design and the newest Bootstrap 4.
Click the button below to go to Download Page, where you can download MDBootstrap package.
MDBootstrap Download MDBootstrap AboutMDB Pro
Using components and features labeled as MDB Pro component requires MDB Pro package.
Click the button below to learn more about MDBbootstrap Pro package
MDBootstrap ProTutorials
If you need additional help to start, use our "5 min Quick Start" or "Full tutorial" resources.
5 min Quick Start Full TutorialCompilation
To reduce a weight of MDBootstrap package, you can compile your own, custom package containing only components and features you need.
Map of dependencies of SCSS files in MDBootstrap:
Legend:
'-->' means 'required'
All free and pro files require files from 'core' catalog
'none' means 'this component doesn't require anything except core files'
A file wrapped by `< >` means that this file make the base component prettier but it isn't necessary for the proper working
All PRO components require 'pro/_variables.scss' file
scss/
|
|-- core/
| |
| |-- bootstrap/
| | |-- _functions.scss
| | |-- _variables.scss
| |
| |-- _colors.scss
| |-- _global.scss
| |-- _helpers.scss
| |-- _masks.scss
| |-- _mixins.scss
| |-- _typography.scss
| |-- _variables.scss
| |-- _waves.scss
|
|-- free/
| |-- _animations-basic.scss --> none
| |-- _animations-extended.scss --> _animations-basic.scss
| |-- _buttons.scss --> none
| |-- _cards.scss --> none <_buttons.scss>
| |-- _dropdowns.scss --> none <_buttons.scss>
| |-- _input-group.scss --> _forms.scss, _buttons.scss, _dropdowns.scss
| |-- _navbars.scss --> none <_buttons.scss, _forms.scss, _input-group.scss>
| |-- _pagination.scss --> none
| |-- _badges.scss --> none
| |-- _modals.scss --> _buttons.scss, _forms.scss (PRO --> _tabs.scss)
| |-- _carousels.scss --> <_buttons.scss>
| |-- _forms.scss --> none
| |-- _msc.scss --> none <_buttons.scss, _forms.scss, _cards.scss>
| |-- _footers.scss none <_buttons.scss> (PRO: )
| |-- _list-group.scss --> none
| |-- _tables.scss --> none (PRO: _material-select.scss, pro/_forms.scss, _checkbox.scss, pro/_buttons.scss, pro/_cards.scss, _pagination.scss, pro/_msc.scss)
| |-- _depreciated.scss
|
|-- pro/
| |
| |-- picker/
| | |-- _default.scss --> none
| | |-- _default-time.scss --> _default.scss, free/_forms.scss, free/_buttons.scss, pro/_buttons.scss, free/_cards.scss
| | |-- _default-date.scss --> _default.scss, free/_forms.scss
| |
| |-- sections/
| | |-- _templates.scss --> _sidenav.scss
| | |-- _social.scss --> free/_cards.scss, free/ _forms.scss, free/_buttons.scss, pro/_buttons.scss,
| | |-- _team.scss --> free/_buttons.scss, pro/_buttons.scss, free/_cards.scss, pro/_cards.scss
| | |-- _testimonials.scss --> free/_carousels.scss, pro/_carousels.scss, free/_buttons.scss, pro/_buttons.scss
| | |-- _magazine.scss --> _badges.scss
| | |-- _pricing.scss --> free/_buttons.scss, pro/_buttons.scss
| | |-- _contacts.scss --> free/_forms.scss, pro/_forms.scss, free/_buttons.scss, pro/_buttons.scss
| |
| |-- _variables.scss
| |-- _buttons.scss --> free/_buttons.scss, pro/_msc.scss, _checkbox.scss, _radio.scss
| |-- _social-buttons.scss --> free/_buttons.scss, pro/_buttons.scss
| |-- _tabs.scss --> _cards.scss
| |-- _cards.scss --> free/_cards.scss <_buttons.scss, _social-buttons.scss>
| |-- _dropdowns.scss --> free/_dropdowns.scss, free/_buttons.scss
| |-- _navbars.scss --> free/_navbars.scss (PRO: )
| |-- _scrollspy.scss --> none
| |-- _lightbox.scss --> none
| |-- _chips.scss --> none
| |-- _msc.scss --> none
| |-- _forms.scss --> none
| |-- _radio.scss --> none
| |-- _checkbox.scss --> none
| |-- _material-select.scss --> none
| |-- _switch.scss --> none
| |-- _file-input.scss --> free/_forms.scss, free/_buttons.scss
| |-- _range.scss --> none
| |-- _input-group.scss --> free/_input-group.scss and the same what free input group, _checkbox.scss, _radio.scss
| |-- _autocomplete.scss --> free/_forms.scss
| |-- _accordion.scss --> pro/_animations.scss, free/_cards.scss
| |-- _parallax.scss --> none
| |-- _sidenav.scss --> free/_forms.scss, pro/_animations.scss, sections/_templates.scss
| |-- _ecommerce.scss --> free/_cards.scss, pro/_cards.scss, free/_buttons.scss, pro/_buttons.scss, pro/_msc.scss
| |-- _carousels.scss --> free/_carousels.scss, free/_cards.scss, free/_buttons.scss
| |-- _steppers.scss --> free/_buttons.scss
| |-- _blog.scss --> none
| |-- _toasts.scss --> free/_buttons.scss
| |-- _animations.scss --> none
| |-- _charts.scss --> none
| |-- _progress.scss --> none
| |-- _scrollbar.scss --> none
| |-- _skins.scss --> none
| |-- _depreciated.scss
|
`-- _custom-skin.scss
`-- _custom-styles.scss
`-- _custom-variables.scss
`-- mdb.scss
Map of dependencies of JavaScript modules in MDBootstrap:
Legend:
'-->' means 'required'
All files require jQuery and bootstrap.js
js/
├── dist/
│ ├── buttons.js
│ ├── cards.js
│ ├── character-counter.js
│ ├── chips.js
│ ├── collapsible.js --> vendor/velocity.js
│ ├── dropdown.js --> Popper.js, jquery.easing.js
│ ├── file-input.js
│ ├── forms-free.js
│ ├── material-select.js --> dropdown.js
│ ├── mdb-autocomplete.js
│ ├── preloading.js
│ ├── range-input.js --> vendor/velocity.js
│ ├── scrolling-navbar.js
│ ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
│ └── smooth-scroll.js
├── _intro-mdb-pro.js
├── modules.js
├── src/
│ ├── buttons.js
│ ├── cards.js
│ ├── character-counter.js
│ ├── chips.js
│ ├── collapsible.js --> vendor/velocity.js
│ ├── dropdown.js --> Popper.js, jquery.easing.js
│ ├── file-input.js
│ ├── forms-free.js
│ ├── material-select.js --> dropdown.js
│ ├── mdb-autocomplete.js
│ ├── preloading.js
│ ├── range-input.js --> vendor/velocity.js
│ ├── scrolling-navbar.js
│ ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
│ └── smooth-scroll.js
└── vendor/
├── addons/
│ ├── datatables.js
│ └── datatables.min.js
├── chart.js
├── enhanced-modals.js
├── hammer.js
├── jarallax.js
├── jarallax-video.js --> vendor/jarallax.js
├── jquery.easing.js
├── jquery.easypiechart.js
├── jquery.hammer.js --> vendor/hammer.js
├── jquery.sticky.js
├── lightbox.js
├── picker-date.js --> vendor/picker.js
├── picker.js
├── picker-time.js --> vendor/picker.js
├── scrollbar.js
├── scrolling-navbar.js
├── toastr.js
├── velocity.js
├── waves.js
└── wow.js
Compilation & Customization tutorial
If you need additional help to compile your custom package, use our Compilation & Customization tutorial
Compilation & Customization tutorialIntegrations with Angular, React or Vue
Apart from standard Bootstrap integration with jQuery, MDBootstrap provides integrations with Angular, React and Vue.
About MDB Angular About MDB React About MDB Vue