Bootstrap Modal examples & templates
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 type="button" mdbBtn color="primary" class="waves-light" data-toggle="modal" data-target="#basicExample" (click)="frame.show()"
mdbWavesEffect>
Bottom
</button>
<div mdbModal #frame="mdbModal" class="modal fade top" id="frameModalTop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: 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" mdbBtn color="primary" class="waves-light" mdbWavesEffect>Learn more
<i class="fa fa-book ml-1"></i>
</a>
<a type="button" mdbBtn color="primary" outline="true" class="waves-light" mdbWavesEffect data-dismiss="modal" (click)="frame.hide()">Ok, thanks</a>
</div>
</div>
</div>
<!--/.Content-->
</div>
</div>
Modal Coupon
<button type="button" mdbBtn color="primary" class="waves-light" data-toggle="modal" data-target="#basicExample" (click)="frame.show()"
mdbWavesEffect>
LAUNCH MODAL
</button>
<div mdbModal #frame="mdbModal" class="modal fade top" id="frameModalTop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: 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">
<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" mdbBtn color="success" class="waves-light" mdbWavesEffect>Get it
<i class="fa fa-book ml-1"></i>
</a>
<a type="button" mdbBtn color="success" outline="true" class="waves-light" mdbWavesEffect data-dismiss="modal" (click)="frame.hide()">Ok, thanks</a>
</div>
</div>
</div>
<!--/.Content-->
</div>
</div>
Modal Discount
<button type="button" mdbBtn color="primary" class="waves-light" data-toggle="modal" data-target="#basicExample" (click)="frame.show()"
mdbWavesEffect>Launch Modal</button>
<div mdbModal #frame="mdbModal" class="modal fade right" id="frameModalTop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: 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" (click)="frame.hide()">
<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/product/angular-bootstrap-pro/" mdbBtn color="danger" class="waves-effect" mdbWavesEffect>Get it now
<i class="fa fa-diamond ml-1"></i>
</a>
<a type="button" mdbBtn color="danger" outline="true" class="waves-effect" mdbWavesEffect data-dismiss="modal" (click)="frame.hide()">No, thanks</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
Modal Related content
Related article
.jpg)
My travel to paradise
Lorem ipsum dolor sit amet consectetur adipisicing elit [...]
<button type="button" mdbBtn color="primary" class="waves-light" data-toggle="modal" data-target="#basicExample" (click)="frame.show()"
mdbWavesEffect>Launch Modal</button>
<div mdbModal #frame="mdbModal" class="modal fade right" id="frameModalTop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: true}">
<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" (click)="frame.hide()">
<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" mdbBtn color="primary" class="waves-light" mdbWavesEffect>Read more</button>
</div>
</div>
</div>
</div>
<!--/.Content-->
</div>
</div>
Modal Abandoned cart
<button type="button" mdbBtn color="primary" class="waves-light" data-toggle="modal" data-target="#basicExample" (click)="frame.show()"
mdbWavesEffect>Launch Modal</button>
<div mdbModal #frame="mdbModal" class="modal fade right" id="frameModalTop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: true}">
<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" (click)="frame.hide()">
<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" mdbBtn color="primary" class="waves-effect" mdbWavesEffect>Go to cart</a>
<a type="button" mdbBtn color="primary" outline="true" class="waves-effect" mdbWavesEffect data-dismiss="modal" (click)="frame.hide()">Cancel</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
Modal Confirm delete
<button type="button" mdbBtn color="primary" class="waves-light" data-toggle="modal" data-target="#basicExample" (click)="frame.show()"
mdbWavesEffect>Launch Modal</button>
<div mdbModal #frame="mdbModal" class="modal fade top" id="frameModalTop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
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="https://mdbootstrap.com/product/angular-bootstrap-pro/" mdbBtn color="danger" outline="true" class="waves-effect"
mdbWavesEffect>Yes</a>
<a type="button" mdbBtn color="danger" class="waves-effect" mdbWavesEffect data-dismiss="modal" (click)="frame.hide()">No</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
Modal Poll MDB Pro component
<button type="button" mdbBtn color="primary" class="waves-light" data-toggle="modal" data-target="#basicExample" (click)="frame.show()"
mdbWavesEffect>Launch Modal</button>
<div mdbModal #frame="mdbModal" class="modal fade right" id="frameModalTop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: true}">
<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" (click)="frame.hide()">
<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-179" value="option1" mdbInputDirective>
<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" mdbInputDirective>
<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" mdbInputDirective>
<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" mdbInputDirective>
<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" mdbInputDirective>
<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" mdbInputDirective></textarea>
<label for="form79textarea">Your message</label>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<a type="button" mdbBtn color="primary" class="waves-light" mdbWavesEffect>Send
<i class="fa fa-paper-plane ml-1"></i>
</a>
<a type="button" mdbBtn color="primary" outline="true" class="waves-effect" data-dismiss="modal" mdbWavesEffect (click)="frame.hide()">Cancel</a>
</div>
</div>
</div>
</div>
Modal Cart
<button type="button" mdbBtn color="primary" class="waves-light" data-toggle="modal" data-target="#basicExample" (click)="frame.show()"
mdbWavesEffect>Launch Modal</button>
<div mdbModal #frame="mdbModal" class="modal fade" id="frameModalTop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
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" (click)="frame.hide()">
<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" mdbBtn color="primary" outline="true" class="waves-light" mdbWavesEffect data-dismiss="modal" (click)="frame.hide()">Close</button>
<button mdbBtn color="primary" class="waves-light" mdbWavesEffect>Checkout</button>
</div>
</div>
</div>
</div>
Modal Push
<button type="button" mdbBtn color="primary" class="waves-light" data-toggle="modal" data-target="#basicExample" (click)="frame.show()"
mdbWavesEffect>Launch Modal</button>
<div mdbModal #frame="mdbModal" class="modal fade" id="frameModalTop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
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/product/angular-bootstrap-pro/" mdbBtn color="primary" class="waves-light" mdbWavesEffect>Yes</a>
<a type="button" mdbBtn color="primary" outline="true" class="waves-light" mdbWavesEffect data-dismiss="modal" (click)="frame.hide()">No</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
Modal YouTube MDB Pro component
<button type="button" mdbBtn color="primary" class="waves-light" data-toggle="modal" data-target="#basicExample" (click)="frame.show()"
mdbWavesEffect>Launch Modal</button>
<div mdbModal #frame="mdbModal" class="modal fade" id="frameModalTop" 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" mdbBtn floating="true" size="sm" class="btn-fb waves-light" mdbWavesEffect>
<i class="fa fa-facebook"></i>
</a>
<!--Twitter-->
<a type="button" mdbBtn floating="true" size="sm" class="btn-tw waves-light" mdbWavesEffect>
<i class="fa fa-twitter"></i>
</a>
<!--Google +-->
<a type="button" mdbBtn floating="true" size="sm" class="btn-gplus waves-light" mdbWavesEffect>
<i class="fa fa-google-plus"></i>
</a>
<!--Linkedin-->
<a type="button" mdbBtn floating="true" size="sm" class="btn-ins waves-light" mdbWavesEffect>
<i class="fa fa-linkedin"></i>
</a>
</div>
<button type="button" mdbBtn color="primary" outline="true" rounded="true" class="ml-4 waves-light" mdbWavesEffect data-dismiss="modal"
(click)="frame.hide()">Close</button>
</div>
</div>
<!--/.Content-->
</div>
</div>
Modal Vimeo MDB Pro component
<button type="button" mdbBtn color="primary" class="waves-light" data-toggle="modal" data-target="#basicExample" (click)="frame.show()"
mdbWavesEffect>Launch Modal</button>
<div mdbModal #frame="mdbModal" class="modal fade" id="frameModalTop" 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" mdbBtn floating="true" size="sm" class="btn-fb waves-light" mdbWavesEffect>
<i class="fa fa-facebook"></i>
</a>
<!--Twitter-->
<a type="button" mdbBtn floating="true" size="sm" class="btn-tw waves-light" mdbWavesEffect>
<i class="fa fa-twitter"></i>
</a>
<!--Google +-->
<a type="button" mdbBtn floating="true" size="sm" class="btn-gplus waves-light" mdbWavesEffect>
<i class="fa fa-google-plus"></i>
</a>
<!--Linkedin-->
<a type="button" mdbBtn floating="true" size="sm" class="btn-ins waves-light" mdbWavesEffect>
<i class="fa fa-linkedin"></i>
</a>
</div>
<button type="button" mdbBtn color="primary" outline="true" class="ml-4 waves-light" mdbWavesEffect data-dismiss="modal"
(click)="frame.hide()">Close</button>
</div>
</div>
<!--/.Content-->
</div>
</div>
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.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'product-modal',
templateUrl: './product-modal.component.html',
styleUrls: ['./product-modal.component.scss'],
})
export class ProductModalComponent implements OnInit {
colorSelect: Array;
sizeSelect: Array;
public itemsList: Object[] = [
{
title: 'Description',
description: 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.'
},
{
title: 'Details',
description: 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.'
},
{
title: 'Shipping',
description: 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.'
}
];
ngOnInit() {
this.colorSelect = [
{ value: 'Black', label: 'Black' },
{ value: 'White', label: 'White' },
{ value: 'Red', label: 'Red' },
];
this.sizeSelect = [
{ value: 'XS', label: 'XS' },
{ value: 'S', label: 'S' },
{ value: 'L', label: 'L' },
];
}
}
Modal Social share MDB Pro component
<button type="button" mdbBtn color="primary" class="waves-light" data-toggle="modal" data-target="#basicExample" (click)="frame.show()"
mdbWavesEffect>Launch Modal</button>
<div mdbModal #frame="mdbModal" class="modal fade" id="frameModalTop" 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" (click)="frame.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body mb-0 text-center">
<!--Facebook-->
<a type="button" mdbBtn floating="true" class="btn-fb waves-light" mdbWavesEffect>
<i class="fa fa-facebook"></i>
</a>
<!--Twitter-->
<a type="button" mdbBtn floating="true" class="btn-tw waves-light" mdbWavesEffect>
<i class="fa fa-twitter"></i>
</a>
<!--Google +-->
<a type="button" mdbBtn floating="true" class="btn-gplus waves-light" mdbWavesEffect>
<i class="fa fa-google-plus"></i>
</a>
<!--Linkedin-->
<a type="button" mdbBtn floating="true" class="btn-li waves-light" mdbWavesEffect>
<i class="fa fa-linkedin"></i>
</a>
<!--Instagram-->
<a type="button" mdbBtn floating="true" class="btn-ins waves-light" mdbWavesEffect>
<i class="fa fa-instagram"></i>
</a>
<!--Pinterest-->
<a type="button" mdbBtn floating="true" class="btn-pin waves-light" mdbWavesEffect>
<i class="fa fa-pinterest"></i>
</a>
<!--Youtube-->
<a type="button" mdbBtn floating="true" class="btn-yt waves-light" mdbWavesEffect>
<i class="fa fa-youtube"></i>
</a>
<!--Dribbble-->
<a type="button" mdbBtn floating="true" class="btn-dribbble waves-light" mdbWavesEffect>
<i class="fa fa-dribbble"></i>
</a>
<!--Vkontakte-->
<a type="button" mdbBtn floating="true" class="btn-vk waves-light" mdbWavesEffect>
<i class="fa fa-vk"></i>
</a>
<!--Stack Overflow-->
<a type="button" mdbBtn floating="true" class="btn-so waves-light" mdbWavesEffect>
<i class="fa fa-stack-overflow"></i>
</a>
<!--Slack-->
<a type="button" mdbBtn floating="true" class="btn-slack waves-light" mdbWavesEffect>
<i class="fa fa-slack"></i>
</a>
<!--Github-->
<a type="button" mdbBtn floating="true" class="btn-git waves-light" mdbWavesEffect>
<i class="fa fa-github"></i>
</a>
<!--Comments-->
<a type="button" mdbBtn floating="true" class="btn-comm waves-light" mdbWavesEffect>
<i class="fa fa-comments"></i>
</a>
<!--Email-->
<a type="button" mdbBtn floating="true" class="btn-email waves-light" mdbWavesEffect>
<i class="fa fa-envelope"></i>
</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
API Reference:
In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.
API Reference for MDB Angular Modals:
// MDB Angular Pro
import { ModalModule, WavesModule, InputsModule, ButtonsModule } from 'ng-uikit-pro-standard'// MDB Angular Free
import { ModalModule, WavesModule, InputsModule, ButtonsModule } from 'angular-bootstrap-md'// Only for Product Modal
import { AccordionModule, CarouselModule } from 'angular-bootstrap-md'