Demo
FD Bootstrap Components
Visual guide of components in the newest Bootstrap 4 and Fluent Design
Cards
Basic card
.jpg)
NEW
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Call to actionPersonal card
Jim Trump
UX Designer
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est, deserunt.
- Ellsworth , ME
- 123 456 789
- exmaple@exmaple.com
Features card
Lorem, ipsum.
Lorem, ipsum.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere facilis ullam est velit corporis corrupti nisi dolore soluta fugit provident!
- Lorem ipsum dolor sit.
- Lorem ipsum dolor sit.
- Lorem ipsum dolor sit.
- Lorem ipsum dolor sit.
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view">
<img src="https://mdbootstrap.com/img/Photos/Fluent/img(3).jpg" class="card-img-top" alt="photo">
</div>
<!--Card content-->
<div class="card-body">
<span class="badge badge-secondary my-2">NEW</span>
<!--Title-->
<h4 class="card-title font-weight-bold">Card title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="text-primary">Call to action
<i class="mi mi-ChevronRight"></i>
</a>
</div>
</div>
<!--/.Card-->
<!--Card-->
<div class="card shadow">
<div class="py-3 w-100 pink"></div>
<div class="position-relative h-100">
<div class="h-50 w-100 pink position-absolute text-white text-center">
</div>
<!-- Card image -->
<div class="w-50 mx-auto position-relative ">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/men.jpg" alt="Card image">
</div>
</div>
<!-- Card body -->
<div class="card-body text-center">
<h5 class="card-title pt-2 pb-0 mb-2">Jim Trump</h5>
<p class="card-subtitle">UX Designer</p>
<!-- Text -->
<p class="card-text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est, deserunt.
</p>
<ul class="clear">
<li class="d-flex justify-content-between">
<i class="mi mi-MapPin2"></i>
<span>Ellsworth , ME</span>
</li>
<li class="d-flex justify-content-between">
<i class="mi mi-Phone"></i>
<span>123 456 789</span>
</li>
<li class="d-flex justify-content-between">
<i class="mi mi-Mail"></i>
<span>exmaple@exmaple.com</span>
</li>
</ul>
</div>
<div class="card-footer bg-transparent d-flex justify-content-between">
<a href="#">
<i class="mi mi-instagram" style="color:#BF0077;"></i>
</a>
<a href="#">
<i class="mi mi-dribbble" style="color:#E3008C;"></i>
</a>
<a href="#">
<i class="mi mi-vimeo" style="color:#0078D7;"></i>
</a>
<a href="#">
<i class="mi mi-reddit-alien" style="color:#EF6950;"></i>
</a>
</div>
</div>
<!--/.Card-->
<!--Card-->
<div class="card shadow-lg text-center">
<span class="mi mi-5x mi-facebook py-4 text-light bg-primary"></span>
<div class="card-body bg-light">
<h4 class="card-title pt-0">Lorem, ipsum.</h4>
<p class="card-subtitle">Lorem, ipsum.</p>
<hr class="border-dark w-25">
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere facilis ullam est velit corporis corrupti nisi
dolore soluta fugit provident!</p>
<ul class="mi-ul pl-4 text-left">
<li>
<i class="mi-li mi mi-DeviceLaptopNoPic"></i>Lorem ipsum dolor sit.</li>
<li>
<i class="mi-li mi mi-telegram"></i>Lorem ipsum dolor sit.</li>
<li>
<i class="mi-li mi mi-Phone"></i>Lorem ipsum dolor sit.</li>
<li>
<i class="mi-li mi mi-MobAirplane"></i>Lorem ipsum dolor sit.</li>
</ul>
</div>
</div>
<!--/.Card-->
Product card
.jpg)
WORKSPACE
HEALTH
COMFORT
About blogs and more
by @SomeOne
20/06/2018 in Somewhere
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas.
Call to actionProduct card v.2
.jpg)
Amazing set
With that set, you will learn new amazing skills.
- Everything white and black
- More ram
- Better graphic card
- Wireless headphones
- Unforgettable impressions
Available in five different colors
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view">
<img src="https://mdbootstrap.com/img/Photos/Fluent/img(9).jpg" class="card-img-top" alt="photo">
</div>
<!--Card content-->
<div class="card-body elegant-color">
<span class="badge badge-primary p-2 my-1">WORKSPACE</span>
<span class="badge badge-warning p-2 my-1 text-white">HEALTH</span>
<span class="badge badge-danger p-2 my-1">COMFORT</span>
<!--Title-->
<h4 class="card-title font-weight-bold mb-2">About blogs and more</h4>
<p class="card-subtitle">by @SomeOne</p>
<p class="mt-1">
<small>20/06/2018 in
<a href="#">Somewhere</a>
</small>
</p>
<!--Text-->
<p class="card-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas.</p>
<a href="#" class="text-primary">Call to action
<i class="mi mi-ChevronRight"></i>
</a>
</div>
<div class="card-footer bg-transparent d-flex justify-content-around">
<span class="text-muted">
<i class="mi mi-Comment"></i>121</span>
<span class="text-muted">
<i class="mi mi-facebook"></i>66</span>
<span class="text-muted">
<i class="mi mi-twitter"></i>19</span>
</div>
</div>
<!--/.Card-->
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view">
<img src="https://mdbootstrap.com/img/Photos/Fluent/img(8).jpg" class="card-img-top" alt="photo">
</div>
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title font-weight-bold mb-2">Amazing set</h4>
<i class="mi mi-FavoriteLegacy text-danger"></i>
<i class="mi mi-FavoriteLegacy text-danger"></i>
<i class="mi mi-FavoriteLegacy text-danger"></i>
<i class="mi mi-FavoriteLegacy text-danger"></i>
<i class="mi mi-HalfStarLeft text-danger"></i>
<!--Text-->
<p class="card-text">With that set, you will learn new amazing skills. </p>
<ul>
<li>
<i class="mi mi-CheckMarkLegacy text-primary"></i>Everything white and black</li>
<li>
<i class="mi mi-CheckMarkLegacy text-primary"></i>More ram</li>
<li>
<i class="mi mi-CheckMarkLegacy text-primary"></i>Better graphic card</li>
<li>
<i class="mi mi-CheckMarkLegacy text-primary"></i>Wireless headphones</li>
<li>
<i class="mi mi-CheckMarkLegacy text-primary"></i>Unforgettable impressions</li>
</ul>
<p class="card-text">
Available in five different colors
<span style="width:10px;height:10px" class="d-inline-block rounded-circle bg-default"></span>
<span style="width:10px;height:10px" class="d-inline-block rounded-circle bg-primary"></span>
<span style="width:10px;height:10px" class="d-inline-block rounded-circle bg-secondary"></span>
<span style="width:10px;height:10px" class="d-inline-block rounded-circle bg-dark"></span>
<span style="width:10px;height:10px" class="d-inline-block rounded-circle bg-danger"></span>
</p>
<div class="text-right">
<button class="btn btn-block btn-primary">
Buy now
<i class="mi mi-ChevronRight"></i>
</button>
</div>
</div>
<div class="card-footer bg-transparent d-flex justify-content-between">
<span>Now
<strong class="font-weight-bold">75% off</strong>
</span>
<div>
<del class="text-muted mr-2">$300</del>
<strong class="text-primary font-weight-bold">$75</strong>
</div>
</div>
</div>
<!--/.Card-->
<!--Card-->
<div class="card">
<div class="card-header bg-transparent d-flex justify-content-between text-muted">
<small>02/06/2018</small>
<div>
<i class="mi mi-twitter ml-2"></i>
<i class="mi mi-pinterest-p ml-2"></i>
<i class="mi mi-facebook"></i>
</div>
</div>
<div class="embed-responsive embed-responsive-16by9 ">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/jgpJVI3tDbY" data-src="https://www.youtube.com/embed/jgpJVI3tDbY"
allowfullscreen=""></iframe>
</div>
<div class="card-body">
<!-- Card body -->
<h4 class="card-title pt-1 mt-0">The Best of Classical Music </h4>
<p class="card-subtitle">by @Muzyka Instrumentalna
</p>
<p class="card-text">Classical Music Piano Playlist Mix.</p>
<ul class="clear my-2">
<li>
<a href="#">0:00</a> - Mozart</li>
<li>
<a href="#">1:00</a> - Beethoven</li>
<li>
<a href="#">2:07</a> - Bach</li>
<li>
<a href="#">3:05</a> - Chopin</li>
</ul>
</div>
<div class="card-footer bg-transparent d-flex justify-content-between text-muted">
<span>67 695 660 views</span>
<div>
<i class="mi mi-ChevronUp text-success"></i> 393k
<i class="mi mi-ChevronDown text-danger ml-2"></i> 18k
</div>
</div>
</div>
<!--/.Card-->
Card group
.jpg)
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
.jpg)
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
<!-- Card group -->
<div class="card-group">
<!-- Card -->
<div class="card mb-4">
<!-- Card image -->
<div class="view overlay">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Fluent/img(2).jpg" alt="Card image">
<a href="#!">
<div class=""></div>
</a>
</div>
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title">Card title</h4>
<!-- Text -->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<!-- Button -->
<button type="button" class="btn btn-primary btn-md">Read more</button>
</div>
<!-- Card content -->
</div>
<!-- Card -->
<!-- Card -->
<div class="card mb-4">
<!-- Card image -->
<div class="view overlay">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Fluent/img(5).jpg" alt="Card image">
<a href="#!">
<div class=""></div>
</a>
</div>
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title">Card title</h4>
<!-- Text -->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<!-- Button -->
<button type="button" class="btn btn-primary btn-md">Read more</button>
</div>
<!-- Card content -->
</div>
<!-- Card -->
<!-- Card -->
<div class="card mb-4">
<!-- Card image -->
<div class="view overlay">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Fluent/img(3).jpg" alt="Card image">
<a href="#!">
<div class=""></div>
</a>
</div>
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title">Card title</h4>
<!-- Text -->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<!-- Button -->
<button type="button" class="btn btn-primary btn-md">Read more</button>
</div>
<!-- Card content -->
</div>
<!-- Card -->
</div>
<!-- Card group -->
Card deck
.jpg)
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
.jpg)
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
.jpg)
<!-- Card deck -->
<div class="card-deck">
<!-- Card -->
<div class="card mb-4">
<!--Card image-->
<div class="view overlay">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Fluent/img(1).jpg" alt="Card image cap">
<a href="#!">
<div class=""></div>
</a>
</div>
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">Card title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Read more</button>
</div>
</div>
<!-- Card -->
<!-- Card -->
<div class="card mb-4">
<!--Card image-->
<div class="view overlay">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Fluent/img(13).jpg" alt="Card image cap">
<a href="#!">
<div class=""></div>
</a>
</div>
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">Card title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Read more</button>
</div>
</div>
<!-- Card -->
<!-- Card -->
<div class="card mb-4">
<!--Card image-->
<div class="view overlay">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Fluent/img(12).jpg" alt="Card image">
<a href="#!">
<div class=""></div>
</a>
</div>
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">Card title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Read more</button>
</div>
</div>
<!-- Card -->
</div>
<!-- Card deck -->
Card columns
<!-- Card columns -->
<div class="card-columns">
<!-- Card -->
<div class="card shadow mb-4">
<!-- Card img -->
<img class="card-img" src="https://mdbootstrap.com/img/Photos/Others/images/12.jpg" alt="Card image">
<!-- Card img-overlay -->
<div class="card-img-overlay p-3 text-white" style="background-color:rgba(0,0,0,.45)">
<!-- Title -->
<h4 class="card-title">Lorem, ipsum.</h4>
<!-- Subtitle -->
<p class="card-subtitle">Lorem, ipsum dolor.</p>
<!-- Text-->
<p class="card-text d-block d-md-none d-lg-block">Lorem ipsum dolor sit amet..</p>
<!-- Link -->
<a href="#" class="card-link">
Download
<i class="mi mi-ChevronRight"></i>
</a>
</div>
<!-- Card img-overlay -->
</div>
<!-- Card -->
<!-- Card -->
<div class="card shadow mb-4">
<!-- Card img -->
<img class="card-img" src="https://mdbootstrap.com/img/Photos/Others/images/11.jpg" alt="Card image">
<!-- Card img-overlay -->
<div class="card-img-overlay p-3 text-white" style="background-color:rgba(0,0,0,.45)">
<!-- Title -->
<h4 class="card-title">Lorem, ipsum.</h4>
<!-- Subtitle -->
<p class="card-subtitle">Lorem, ipsum dolor.</p>
<!-- Text-->
<p class="card-text d-block d-md-none d-lg-block">Lorem ipsum dolor sit amet..</p>
<a href="#" class="card-link">
Download
<i class="mi mi-ChevronRight"></i>
</a>
</div>
<!-- Card img-overlay -->
</div>
<!-- Card -->
<!-- Card -->
<div class="card shadow mb-4">
<!-- Card img -->
<img class="card-img" src="https://mdbootstrap.com/img/Photos/Others/images/13.jpg" alt="Card image">
<!-- Card img-overlay -->
<div class="card-img-overlay p-3 text-white" style="background-color:rgba(0,0,0,.45)">
<!-- Title -->
<h4 class="card-title">Lorem, ipsum.</h4>
<!-- Subtitle -->
<p class="card-subtitle">Lorem, ipsum dolor.</p>
<!-- Text-->
<p class="card-text d-block d-md-none d-lg-block">Lorem ipsum dolor sit amet..</p>
<!-- Link -->
<a href="#" class="card-link">
Download
<i class="mi mi-ChevronRight"></i>
</a>
</div>
<!-- Card img-overlay -->
</div>
<!-- Card -->
<!-- Card -->
<div class="card shadow mb-4">
<!-- Card img -->
<img class="card-img" src="https://mdbootstrap.com/img/Photos/Others/images/14.jpg" alt="Card image">
<!-- Card img-overlay -->
<div class="card-img-overlay p-3 text-white" style="background-color:rgba(0,0,0,.45)">
<!-- Title -->
<h4 class="card-title">Lorem, ipsum.</h4>
<!-- Subtitle -->
<p class="card-subtitle">Lorem, ipsum dolor.</p>
<!-- Text-->
<p class="card-text d-block d-md-none d-lg-block">Lorem ipsum dolor sit amet..</p>
<!-- Link -->
<a href="#" class="card-link">
Download
<i class="mi mi-ChevronRight"></i>
</a>
</div>
<!-- Card img-overlay -->
</div>
<!-- Card -->
<!-- Card -->
<div class="card shadow mb-4">
<!-- Card img -->
<img class="card-img" src="https://mdbootstrap.com/img/Photos/Others/images/16.jpg" alt="Card image">
<!-- Card img-overlay -->
<div class="card-img-overlay p-3 text-white" style="background-color:rgba(0,0,0,.45)">
<!-- Title -->
<h4 class="card-title">Lorem, ipsum.</h4>
<!-- Subtitle -->
<p class="card-subtitle">Lorem, ipsum dolor.</p>
<!-- Text-->
<p class="card-text d-block d-md-none d-lg-block">Lorem ipsum dolor sit amet..</p>
<!-- Link -->
<a href="#" class="card-link">
Download
<i class="mi mi-ChevronRight"></i>
</a>
</div>
<!-- Card img-overlay -->
</div>
<!-- Card -->
<!-- Card -->
<div class="card shadow mb-4">
<!-- Card img -->
<img class="card-img" src="https://mdbootstrap.com/img/Photos/Others/images/17.jpg" alt="Card image">
<!-- Card img-overlay -->
<div class="card-img-overlay p-3 text-white" style="background-color:rgba(0,0,0,.45)">
<!-- Title -->
<h4 class="card-title">Lorem, ipsum.</h4>
<!-- Subtitle -->
<p class="card-subtitle">Lorem, ipsum dolor.</p>
<!-- Text-->
<p class="card-text d-block d-md-none d-lg-block">Lorem ipsum dolor sit amet..</p>
<!-- Link -->
<a href="#" class="card-link">
Download
<i class="mi mi-ChevronRight"></i>
</a>
</div>
<!-- Card img-overlay -->
</div>
<!-- Card -->
<!-- Card -->
<div class="card shadow mb-4">
<!-- Card img -->
<img class="card-img" src="https://mdbootstrap.com/img/Photos/Others/images/25.jpg" alt="Card image">
<!-- Card img-overlay -->
<div class="card-img-overlay p-3 text-white" style="background-color:rgba(0,0,0,.45)">
<!-- Title -->
<h4 class="card-title">Lorem, ipsum.</h4>
<!-- Subtitle -->
<p class="card-subtitle">Lorem, ipsum dolor.</p>
<!-- Text-->
<p class="card-text d-block d-md-none d-lg-block">Lorem ipsum dolor sit amet..</p>
<!-- Link -->
<a href="#" class="card-link">
Download
<i class="mi mi-ChevronRight"></i>
</a>
</div>
<!-- Card img-overlay -->
</div>
<!-- Card -->
<!-- Card -->
<div class="card shadow mb-4">
<!-- Card img -->
<img class="card-img" src="https://mdbootstrap.com/img/Photos/Others/images/84.jpg" alt="Card image">
<!-- Card img-overlay -->
<div class="card-img-overlay p-3 text-white" style="background-color:rgba(0,0,0,.45)">
<!-- Title -->
<h4 class="card-title">Lorem, ipsum.</h4>
<!-- Subtitle -->
<p class="card-subtitle">Lorem, ipsum dolor.</p>
<!-- Text-->
<p class="card-text d-block d-md-none d-lg-block">Lorem ipsum dolor sit amet..</p>
<!-- Link -->
<a href="#" class="card-link">
Download
<i class="mi mi-ChevronRight"></i>
</a>
</div>
<!-- Card img-overlay -->
</div>
<!-- Card -->
<!-- Card -->
<div class="card shadow mb-4">
<!-- Card img -->
<img class="card-img" src="https://mdbootstrap.com/img/Photos/Others/images/27.jpg" alt="Card image">
<!-- Card img-overlay -->
<div class="card-img-overlay p-3 text-white" style="background-color:rgba(0,0,0,.45)">
<!-- Title -->
<h4 class="card-title">Lorem, ipsum.</h4>
<!-- Subtitle -->
<p class="card-subtitle">Lorem, ipsum dolor.</p>
<!-- Text-->
<p class="card-text d-block d-md-none d-lg-block">Lorem ipsum dolor sit amet..</p>
<!-- Link -->
<a href="#" class="card-link">
Download
<i class="mi mi-ChevronRight"></i>
</a>
</div>
<!-- Card img-overlay -->
</div>
<!-- Card -->
</div>
<!-- Card columns -->
Tables
Basic table
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<!-- Basic Table -->
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<!-- Basic Table -->
Table head
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Striped rows
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Bordered table
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Borderless table
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-borderless">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Hoverable rows
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Small table
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-sm">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Captions
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table">
<caption>List of users</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Always responsive
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
Breakpoint specific
| # | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell |
| # | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell |
| # | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell |
| # | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell |
<div class="table-responsive-sm">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive-md">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive-lg">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive-xl">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
</div>
Inputs
<!-- Default input -->
<label for="exampleForm2">Default input</label>
<input type="text" id="exampleForm2" class="form-control">
<!-- Placeholder input -->
<label for="inputPlaceholderEx">Placeholder</label>
<input placeholder="Placeholder" type="text" id="inputPlaceholderEx" class="form-control">
<!-- Textarea -->
<label for="exampleFormControlTextarea1">Textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
<!-- Password input -->
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
<!-- Default input -->
<label for="inputDisabledEx2" class="disabled">Example label</label>
<input type="text" id="inputDisabledEx2" class="form-control" disabled>
Checkboxes
Radios
<div class="form-check pl-0">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Default checkbox
</label>
</div>
<div class="form-check pl-0">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
<label class="form-check-label" for="defaultCheck2">
Disabled checkbox
</label>
</div>
<div class="form-check pl-0">
<input class="form-check-input with-gap-blue" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">
Default radio
</label>
</div>
<div class="form-check pl-0">
<input class="form-check-input with-gap-blue" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Second default radio
</label>
</div>
<div class="form-check pl-0">
<input class="form-check-input with-gap-blue" type="radio" name="exampleRadios" id="exampleRadios4" value="option">
<label class="form-check-label" for="exampleRadios4">
Third default radio
</label>
</div>
<div class="form-check disabled pl-0">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
<label class="form-check-label" for="exampleRadios3">
Disabled radio
</label>
Footers
Basic footer
<!-- Footer -->
<footer class="page-footer font-small pt-4">
<!-- Footer Links -->
<div class="container-fluid text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-6 mt-md-0 mt-3">
<!-- Content -->
<h5 class="text-uppercase">Footer Content</h5>
<p>Here you can use rows and columns here to organize your footer content.</p>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none pb-3">
<!-- Grid column -->
<div class="col-md-3 mb-md-0 mb-3">
<!-- Links -->
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 mb-md-0 mb-3">
<!-- Links -->
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2018 Copyright:
<a href="https://mdbootstrap.com/bootstrap-tutorial/"> MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
Copyright
<!-- Footer -->
<footer class="page-footer font-small blue">
<!-- Copyright -->
<div class="footer-copyright text-center py-3 text-white-50">© 2018 Copyright:
<a href="https://mdbootstrap.com/bootstrap-tutorial/" class="text-white"> MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
Links
<!-- Footer -->
<footer class="page-footer font-small bg-secondary">
<!-- Footer Links -->
<div class="container text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Very long link 1</a>
</li>
<li>
<a href="#!">Very long link 2</a>
</li>
<li>
<a href="#!">Very long link 3</a>
</li>
<li>
<a href="#!">Very long link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2018 Copyright:
<a href="https://mdbootstrap.com/bootstrap-tutorial/"> MDBootstrap.com</a>
<!-- Copyright -->
</footer>
<!-- Footer -->
Text
<!-- Footer -->
<footer class="page-footer font-small dark-purple text-white pt-4">
<!-- Footer Text -->
<div class="container-fluid text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-6 mt-md-0 mt-3">
<!-- Content -->
<h5 class="text-uppercase font-weight-bold">Footer text 1</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita sapiente sint, nulla, nihil repudiandae
commodi voluptatibus corrupti animi sequi aliquid magnam debitis, maxime quam recusandae harum
esse fugiat. Itaque, culpa?</p>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none pb-3">
<!-- Grid column -->
<div class="col-md-6 mb-md-0 mb-3 ">
<!-- Content -->
<h5 class="text-uppercase font-weight-bold">Footer text 2</h5>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio deserunt fuga perferendis modi earum
commodi aperiam temporibus quod nulla nesciunt aliquid debitis ullam omnis quos ipsam, aspernatur
id excepturi hic.
</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Text -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3 light-purple text-white-50">© 2018 Copyright:
<a href="https://mdbootstrap.com/bootstrap-tutorial/" class="text-white"> MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
Forms
<!-- Footer -->
<footer class="page-footer font-small pt-4 dark-blue">
<!-- Footer Elements -->
<div class="container">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-6 mb-4">
<!-- Form -->
<input class="form-control form-control-sm mr-3" type="text" placeholder="Search" aria-label="Search">
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6 mb-4">
<!-- Form -->
<input placeholder="Your email" type="email" id="exampleForm6" class="form-control">
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-12 text-center mb-4">
<!-- Send -->
<button class="btn btn-secondary">Send</button>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Elements -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3 blue text-white-50">© 2018 Copyright:
<a href="https://mdbootstrap.com/bootstrap-tutorial/" class="text-white"> MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
Images
<!-- Footer -->
<footer class="page-footer font-small mdb-color lighten-3 pt-4">
<!-- Footer Elements -->
<div class="container">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-2 col-md-12 mb-4">
<!--Image-->
<div class="view overlay z-depth-1-half">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(73).jpg" class="img-fluid" alt="">
<a href="">
<div class="mask rgba-white-light"></div>
</a>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-2 col-md-6 mb-4">
<!--Image-->
<div class="view overlay z-depth-1-half">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(78).jpg" class="img-fluid" alt="">
<a href="">
<div class="mask rgba-white-light"></div>
</a>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-2 col-md-6 mb-4">
<!--Image-->
<div class="view overlay z-depth-1-half">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(79).jpg" class="img-fluid" alt="">
<a href="">
<div class="mask rgba-white-light"></div>
</a>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-2 col-md-12 mb-4">
<!--Image-->
<div class="view overlay z-depth-1-half">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(81).jpg" class="img-fluid" alt="">
<a href="">
<div class="mask rgba-white-light"></div>
</a>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-2 col-md-6 mb-4">
<!--Image-->
<div class="view overlay z-depth-1-half">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(82).jpg" class="img-fluid" alt="">
<a href="">
<div class="mask rgba-white-light"></div>
</a>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-2 col-md-6 mb-4">
<!--Image-->
<div class="view overlay z-depth-1-half">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(84).jpg" class="img-fluid" alt="">
<a href="">
<div class="mask rgba-white-light"></div>
</a>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- Footer Elements -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2018 Copyright:
<a href="https://mdbootstrap.com/bootstrap-tutorial/"> MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
Video
<!-- Footer -->
<footer class="page-footer font-small mdb-color darken-3 pt-4">
<!-- Footer Elements -->
<div class="container">
<!--Grid row-->
<div class="row d-flex justify-content-center">
<!--Grid column-->
<div class="col-md-6">
<!-- Video -->
<div class="embed-responsive embed-responsive-16by9 mb-4">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/vlDzYIIOYmM" allowfullscreen></iframe>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- Footer Elements -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2018 Copyright:
<a href="https://mdbootstrap.com/bootstrap-tutorial/"> MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
Icons
<!-- Footer -->
<footer class="page-footer font-small cyan darken-3">
<!-- Footer Elements -->
<div class="container">
<!-- Grid row-->
<div class="row">
<!-- Grid column -->
<div class="col-md-12 py-5">
<div class="mb-5 flex-center">
<!-- Facebook -->
<a class="fb-ic">
<i class="mi mi-facebook mi-2x text-white mr-md-5 mr-3"> </i>
</a>
<!-- Twitter -->
<a class="tw-ic">
<i class="mi mi-twitter mi-2x text-white mr-md-5 mr-3"> </i>
</a>
<!-- Google +-->
<a class="gplus-ic">
<i class="mi mi-google-plus mi-2x text-white mr-md-5 mr-3"> </i>
</a>
<!--Linkedin -->
<a class="li-ic">
<i class="mi mi-linkedin mi-2x text-white mr-md-5 mr-3"> </i>
</a>
<!--Instagram-->
<a class="ins-ic">
<i class="mi mi-instagram mi-2x text-white mr-md-5 mr-3"> </i>
</a>
<!--Pinterest-->
<a class="pin-ic">
<i class="mi mi-pinterest-p mi-2x text-white"> </i>
</a>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row-->
</div>
<!-- Footer Elements -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3 text-white-50">© 2018 Copyright:
<a href="https://mdbootstrap.com/bootstrap-tutorial/" class="text-white"> MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
Badges
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
<h2 class="h1 mb-3">Example heading
<span class="badge badge-success">New</span>
</h2>
<h2 class="h2 mb-3">Example heading
<span class="badge badge-success">New</span>
</h2>
<h3 class="h3 mb-3">Example heading
<span class="badge badge-success">New</span>
</h3>
<h4 class="h4 mb-3">Example heading
<span class="badge badge-success">New</span>
</h4>
<h5 class="h5 mb-3">Example heading
<span class="badge badge-success">New</span>
</h5>
<h6 class="h6">Example heading
<span class="badge badge-success">New</span>
</h6>
Primary
Secondary
Default
Success
Danger
Warning
Info
Light
Dark
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-default">Default</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
Progress
Basic progress bars
<div class="progress progress-fluent my-3">
<div class="progress-bar" role="progressbar" style="width: 0;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-fluent my-3">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-fluent my-3">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-fluent my-3">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-fluent my-3">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Circle
Primary color
Default color
Secondary color
Succes color
Danger color
Warning color
Info color
<p class="m-3 font-italic">Primary color</p>
<div class="progress-cover progress-cover-primary">
<div class="progress progress-medium fluent-position">
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
</div>
</div>
<p class="m-3 font-italic">Default color</p>
<div class="progress-cover progress-cover-default">
<div class="progress progress-medium fluent-position">
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
</div>
</div>
<p class="m-3 font-italic">Secondary color</p>
<div class="progress-cover progress-cover-secondary">
<div class="progress progress-medium fluent-position">
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
</div>
</div>
<p class="m-3 font-italic">Succes color</p>
<div class="progress-cover progress-cover-success">
<div class="progress progress-medium fluent-position">
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
</div>
</div>
<p class="m-3 font-italic">Danger color</p>
<div class="progress-cover progress-cover-danger">
<div class="progress progress-medium fluent-position">
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
</div>
</div>
<p class="m-3 font-italic">Warning color</p>
<div class="progress-cover progress-cover-warning">
<div class="progress progress-medium fluent-position">
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
</div>
</div>
<p class="m-3 font-italic">Info color</p>
<div class="progress-cover progress-cover-info">
<div class="progress progress-medium fluent-position">
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
</div>
</div>
Line
Primary color
Default color
Secondary color
Success color
Danger color
Warning color
Info color
<p class="m-3 font-italic">Primary color</p>
<div class="progress-cover">
<div class="progress-fluent-line progress-primary progress-medium">
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
</div>
</div>
<p class="m-3 font-italic">Default color</p>
<div class="progress-cover">
<div class="progress-fluent-line progress-default progress-medium">
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
</div>
</div>
<p class="m-3 font-italic">Secondary color</p>
<div class="progress-cover">
<div class="progress-fluent-line progress-secondary progress-medium">
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
</div>
</div>
<p class="m-3 font-italic">Success color</p>
<div class="progress-cover">
<div class="progress-fluent-line progress-success progress-medium">
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
</div>
</div>
<p class="m-3 font-italic">Danger color</p>
<div class="progress-cover">
<div class="progress-fluent-line progress-danger progress-medium">
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
</div>
</div>
<p class="m-3 font-italic">Warning color</p>
<div class="progress-cover">
<div class="progress-fluent-line progress-warning progress-medium">
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
</div>
</div>
<p class="m-3 font-italic">Info color</p>
<div class="progress-cover">
<div class="progress-fluent-line progress-info progress-medium">
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
<span class="progress-span"></span>
</div>
</div>
Colors palette
#FFB900 warning-color
#FF8C00 amber
#F7630C orange
#CA5010 chocolate
#DA3B01 deep-orange
#EF6950 salmon
#D13438 dark-coral
#FF4343 coral
#E74856 crimson
#E81123 red
#EA005E pink
#C30052 medium-violet
#E3008C megent
#BF0077 dark-pink
#C239B3 orchid
#9A0089 purple
#0078D7 blue
#0063B1 dark-blue
#8E8CD8 light-violet
6B69D6 slate-blue
#8764B8 light-purple
#744DA9 dark-purple
#B146C2 medium-orchid
#881798 dark-orchid
#0099BC cyan
#2D7D9A steel-blue
#00B7C3 turquoise
#038387 teal
#00B294 light-sea
#018574 dark-cyan
#00CC6A green
#10893E forest-green
#7A7574 dimgrey
#5D5A58 dark-dimgrey
#68768A bluegrey
#515C6B dark-bluegrey
#567C73 slate-grey
#486860 green-grey
#498205 grass-green
#107C10 dark-green
#767676 grey
#4C4A48 dark-grey
#69797E steel
#4A5459 dark-steel
#647C64 olive
#525E54 dark-olive
#847545 sandy
#7E735F earth
primary
secondary
default
info
success
warning
danger
Tabs
Basic tabs
First title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?
Second title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?
Third title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?
<ul class="nav nav-tabs fluent-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<h2>First title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis
nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?</p>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<h2>Second title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis
nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?</p>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<h2>Third title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis
nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?</p>
</div>
</div>
Disabled item
First title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?
Second title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?
Third title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?
<ul class="nav nav-tabs fluent-tabs" id="exampleTabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="exampleHome" data-toggle="tab" href="#linkHome" role="tab" aria-controls="linkHome" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="exampleProfile" data-toggle="tab" href="#linkProfile" role="tab" aria-controls="linkProfile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" id="exampleDisabled" data-toggle="tab" role="tab" aria-selected="false">Disabled</a>
</li>
<li class="nav-item">
<a class="nav-link" id="exampleContact" data-toggle="tab" href="#linkContact" role="tab" aria-controls="linkContact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="exampleTabsContent">
<div class="tab-pane fade show active" id="linkHome" role="tabpanel" aria-labelledby="exampleHome">
<h2>First title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis
nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?</p>
</div>
<div class="tab-pane fade" id="linkProfile" role="tabpanel" aria-labelledby="exampleProfile">
<h2>Second title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis
nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?</p>
</div>
<div class="tab-pane fade" id="linkContact" role="tabpanel" aria-labelledby="exampleContact">
<h2>Third title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis
nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?</p>
</div>
</div>
Fill
First title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?
Second title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?
Third title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?
<ul class="nav nav-tabs nav-fill fluent-tabs" id="exampleTabsFill" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="exampleHomeFill" data-toggle="tab" href="#linkHomeFill" role="tab" aria-controls="linkHomeFill"
aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="exampleProfileFill" data-toggle="tab" href="#linkProfileFill" role="tab" aria-controls="linkProfileFill"
aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="exampleContactFill" data-toggle="tab" href="#linkContactFill" role="tab" aria-controls="linkContactFill"
aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="exampleTabsContentFill">
<div class="tab-pane fade show active" id="linkHomeFill" role="tabpanel" aria-labelledby="exampleHomeFill">
<h2>First title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis
nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?</p>
</div>
<div class="tab-pane fade" id="linkProfileFill" role="tabpanel" aria-labelledby="exampleProfileFill">
<h2>Second title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis
nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?</p>
</div>
<div class="tab-pane fade" id="linkContactFill" role="tabpanel" aria-labelledby="exampleContactFill">
<h2>Third title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis
nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?</p>
</div>
</div>
Justify
First title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?
Second title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?
Third title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?
Fourth title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?
<ul class="nav nav-tabs nav-justified fluent-tabs" id="exampleTabsJustify" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="exampleHomeJustify" data-toggle="tab" href="#linkHomeJustify" role="tab" aria-controls="linkHomeJustify"
aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="exampleProfileJustify" data-toggle="tab" href="#linkProfileJustify" role="tab" aria-controls="linkProfileJustify"
aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="exampleTestimonialsJustify" data-toggle="tab" href="#linkTestimonialsJustify" role="tab" aria-controls="linkTestimonialsJustify"
aria-selected="false">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link" id="exampleContactJustify" data-toggle="tab" href="#linkContactJustify" role="tab" aria-controls="linkContactJustify"
aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="exampleTabsContentJustify">
<div class="tab-pane fade show active" id="linkHomeJustify" role="tabpanel" aria-labelledby="exampleHomeJustify">
<h2>First title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis
nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?</p>
</div>
<div class="tab-pane fade" id="linkProfileJustify" role="tabpanel" aria-labelledby="exampleProfileJustify">
<h2>Second title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis
nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?</p>
</div>
<div class="tab-pane fade" id="linkTestimonialsJustify" role="tabpanel" aria-labelledby="exampleTestimonialsJustify">
<h2>Third title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis
nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?</p>
</div>
<div class="tab-pane fade" id="linkContactJustify" role="tabpanel" aria-labelledby="exampleContactJustify">
<h2>Fourth title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis
nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?</p>
</div>
</div>
Carousels
Slides only
.jpg)
.jpg)
.jpg)
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Fluent/img(16).jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Fluent/img(10).jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Fluent/img(15).jpg" alt="Third slide">
</div>
</div>
</div>
With controls
.jpg)
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Fluent/img(1).jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Fluent/img(11).jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Fluent/img(12).jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
With indicators
.jpg)
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Fluent/img(13).jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Fluent/img(16).jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Fluent/img(14).jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
With captions
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Fluent/img(15).jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5 class="font-weight-bold">First slide label</h5>
<p>
<strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong>
</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Fluent/img(1).jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5 class="font-weight-bold">Second slide label</h5>
<p>
<strong>Deserunt, magnam dolorum minus quidem molestiae dolorem.</strong>
</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Fluent/img(11).jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5 class="font-weight-bold">Third slide label</h5>
<p>
<strong>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</strong>
</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Crossfade
<div id="carouselExampleCrossfade" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Fluent/img(10).jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Fluent/img(16).jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Fluent/img(13).jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCrossfade" 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="#carouselExampleCrossfade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Collapse
Basic collapse
Click the buttons below to show and hide another element via class changes.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica,
craft beer labore wes anderson cred nesciunt sapiente ea proident.
<!-- Collapse buttons -->
<div class="mt-2">
<a class="btn btn-primary mr-1" data-toggle="collapse" href="#collapseExample12" aria-expanded="false" aria-controls="collapseExample12">
Link with href
</a>
<button class="btn btn-primary ml-1" type="button" data-toggle="collapse" data-target="#collapseExample12" aria-expanded="false"
aria-controls="collapseExample12">
Button with data-target
</button>
</div>
<!-- Collapse buttons -->
<!-- Collapsible element -->
<div class="collapse" id="collapseExample12">
<div class="m-3">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica,
craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
<!-- Collapsible element -->
Multiple target
A button or a can show and hide multiple elements by referencing them with a JQuery selector in its href or data-target attribute. Multiple button> or a can show and hide an element if they each reference it with their href or data-target attribute.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica,
craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica,
craft beer labore wes anderson cred nesciunt sapiente ea proident.
<!-- Collapse buttons -->
<div>
<a class="btn btn-primary m-1" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary m-1" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false"
aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary m-1" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false"
aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</div>
<!--/ Collapse buttons -->
<!-- Collapsible content -->
<div class="row mt-4">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica,
craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica,
craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
</div>
<!--/ Collapsible content -->
Alerts
Basic alerts
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple secondary alert—check it out!
A simple info alert—check it out!
A simple success alert—check it out!
A simple warning alert—check it out!
A simple danger alert—check it out!
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
<div class="alert alert-default" role="alert">
A simple secondary alert—check it out!
</div>
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
</div>
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>
Links
A simple primary alert with a link. Give it a click if you like.
Click me
A simple secondary alert with a link. Give it a click if you like.
Click me
A simple default alert with a link. Give it a click if you like.
Click me
A simple info alert with a link. Give it a click if you like.
Click me
A simple success alert with a link. Give it a click if you like.
Click me
A simple warning alert with a link. Give it a click if you like.
Click me
A simple danger alert with a link. Give it a click if you like.
Click me
<div class="alert alert-primary" role="alert">
A simple primary alert with a link. Give it a click if you like.
<a href="#!" class="alert-link float-right">Click me</a>
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert with a link. Give it a click if you like.
<a href="#!" class="alert-link float-right">Click me</a>
</div>
<div class="alert alert-default" role="alert">
A simple default alert with a link. Give it a click if you like.
<a href="#!" class="alert-link float-right">Click me</a>
</div>
<div class="alert alert-info" role="alert">
A simple info alert with a link. Give it a click if you like.
<a href="#!" class="alert-link float-right">Click me</a>
</div>
<div class="alert alert-success" role="alert">
A simple success alert with a link. Give it a click if you like.
<a href="#!" class="alert-link float-right">Click me</a>
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert with a link. Give it a click if you like.
<a href="#!" class="alert-link float-right">Click me</a>
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert with a link. Give it a click if you like.
<a href="#!" class="alert-link float-right">Click me</a>
</div>
Additional content
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
<div class="alert alert-primary py-5" role="alert">
<h4 class="alert-heading font-weight-bold mb-3">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer
so that you can see how spacing within an alert works with this kind of content.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
Typography
Hierarchy
Header size 1
Subheader size 1
Paragraph 1
Header size 2
Subheader size 2
Paragraph 2
Header size 3
Subheader size 3
Paragraph 3
Header size 4
Subheader size 4
Paragraph 4
Header size 5
Subheader size 5
Paragraph 5
Header size 6
Subheader size 6
Paragraph 6
<!-- Heading 1 -->
<h1 class="h1">Header size 1</h1>
<!-- Subheading 2 -->
<p class="sh1">Subheader size 1</p>
<!-- Paragraph 1 -->
<p class="p1">Paragraph 1</p>
<br>
<!-- Heading 2 -->
<h2 class="h2">Header size 2</h2>
<!-- Subheading 2 -->
<p class="sh2">Subheader size 2</p>
<!-- Paragraph 2 -->
<p class="p2">Paragraph 2</p>
<br>
<!-- Heading 3 -->
<h3 class="h3">Header size 3</h3>
<!-- Subheading 3 -->
<p class="sh3">Subheader size 3</p>
<!-- Paragraph 3 -->
<p class="p3">Paragraph 3</p>
<br>
<!-- Heading 4 -->
<h4 class="h4">Header size 4</h4>
<!-- Subheading 4 -->
<p class="sh4">Subheader size 4</p>
<!-- Paragraph 4 -->
<p class="p4">Paragraph 4</p>
<br>
<!-- Heading 5 -->
<h5 class="h5">Header size 5</h5>
<!-- Subheading 5 -->
<p class="sh5">Subheader size 5</p>
<!-- Paragraph 5 -->
<p class="p5">Paragraph 5</p>
<br>
<!-- Heading 6 -->
<h6 class="h6">Header size 6</h6>
<!-- Subheading 6 -->
<p class="sh6">Subheader size 6</p>
<!-- Paragraph 6 -->
<p class="p6">Paragraph 6</p>
Blockquotes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote class="blockquote">
<p class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
<blockquote class="blockquote text-center">
<p class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
<blockquote class="blockquote text-right">
<p class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
Text alignment
Left aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
Right aligned text on all viewport sizes.
Left aligned text on viewports sized SM (small) or wider.
Left aligned text on viewports sized MD (medium) or wider.
Left aligned text on viewports sized LG (large) or wider.
Left aligned text on viewports sized XL (extra-large) or wider.
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
Text utilities
This text should overflow the parent.
Praeterea iter est quasdam res quas ex communi.
This is in monospace
LoweRCased text.
Uppercased text.
capitalized text.
Bold text.
Normal weight text.
Light weight text.
Italic text.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
<!-- Block level -->
<div class="row">
<div class="col-2 text-truncate">
Praeterea iter est quasdam res quas ex communi.
</div>
</div>
<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
Praeterea iter est quasdam res quas ex communi.
</span>
<p class="text-monospace">This is in monospace</p>
<p class="text-lowercase">LoweRCased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">capitalized text.</p>
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-italic">Italic text.</p>
Dropdown
Basic dropdown
Divider
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="1dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Dropdown divider
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
Button group
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Secondary</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
Long menu items
Split button
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton76" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton67">
<a class="dropdown-item" href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a>
<a class="dropdown-item" href="#">Reprehenderit error hic corporis in magni explicabo soluta lorem itaque.</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!-- Example split danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split px-3" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
Modals
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm" 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-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="pr-3">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Small modal
</button>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel2">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-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="pr-3">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal2">
Normal modal
</button>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel3" aria-hidden="true">
<div class="modal-dialog modal-lg " role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel3">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-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="pr-3">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal3">
Large modal
</button>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal8" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel8" aria-hidden="true">
<div class="modal-dialog modal-fluid " role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel8">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-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal8">
Fluid modal
</button>
</div>
Pagination
Active
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">
<i class="mi mi-ChevronLeft"></i>
</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">
<i class="mi mi-ChevronRight"></i>
</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">
<i class="mi mi-ChevronLeft"></i> Prev
</span>
<span class="sr-only">Prev</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">Next
<i class="mi mi-ChevronRight"></i>
</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">2
<span class="sr-only">(current)</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
Popovers
Basic popovers
<button type="button" class="btn btn-primary" data-toggle="popover" data-placement="top" title="popover on top" data-content="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.">popover on top</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" title="popover on right" data-content="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.">popover on right</button>
<button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="bottom" title="popover on bottom" data-content="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.">popover on bottom</button>
<button type="button" class="btn btn-success" data-toggle="popover" data-placement="left" title="popover on left" data-content="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.">popover on left</button>
// popovers Initialization
$(function () {
$('[data-toggle="popover"]').popover()
})
Dismiss on next click
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover"
data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
// popovers Initialization
$(function () {
$('[data-toggle="popover"]').popover()
})
Tooltips
Basic tooltips
<button type="button" class="btn btn-primary m-2" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-primary m-2" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-primary m-2" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-primary m-2" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
// Tooltips Initialization
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Shadows
Basic shadows
No shadow
Small shadow
Regular shadow
Larger shadow
<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div>
<div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>
Media
Basic media
.jpg)
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div class="media">
<img class="mr-3" height="70px" width="70px" src="https://mdbootstrap.com/img/Photos/Fluent/img(4).jpg" alt="Generic placeholder image">
<div class="media-body">
<h5 class="font-weight-bold mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia
congue felis in faucibus.
</div>
</div>
Alignment
Top-aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Center-aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Bottom-aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<div class="media">
<img class="align-self-start mr-3" height="70px" width="70px" src="https://mdbootstrap.com/img/Photos/Fluent/img(4).jpg"
alt="Generic placeholder image">
<div class="media-body">
<h5 class="font-weight-bold mt-0">Top-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus
odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
Donec lacinia congue felis in faucibus.</p>
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
<br>
<div class="media">
<img class="align-self-center mr-3" height="70px" width="70px" src="https://mdbootstrap.com/img/Photos/Fluent/img(4).jpg"
alt="Generic placeholder image">
<div class="media-body">
<h5 class="font-weight-bold mt-0">Center-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus
odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
Donec lacinia congue felis in faucibus.</p>
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
<br>
<div class="media">
<img class="align-self-end mr-3" height="70px" width="70px" src="https://mdbootstrap.com/img/Photos/Fluent/img(4).jpg" alt="Generic placeholder image">
<div class="media-body">
<h5 class="font-weight-bold mt-0">Bottom-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus
odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
Donec lacinia congue felis in faucibus.</p>
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
Media list
-
List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. -
List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. -
List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<ul class="list-unstyled">
<li class="media">
<img class="mr-3" height="70px" width="70px" src="https://mdbootstrap.com/img/Photos/Fluent/img(4).jpg" alt="Generic placeholder image">
<div class="media-body">
<h5 class="font-weight-bold mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia
congue felis in faucibus.
</div>
</li>
<li class="media my-4">
<img class="mr-3" height="70px" width="70px" src="https://mdbootstrap.com/img/Photos/Fluent/img(4).jpg" alt="Generic placeholder image">
<div class="media-body">
<h5 class="font-weight-bold mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia
congue felis in faucibus.
</div>
</li>
<li class="media">
<img class="mr-3" height="70px" width="70px" src="https://mdbootstrap.com/img/Photos/Fluent/img(4).jpg" alt="Generic placeholder image">
<div class="media-body">
<h5 class="font-weight-bold mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia
congue felis in faucibus.
</div>
</li>
</ul>
Icons
Basic icons
- EA01 Accept
- EA02 Accident
- EA03 AccidentSolid
- EA04 Accounts
- EA05 ActionCenter
- EA06 ActionCenterAsterisk
- EA07 ActionCenterMirrored
- EA08 ActionCenterNotification
- EA09 ActionCenterNotificationMirrored
- EA0A ActionCenterQuiet
- EA0B ActionCenterQuietNotification
- EA0C Add
- EA0D AddFriend
- EA0E AddRemoteDevice
- EA0F AddSurfaceHub
- EA10 AddTo
- EA11 AdjustHologram
- EDE4 facebook-official
- EDE5 facebook
- EE33 twitter
- EDFA instagram
- EDFD joomla
- EDFE jsfiddle
- EE01 linkedin
- EE04 maxcdn
- EE06 medium
- EE08 mixcloud
- EE10 paypal
- EE13 pinterest-p
- EE14 product-hunt
- EE18 rebel
- EE19 reddit-alien
- EE1D sellsy
- EE1F simplybuilt
- EE20 skyatlas
- EE21 skype
- EE22 slack
- EE24 snapchat-ghost
- EE25 soundcloud
- EE26 spotify
<ul class="glyphs list-unstyled">
<li>
<span class="glyph">
<i class="mi mi-Accept"></i>
</span>
<span class="glyph-codepoint">EA01</span>
<span class="glyph-name">Accept</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-Accident"></i>
</span>
<span class="glyph-codepoint">EA02</span>
<span class="glyph-name">Accident</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-AccidentSolid"></i>
</span>
<span class="glyph-codepoint">EA03</span>
<span class="glyph-name">AccidentSolid</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-Accounts"></i>
</span>
<span class="glyph-codepoint">EA04</span>
<span class="glyph-name">Accounts</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-ActionCenter"></i>
</span>
<span class="glyph-codepoint">EA05</span>
<span class="glyph-name">ActionCenter</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-ActionCenterAsterisk"></i>
</span>
<span class="glyph-codepoint">EA06</span>
<span class="glyph-name">ActionCenterAsterisk</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-ActionCenterMirrored"></i>
</span>
<span class="glyph-codepoint">EA07</span>
<span class="glyph-name">ActionCenterMirrored</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-ActionCenterNotification"></i>
</span>
<span class="glyph-codepoint">EA08</span>
<span class="glyph-name">ActionCenterNotification</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-ActionCenterNotificationMirrored"></i>
</span>
<span class="glyph-codepoint">EA09</span>
<span class="glyph-name">ActionCenterNotificationMirrored</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-ActionCenterQuiet"></i>
</span>
<span class="glyph-codepoint">EA0A</span>
<span class="glyph-name">ActionCenterQuiet</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-ActionCenterQuietNotification"></i>
</span>
<span class="glyph-codepoint">EA0B</span>
<span class="glyph-name">ActionCenterQuietNotification</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-Add"></i>
</span>
<span class="glyph-codepoint">EA0C</span>
<span class="glyph-name">Add</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-AddFriend"></i>
</span>
<span class="glyph-codepoint">EA0D</span>
<span class="glyph-name">AddFriend</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-AddRemoteDevice"></i>
</span>
<span class="glyph-codepoint">EA0E</span>
<span class="glyph-name">AddRemoteDevice</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-AddSurfaceHub"></i>
</span>
<span class="glyph-codepoint">EA0F</span>
<span class="glyph-name">AddSurfaceHub</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-AddTo"></i>
</span>
<span class="glyph-codepoint">EA10</span>
<span class="glyph-name">AddTo</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-AdjustHologram"></i>
</span>
<span class="glyph-codepoint">EA11</span>
<span class="glyph-name">AdjustHologram</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-facebook-official"></i>
</span>
<span class="glyph-codepoint">EDE4</span>
<span class="glyph-name">facebook-official</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-facebook"></i>
</span>
<span class="glyph-codepoint">EDE5</span>
<span class="glyph-name">facebook</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-twitter"></i>
</span>
<span class="glyph-codepoint">EE33</span>
<span class="glyph-name">twitter</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-instagram"></i>
</span>
<span class="glyph-codepoint">EDFA</span>
<span class="glyph-name">instagram</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-joomla"></i>
</span>
<span class="glyph-codepoint">EDFD</span>
<span class="glyph-name">joomla</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-jsfiddle"></i>
</span>
<span class="glyph-codepoint">EDFE</span>
<span class="glyph-name">jsfiddle</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-linkedin"></i>
</span>
<span class="glyph-codepoint">EE01</span>
<span class="glyph-name">linkedin</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-maxcdn"></i>
</span>
<span class="glyph-codepoint">EE04</span>
<span class="glyph-name">maxcdn</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-medium"></i>
</span>
<span class="glyph-codepoint">EE06</span>
<span class="glyph-name">medium</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-mixcloud"></i>
</span>
<span class="glyph-codepoint">EE08</span>
<span class="glyph-name">mixcloud</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-paypal"></i>
</span>
<span class="glyph-codepoint">EE10</span>
<span class="glyph-name">paypal</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-pinterest-p"></i>
</span>
<span class="glyph-codepoint">EE13</span>
<span class="glyph-name">pinterest-p</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-product-hunt"></i>
</span>
<span class="glyph-codepoint">EE14</span>
<span class="glyph-name">product-hunt</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-rebel"></i>
</span>
<span class="glyph-codepoint">EE18</span>
<span class="glyph-name">rebel</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-reddit-alien"></i>
</span>
<span class="glyph-codepoint">EE19</span>
<span class="glyph-name">reddit-alien</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-sellsy"></i>
</span>
<span class="glyph-codepoint">EE1D</span>
<span class="glyph-name">sellsy</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-simplybuilt"></i>
</span>
<span class="glyph-codepoint">EE1F</span>
<span class="glyph-name">simplybuilt</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-skyatlas"></i>
</span>
<span class="glyph-codepoint">EE20</span>
<span class="glyph-name">skyatlas</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-skype"></i>
</span>
<span class="glyph-codepoint">EE21</span>
<span class="glyph-name">skype</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-slack"></i>
</span>
<span class="glyph-codepoint">EE22</span>
<span class="glyph-name">slack</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-snapchat-ghost"></i>
</span>
<span class="glyph-codepoint">EE24</span>
<span class="glyph-name">snapchat-ghost</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-soundcloud"></i>
</span>
<span class="glyph-codepoint">EE25</span>
<span class="glyph-name">soundcloud</span>
</li>
<li>
<span class="glyph">
<i class="mi mi-spotify"></i>
</span>
<span class="glyph-codepoint">EE26</span>
<span class="glyph-name">spotify</span>
</li>
</ul>