Modal examples & templates
Bootstrap Modal examples & templates
Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5.
While we'll continue to support for the transition period, we encourage you to migrate to
MDB5. We're offering a huge discount on MDB5 PRO to help with your transition,
enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount
Multiple examples and advanced usage. Modal Cookies, Coupon, Discount, Abandoned Card, Related Content, Poll, Cart, Youtube, Product and many more.
If you want to learn about the advanced usage of Modals, read our free tutorial Creating an Automated Web Application .
See also: Modal Core Documentation, Modal Forms, and Modal Styles.
Click the buttons below to launch the modals demos.
.webp)
.webp)
.webp)
Modal Cookies
Cookie consent is a simple, not-invasive popup which displays information about cookies and privacy policy.
<!-- 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="true">
<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="fas 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
With coupon pop-up modal you can offer your users a special coupon code to use it at checkout..
<!--Section: Live preview-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalCoupon">Launch
modal</button>
<!--Modal: modalCoupon-->
<div class="modal fade top" id="modalCoupon" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true" data-backdrop="true">
<div class="modal-dialog modal-frame modal-top modal-notify modal-success" role="document">
<!--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="fas 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>
</div>
<!--Modal: modalCoupon-->
<!--Section: Live preview-->
Modal Discount
Give your users the opportunity to enjoy the special deal you offer in the discount modal
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalDiscount">Launch
modal</button>
<!--Modal: modalDiscount-->
<div class="modal fade right" id="modalDiscount" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true" data-backdrop="true">
<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="fas 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/docs/standard/pro/" class="btn btn-danger">Get it
now
<i class="far fa-gem 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>
</div>
<!--Modal: modalDiscount-->
Modal Related content
Display content of interest to users in a modal.
Related article
.webp)
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).webp"
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-info btn-md">Read more</button>
</div>
</div>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: modalRelatedContent-->
Modal Abandoned cart
Don't let the user forget about the product they left in the shopping cart using abandoned cart modal.
<!-- 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="fas 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-info">Go to cart</a>
<a type="button" class="btn btn-outline-info waves-effect" data-dismiss="modal">Cancel</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Modal: modalAbandonedCart-->
Modal Confirm delete
Allow users to confirm their action one more time before making a final decision.
<!-- 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="fas 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 MDB Pro component
Get feedback on your product from users using the poll modal.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalPoll-1">Launch
modal</button>
<!-- Modal: modalPoll -->
<div class="modal fade right" id="modalPoll-1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true" data-backdrop="false">
<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="far fa-file-alt 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-179" value="option1" checked>
<label class="form-check-label" for="radio-179">Very good</label>
</div>
<div class="form-check mb-4">
<input class="form-check-input" name="group1" type="radio" id="radio-279" value="option2">
<label class="form-check-label" for="radio-279">Good</label>
</div>
<div class="form-check mb-4">
<input class="form-check-input" name="group1" type="radio" id="radio-379" value="option3">
<label class="form-check-label" for="radio-379">Mediocre</label>
</div>
<div class="form-check mb-4">
<input class="form-check-input" name="group1" type="radio" id="radio-479" value="option4">
<label class="form-check-label" for="radio-479">Bad</label>
</div>
<div class="form-check mb-4">
<input class="form-check-input" name="group1" type="radio" id="radio-579" value="option5">
<label class="form-check-label" for="radio-579">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="form79textarea" class="md-textarea form-control" rows="3"></textarea>
<label for="form79textarea">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>
</div>
<!-- Modal: modalPoll -->
Modal Cart
You can preview the shopping cart with products that your customers have added in a modal.
<!-- 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="fas fa-times"></i></a></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Product 2</td>
<td>100$</td>
<td><a><i class="fas fa-times"></i></a></td>
</tr>
<tr>
<th scope="row">3</th>
<td>Product 3</td>
<td>100$</td>
<td><a><i class="fas fa-times"></i></a></td>
</tr>
<tr>
<th scope="row">4</th>
<td>Product 4</td>
<td>100$</td>
<td><a><i class="fas fa-times"></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
Push notifications are one of the most effective ways to inform users about special offers and important events on your website. Display a push modal on users' first visit to your website and allow them to sign up for your list.
<!-- 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="fas 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/docs/standard/pro/" class="btn btn-info">Yes</a>
<a type="button" class="btn btn-outline-info waves-effect" data-dismiss="modal">No</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: modalPush-->
Modal YouTube MDB Pro component
Display youtube videos in a pop-up modal.
<!-- 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="fab fa-facebook-f"></i>
</a>
<!--Twitter-->
<a type="button" class="btn-floating btn-sm btn-tw">
<i class="fab fa-twitter"></i>
</a>
<!--Google +-->
<a type="button" class="btn-floating btn-sm btn-gplus">
<i class="fab fa-google-plus-g"></i>
</a>
<!--Linkedin-->
<a type="button" class="btn-floating btn-sm btn-ins">
<i class="fab fa-linkedin-in"></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 MDB Pro component
Display vimeo videos in a pop-up modal.
<!-- 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="fab fa-facebook-f"></i>
</a>
<!--Twitter-->
<a type="button" class="btn-floating btn-sm btn-tw">
<i class="fab fa-twitter"></i>
</a>
<!--Google +-->
<a type="button" class="btn-floating btn-sm btn-gplus">
<i class="fab fa-google-plus-g"></i>
</a>
<!--Linkedin-->
<a type="button" class="btn-floating btn-sm btn-ins">
<i class="fab fa-linkedin-in"></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
Advanced modal displaying carousels with product photos, description in collapse group and possibility to select specific data via dropdown.
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).webp"
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).webp"
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).webp"
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 src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(23).webp" width="60">
</li>
<li data-target="#carousel-thumb" data-slide-to="1">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(24).webp" width="60">
</li>
<li data-target="#carousel-thumb" data-slide-to="2">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(25).webp" width="60">
</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="fas 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="fas 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="fas 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 class="mdb-main-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 class="mdb-main-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="fas 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 MDB Pro component
Display social media share buttons in the modal.
<!-- 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="fas 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="fab fa-facebook-f"></i></a>
<!--Twitter-->
<a type="button" class="btn-floating btn-tw"><i class="fab fa-twitter"></i></a>
<!--Google +-->
<a type="button" class="btn-floating btn-gplus"><i class="fab fa-google-plus-g"></i></a>
<!--Linkedin-->
<a type="button" class="btn-floating btn-li"><i class="fab fa-linkedin-in"></i></a>
<!--Instagram-->
<a type="button" class="btn-floating btn-ins"><i class="fab fa-instagram"></i></a>
<!--Pinterest-->
<a type="button" class="btn-floating btn-pin"><i class="fab fa-pinterest"></i></a>
<!--Youtube-->
<a type="button" class="btn-floating btn-yt"><i class="fab fa-youtube"></i></a>
<!--Dribbble-->
<a type="button" class="btn-floating btn-dribbble"><i class="fab fa-dribbble"></i></a>
<!--Vkontakte-->
<a type="button" class="btn-floating btn-vk"><i class="fab fa-vk"></i></a>
<!--Stack Overflow-->
<a type="button" class="btn-floating btn-so"><i class="fab fa-stack-overflow"></i></a>
<!--Slack-->
<a type="button" class="btn-floating btn-slack"><i class="fab fa-slack-hash"></i></a>
<!--Github-->
<a type="button" class="btn-floating btn-git"><i class="fab fa-github"></i></a>
<!--Comments-->
<a type="button" class="btn-floating btn-comm"><i class="fas fa-comments"></i></a>
<!--Email-->
<a type="button" class="btn-floating btn-email"><i class="fas fa-envelope"></i></a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: modalSocial-->