mitsuo_makuda/bootstrap-fluent-design_template
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
master
bootstrap-fluent-design_tem.../free/components/full-demo.html

2717 lines
95 KiB
HTML
Raw Permalink Normal View History

New Fluent Design
2021-04-15 13:11:19 +01:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<link rel="icon" href="../../img/mdb-favicon.ico" type="image/x-icon" />
<!-- Micon -->
<link rel="stylesheet" href="../../dev/css/micon.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@icon/micon@3.0.168/micon.min.css" />
<!-- MDB -->
<link rel="stylesheet" href="../../css/mdb.min.css" />
<!-- PRISM -->
<link rel="stylesheet" href="../../dev/css/new-prism.css" />
<!-- Custom styles -->
<style>
.shadow-demo {
width: 100px;
height: 100px;
background-color: #fff;
}
.shadow-demo-1 {
width: 100px;
height: 100px;
background-color: #ccc;
}
.shadow-demo-2 {
width: 100px;
height: 100px;
background-color: #000;
}
.mask-custom {
background-color: rgba(255, 255, 255, 0.2);
border-radius: 0;
border: 0;
background-clip: padding-box;
box-shadow: 10px 10px 10px rgba(46, 54, 68, 0.03);
}
.custom-1 {
backdrop-filter: blur(30px);
}
.custom-2 {
backdrop-filter: blur(60px);
}
.custom-3 {
backdrop-filter: blur(40px);
}
.custom-4 {
backdrop-filter: blur(15px);
}
.custom-5 {
backdrop-filter: blur(5px);
}
.mask-custom-1 {
background-color: rgba(0, 0, 0, 0.2);
border-radius: 0;
border: 0;
background-clip: padding-box;
box-shadow: 10px 10px 10px rgba(46, 54, 68, 0.03);
}
.custom-6 {
backdrop-filter: blur(30px);
}
.custom-7 {
backdrop-filter: blur(60px);
}
.custom-8 {
backdrop-filter: blur(40px);
}
.custom-9 {
backdrop-filter: blur(15px);
}
.custom-10 {
backdrop-filter: blur(5px);
}
</style>
</head>
<body>
<div class="container my-5">
<div class="text-center">
<p class="header">Demo</p>
<p class="subheader">FD Bootstrap Components</p>
<p class="subtitle">
Visual guide of components in the newest Bootstrap 5 and Fluent Design
</p>
<hr class="my-5" />
</div>
<section>
<p class="subheader text-center mb-4 pb-2">Cards</p>
<div class="row">
<div class="col-md-6 col-lg-4 col-xl-3 mb-5">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/184.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h4 class="semibold mb-3">Card title</h4>
<p class="mb-4">
Some quick example text to build on the card title and make up the bulk of the
card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xl-5 mb-5">
<div class="card border shadow-0 rounded-0 mb-3">
<div class="d-flex g-0">
<div class="col-md-4">
<img
src="https://mdbootstrap.com/img/Photos/dark-theme-demo/img1.jpg"
class="w-100"
alt="..."
/>
</div>
<div class="col-md-8">
<div class="card-body px-3 pt-2">
<h5 class="mb-3">Title of the news</h5>
<div class="d-flex position-absolute" style="bottom: 0;">
<img
src="https://mdbootstrap.com/img/Photos/Avatars/img (29).jpg"
class="rounded-circle"
height="35"
alt=""
loading="lazy"
/>
<div class="d-flex align-items-center w-100 ps-3 pb-2">
<div class="w-100">
<h6 class="link-dark mb-0">Roko Kolar</h6>
<a href="#!" class="stretched-link text-muted">
<p class="mb-0 small">Created a few minutes ago</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card border shadow-0 rounded-0 mb-3">
<div class="d-flex g-0">
<div
class="col-md-4 d-flex justify-content-center align-items-center bg-primary"
style="height: 131px;"
>
<i class="mi mi-OpenFile mi-3x text-white"></i>
</div>
<div class="col-md-8">
<div class="card-body px-3 pt-2">
<h5 class="mb-3">View and share files</h5>
<div class="d-flex position-absolute" style="bottom: 0;">
<img
src="https://mdbootstrap.com/img/Photos/Avatars/img (27).jpg"
class="rounded-circle"
height="35"
alt=""
loading="lazy"
/>
<div class="d-flex align-items-center w-100 ps-3 pb-2">
<div class="w-100">
<h6 class="link-dark mb-0">Aaron Reid</h6>
<a href="#!" class="stretched-link text-muted">
<p class="mb-0 small">Created a few minutes ago</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card border shadow-0 rounded-0">
<div class="d-flex g-0">
<div
class="col-md-4 d-flex justify-content-center align-items-center bg-light"
style="height: 131px;"
>
<i class="mi mi-MailReply mi-3x text-secondary"></i>
</div>
<div class="col-md-8">
<div class="card-body px-3 pt-2">
<h5 class="mb-3">
Conversation about takeaways from annual SharePoint conference
</h5>
<div class="d-flex position-absolute" style="bottom: 0;">
<img
src="https://mdbootstrap.com/img/Photos/Avatars/img (26).jpg"
class="rounded-circle"
height="35"
alt=""
loading="lazy"
/>
<div class="d-flex align-items-center w-100 ps-3 pb-2">
<div class="w-100">
<h6 class="link-dark mb-0">Christina Bergqvist</h6>
<a href="#!" class="stretched-link text-muted">
<p class="mb-0 small">Sent a few minutes ago</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-4 mb-5">
<div class="card border shadow-0 rounded-0">
<img
src="https://mdbootstrap.com/img/Photos/dark-theme-demo/img1.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body p-3">
<h5 class="mb-3">Large_file_name_…s_truncating.pptx</h5>
<div class="d-flex">
<img
src="https://mdbootstrap.com/img/Photos/Avatars/img (28).jpg"
class="rounded-circle"
height="35"
alt=""
loading="lazy"
/>
<div class="d-flex align-items-center w-100 ps-3">
<div class="w-100">
<h6 class="link-dark mb-0">Annie Lindqvist</h6>
<a href="#!" class="stretched-link text-muted">
<p class="mb-0 small">Created a few minutes ago</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-4 mb-5">
<div class="card">
<img
src="https://mdbootstrap.com/img/Photos/new-templates/linkedin/img3.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<span class="badge bg-primary mb-3">NEW</span>
<h4 class="semibold mb-3">Card title</h4>
<p class="mb-3">
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 d-flex align-items-center"
>Call to action
<i class="mi mi-ChevronRight ms-2"></i>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-5">
<div class="card">
<div
class="py-3 w-100"
style="
background-color: #b4009e;
height: 9rem;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
"
></div>
<div class="position-relative h-100" style="margin-top: -4.5rem;">
<div class="w-50 mx-auto position-relative">
<img
class="img-fluid"
src="https://mdbootstrap.com/img/Photos/Others/men.jpg"
alt="Card image"
/>
</div>
</div>
<div class="card-body">
<div class="text-center">
<h5 class="card-title semibold mb-2 pb-1">Jim Lohan</h5>
<p class="card-subtitle semibold mb-2">UX Designer</p>
<p class="card-text mb-4 pb-1">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est, deserunt.
</p>
</div>
<ul class="ps-2 mb-1">
<li class="d-flex justify-content-between mb-1">
<i class="mi mi-MapPin2"></i>
<span>Ellsworth , ME</span>
</li>
<li class="d-flex justify-content-between mb-1">
<i class="mi mi-Phone"></i>
<span>123 456 789</span>
</li>
<li class="d-flex justify-content-between mb-0">
<i class="mi mi-Mail"></i>
<span>exmaple@exmaple.com</span>
</li>
</ul>
</div>
<div class="card-footer d-flex justify-content-between py-4">
<a href="#!" class="d-flex align-items-center">
<i class="mi mi-instagram mi-lg" style="color: #bf0077;"></i>
</a>
<a href="#!" class="d-flex align-items-center">
<i class="mi mi-dribbble mi-lg" style="color: #e3008c;"></i>
</a>
<a href="#!" class="d-flex align-items-center">
<i class="mi mi-vimeo mi-lg" style="color: #0078d7;"></i>
</a>
<a href="#!" class="d-flex align-items-center">
<i class="mi mi-reddit-alien mi-lg" style="color: #ef6950;"></i>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-5">
<div class="card text-center">
<div
class="bg-primary d-flex justify-content-center align-items-center"
style="height: 9rem; border-top-left-radius: 2px; border-top-right-radius: 2px;"
>
<i class="mi mi-5x mi-facebook text-white"></i>
</div>
<div class="card-body">
<h4 class="card-title semibold pt-0">Lorem, ipsum.</h4>
<p class="card-subtitle">Lorem, ipsum.</p>
<hr class="border-dark w-25 mx-auto" />
<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>
<div class="d-flex justify-content-center">
<ul class="ps-0 mb-0">
<li class="d-flex align-items-center">
<i class="pe-2 mi mi-DeviceLaptopNoPic"></i>Lorem ipsum dolor sit.
</li>
<li class="d-flex align-items-center">
<i class="pe-2 mi mi-telegram"></i>Lorem ipsum dolor sit.
</li>
<li class="d-flex align-items-center">
<i class="pe-2 mi mi-Phone"></i>Lorem ipsum dolor sit.
</li>
<li class="d-flex align-items-center">
<i class="pe-2 mi mi-MobAirplane"></i>Lorem ipsum dolor sit.
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<hr class="mb-5" />
<section>
<p class="subheader text-center mb-4 pb-2">Carousel</p>
<!-- Carousel wrapper -->
<div
id="carouselExampleCaptions"
class="carousel slide carousel-fade shadow-3-strong"
data-mdb-ride="carousel"
>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-mdb-target="#carouselExampleCaptions" data-mdb-slide-to="0" class=""></li>
<li data-mdb-target="#carouselExampleCaptions" data-mdb-slide-to="1" class=""></li>
<li
data-mdb-target="#carouselExampleCaptions"
data-mdb-slide-to="2"
class="active"
></li>
</ol>
<!-- Inner -->
<div class="carousel-inner">
<!-- Single item -->
<div class="carousel-item">
<img
src="https://mdbootstrap.com/img/Photos/Slides/img%20(15).jpg"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<img
src="https://mdbootstrap.com/img/Photos/Slides/img%20(22).jpg"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!-- Single item -->
<div class="carousel-item active">
<img
src="https://mdbootstrap.com/img/Photos/Slides/img%20(23).jpg"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
</p>
</div>
</div>
</div>
<!-- Inner -->
<!-- Controls -->
<a
class="carousel-control-prev"
href="#carouselExampleCaptions"
role="button"
data-mdb-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a
class="carousel-control-next"
href="#carouselExampleCaptions"
role="button"
data-mdb-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
<!-- Carousel wrapper -->
</section>
<hr class="my-5" />
<section class="text-center">
<p class="subheader mb-4 pb-2">Buttons</p>
<!--Section: Regular-->
<section class="mb-4">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link" data-mdb-ripple-color="dark">
Link
</button>
</section>
<!--Section: Regular-->
<!--Section: Outline-->
<section class="mb-4">
<button type="button" class="btn btn-outline-primary" data-mdb-ripple-color="dark">
Primary
</button>
<button type="button" class="btn btn-outline-secondary" data-mdb-ripple-color="dark">
Secondary
</button>
<button type="button" class="btn btn-outline-success" data-mdb-ripple-color="dark">
Success
</button>
<button type="button" class="btn btn-outline-danger" data-mdb-ripple-color="dark">
Danger
</button>
<button type="button" class="btn btn-outline-warning" data-mdb-ripple-color="dark">
Warning
</button>
<button type="button" class="btn btn-outline-info" data-mdb-ripple-color="dark">
Info
</button>
<button type="button" class="btn btn-outline-dark" data-mdb-ripple-color="dark">
Dark
</button>
</section>
<!--Section: Outline-->
<!--Section: Rounded-->
<section class="mb-4">
<button type="button" class="btn btn-primary btn-rounded">
Primary
</button>
<button type="button" class="btn btn-secondary btn-rounded">
Secondary
</button>
<button type="button" class="btn btn-success btn-rounded">
Success
</button>
<button type="button" class="btn btn-danger btn-rounded">Danger</button>
<button type="button" class="btn btn-warning btn-rounded">
Warning
</button>
<button type="button" class="btn btn-info btn-rounded">Info</button>
<button type="button" class="btn btn-light btn-rounded">Light</button>
<button type="button" class="btn btn-dark btn-rounded">Dark</button>
</section>
<!--Section: Rounded-->
<!--Section: Rounded outline-->
<section class="mb-4">
<button
type="button"
class="btn btn-outline-primary btn-rounded"
data-mdb-ripple-color="dark"
>
Primary
</button>
<button
type="button"
class="btn btn-outline-secondary btn-rounded"
data-mdb-ripple-color="dark"
>
Secondary
</button>
<button
type="button"
class="btn btn-outline-success btn-rounded"
data-mdb-ripple-color="dark"
>
Success
</button>
<button
type="button"
class="btn btn-outline-danger btn-rounded"
data-mdb-ripple-color="dark"
>
Danger
</button>
<button
type="button"
class="btn btn-outline-warning btn-rounded"
data-mdb-ripple-color="dark"
>
Warning
</button>
<button
type="button"
class="btn btn-outline-info btn-rounded"
data-mdb-ripple-color="dark"
>
Info
</button>
<button
type="button"
class="btn btn-outline-dark btn-rounded"
data-mdb-ripple-color="dark"
>
Dark
</button>
</section>
<!--Section: Rounded outline-->
<!--Section: Sizes-->
<section class="mb-4">
<button type="button" class="btn btn-primary btn-sm">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary btn-lg">Button</button>
</section>
<!--Section: Sizes-->
<!--Section: Floating-->
<section class="mb-4">
<button type="button" class="btn btn-primary btn-lg btn-floating">
<i class="mi mi-facebook-f"></i>
</button>
<button
type="button"
class="btn btn-outline-success btn-floating"
data-mdb-ripple-color="dark"
>
<i class="mi mi-FavoriteStarFill"></i>
</button>
<button type="button" class="btn btn-danger btn-floating">
<i class="mi mi-Cut"></i>
</button>
<button type="button" class="btn btn-dark btn-floating">
<i class="mi mi-apple"></i>
</button>
</section>
<!--Section: Floating-->
<!--Section: Block-->
<section class="mb-4">
<!--Grid row-->
<div class="row d-flex justify-content-center">
<!--Grid column-->
<div class="col-md-6">
<button type="button" class="btn btn-primary btn-lg btn-block">
Block level button
</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">
Block level button
</button>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Block-->
<!--Section: Social-->
<section class="mb-4">
<!-- Facebook -->
<a
class="btn btn-primary m-1"
style="background-color: #3b5998; border-color: #3b5998;"
href="#!"
role="button"
><i class="mi mi-facebook-f"></i
></a>
<!-- Twitter -->
<a
class="btn btn-primary m-1"
style="background-color: #55acee; border-color: #55acee;"
href="#!"
role="button"
><i class="mi mi-twitter-square"></i
></a>
<!-- Google -->
<a
class="btn btn-primary m-1"
style="background-color: #dd4b39; border-color: #dd4b39;"
href="#!"
role="button"
><i class="mi mi-google"></i
></a>
<!-- Instagram -->
<a
class="btn btn-primary m-1"
style="background-color: #ac2bac; border-color: #ac2bac;"
href="#!"
role="button"
><i class="mi mi-instagram"></i
></a>
<!-- Linkedin -->
<a
class="btn btn-primary m-1"
style="background-color: #0082ca; border-color: #0082ca;"
href="#!"
role="button"
><i class="mi mi-linkedin-in"></i
></a>
<!-- Pinterest -->
<a
class="btn btn-primary m-1"
style="background-color: #c61118; border-color: #c61118;"
href="#!"
role="button"
><i class="mi mi-pinterest"></i
></a>
<!-- Vkontakte -->
<a
class="btn btn-primary m-1"
style="background-color: #4c75a3; border-color: #4c75a3;"
href="#!"
role="button"
><i class="mi mi-vk"></i
></a>
<!-- Stack overflow -->
<a
class="btn btn-primary m-1"
style="background-color: #ffac44; border-color: #ffac44;"
href="#!"
role="button"
><i class="mi mi-stack-overflow"></i
></a>
<!-- Youtube -->
<a
class="btn btn-primary m-1"
style="background-color: #ed302f; border-color: #ed302f;"
href="#!"
role="button"
><i class="mi mi-youtube"></i
></a>
<!-- Slack -->
<a
class="btn btn-primary m-1"
style="background-color: #481449; border-color: #481449;"
href="#!"
role="button"
><i class="mi mi-slack-hash"></i
></a>
<!-- Github -->
<a
class="btn btn-primary m-1"
style="background-color: #333333; border-color: #333333;"
href="#!"
role="button"
><i class="mi mi-github"></i
></a>
<!-- Dribbble -->
<a
class="btn btn-primary m-1"
style="background-color: #ec4a89; border-color: #ec4a89;"
href="#!"
role="button"
><i class="mi mi-dribbble"></i
></a>
<!-- Reddit -->
<a
class="btn btn-primary m-1"
style="background-color: #ff4500; border-color: #ff4500;"
href="#!"
role="button"
><i class="mi mi-reddit-alien"></i
></a>
<!-- Whatsapp -->
<a
class="btn btn-primary m-1"
style="background-color: #25d366; border-color: #25d366;"
href="#!"
role="button"
><i class="mi mi-whatsapp"></i
></a>
</section>
<!--Section: Social-->
</section>
<hr class="my-5" />
<section>
<p class="subheader text-center mb-4 pb-2">Progress</p>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-6 mb-4">
<div class="progress mb-3">
<div
class="progress-bar"
role="progressbar"
style="width: 25%;"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<div class="progress mb-3">
<div
class="progress-bar"
role="progressbar"
style="width: 50%;"
aria-valuenow="50"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<div class="progress mb-3">
<div
class="progress-bar"
role="progressbar"
style="width: 75%;"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<div class="progress mb-3">
<div
class="progress-bar"
role="progressbar"
style="width: 100%;"
aria-valuenow="100"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<div class="progress" style="height: 20px;">
<div
class="progress-bar"
role="progressbar"
style="width: 25%;"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
>
25%
</div>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6 mb-4">
<div class="progress mb-3">
<div
class="progress-bar bg-success"
role="progressbar"
style="width: 25%;"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<div class="progress mb-3">
<div
class="progress-bar bg-info"
role="progressbar"
style="width: 50%;"
aria-valuenow="50"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<div class="progress mb-3">
<div
class="progress-bar bg-warning"
role="progressbar"
style="width: 75%;"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<div class="progress mb-3">
<div
class="progress-bar bg-danger"
role="progressbar"
style="width: 100%;"
aria-valuenow="100"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<div class="progress" style="height: 20px;">
<div
class="progress-bar bg-success"
role="progressbar"
style="width: 25%;"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
>
25%
</div>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<hr class="my-5" />
<section>
<p class="subheader text-center mb-4 pb-2">Spinners</p>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-6 mb-4">
<div class="spinner-border text-primary mx-2" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary mx-2" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-theme mx-2" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger mx-2" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning mx-2" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info mx-2" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light mx-2" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark mx-2" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<br />
<br />
<button class="btn btn-primary" type="button" disabled="">
<span
class="spinner-border spinner-border-sm"
role="status"
aria-hidden="true"
></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled="">
<span
class="spinner-border spinner-border-sm"
role="status"
aria-hidden="true"
></span>
Loading...
</button>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6 mb-4">
<div class="spinner-grow text-primary mx-2" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary mx-2" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-theme mx-2" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger mx-2" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning mx-2" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info mx-2" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light mx-2" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark mx-2" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<br />
<br />
<button class="btn btn-primary" type="button" disabled="">
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled="">
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<hr class="my-5" />
<section>
<p class="subheader text-center mb-4 pb-2">Alerts</p>
<!---Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-6 mb-4">
<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-success" role="alert">
A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert—check it out!
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6 mb-4">
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button
type="button"
class="btn-close"
data-mdb-dismiss="alert"
aria-label="Close"
></button>
</div>
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">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>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<hr class="my-5" />
<section>
<p class="subheader text-center mb-4 pb-2">Badges</p>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-5 mb-4">
<h1>Example heading <span class="badge bg-primary">New</span></h1>
<h2>Example heading <span class="badge bg-primary">New</span></h2>
<h3>Example heading <span class="badge bg-primary">New</span></h3>
<h4>Example heading <span class="badge bg-primary">New</span></h4>
<h5>Example heading <span class="badge bg-primary">New</span></h5>
<h6>Example heading <span class="badge bg-primary">New</span></h6>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-3 mb-4">
<a href="">
<span><i class="mi mi-Mail mi-2x"></i></span>
<span class="badge bg-danger badge-dot"></span>
</a>
<br />
<a href="">
<span><i class="mi mi-Mail mi-2x"></i></span>
<span class="badge rounded-pill badge-notification bg-danger">1</span>
</a>
<br />
<a href="">
<span><i class="mi mi-Mail mi-2x"></i></span>
<span class="badge rounded-pill badge-notification bg-danger">999+</span>
</a>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4 mb-4">
<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>
<br />
<br />
<button type="button" class="btn btn-primary">
Notifications<span class="badge bg-danger ms-2">8</span>
</button>
<br />
<br />
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<hr class="my-5" />
<section>
<p class="subheader text-center mb-4 pb-2">Notes &amp; typography</p>
<p class="note note-primary">
<strong>Note primary:</strong> Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus
delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?
</p>
<p class="note note-secondary">
<strong>Note secondary:</strong> Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus
delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?
</p>
<p class="note note-success">
<strong>Note success:</strong> Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus
delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?
</p>
<p class="note note-danger">
<strong>Note danger:</strong> Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus
delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?
</p>
<p class="note note-warning">
<strong>Note warning:</strong> Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus
delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?
</p>
<p class="note note-info">
<strong>Note info:</strong> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum
doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus
placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?
</p>
<p class="note note-light">
<strong>Note light:</strong> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum
doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus
placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?
</p>
<section class="border p-4 text-center mt-5">
<section class="text-center">
<h1>Main website heading (h1)</h1>
<h4>Website subheading (h4)</h4>
<hr class="my-4" />
<h3>Section heading (h3)</h3>
<hr class="my-4" />
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4">
<h5>Component heading (h5)</h5>
<p class="small text-muted text-uppercase mb-2">
Component subheading
</p>
<h6>Component alternative subheading (h6)</h6>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. A nemo commodi odio
veniam nisi? Cupiditate nobis doloremque unde in ut, consequatur reprehenderit
saepe iure perspiciatis, veniam facilis asperiores deleniti at?
</p>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4">
<h5>Component heading (h5)</h5>
<p class="small text-muted text-uppercase mb-2">
Component subheading
</p>
<h6>Component alternative subheading (h6)</h6>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. A nemo commodi odio
veniam nisi? Cupiditate nobis doloremque unde in ut, consequatur reprehenderit
saepe iure perspiciatis, veniam facilis asperiores deleniti at?
</p>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4">
<h5>Component heading (h5)</h5>
<p class="small text-muted text-uppercase mb-2">
Component subheading
</p>
<h6>Component alternative subheading (h6)</h6>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. A nemo commodi odio
veniam nisi? Cupiditate nobis doloremque unde in ut, consequatur reprehenderit
saepe iure perspiciatis, veniam facilis asperiores deleniti at?
</p>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
</section>
</section>
<hr class="my-5" />
<section>
<p class="subheader text-center mb-4 pb-2">Button group</p>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-5 mb-4">
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group" aria-label="First group">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
<button type="button" class="btn btn-primary">4</button>
</div>
<div class="btn-group me-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-primary">5</button>
<button type="button" class="btn btn-primary">6</button>
<button type="button" class="btn btn-primary">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-primary">8</button>
</div>
</div>
<br />
<br />
<!-- Large -->
<div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
<br />
<br />
<!-- Standard -->
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
<br />
<br />
<!-- Small -->
<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
<br />
<br />
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<div class="btn-group" role="group">
<button
id="btnGroupDrop1"
type="button"
class="btn btn-primary dropdown-toggle"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-7 mb-4">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-8 mb-4">
<div class="btn-group shadow-0" role="group">
<button type="button" class="btn btn-light" data-mdb-ripple-color="dark">
Left
</button>
<button type="button" class="btn btn-light" data-mdb-ripple-color="dark">
Middle
</button>
<button type="button" class="btn btn-light" data-mdb-ripple-color="dark">
Right
</button>
</div>
<br />
<br />
<div class="btn-group shadow-0" role="group">
<button type="button" class="btn btn-link" data-mdb-ripple-color="dark">
Left
</button>
<button type="button" class="btn btn-link" data-mdb-ripple-color="dark">
Middle
</button>
<button type="button" class="btn btn-link" data-mdb-ripple-color="dark">
Right
</button>
</div>
<br />
<br />
<div class="btn-group" role="group">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
<br />
<br />
<div class="btn-group" role="group">
<button type="button" class="btn btn-success">Left</button>
<button type="button" class="btn btn-success">Middle</button>
<button type="button" class="btn btn-success">Right</button>
</div>
<br />
<br />
<div class="btn-group" role="group">
<button type="button" class="btn btn-danger">Left</button>
<button type="button" class="btn btn-danger">Middle</button>
<button type="button" class="btn btn-danger">Right</button>
</div>
<br />
<br />
<div class="btn-group" role="group">
<button type="button" class="btn btn-warning">Left</button>
<button type="button" class="btn btn-warning">Middle</button>
<button type="button" class="btn btn-warning">Right</button>
</div>
<br />
<br />
<div class="btn-group" role="group">
<button type="button" class="btn btn-info">Left</button>
<button type="button" class="btn btn-info">Middle</button>
<button type="button" class="btn btn-info">Right</button>
</div>
<br />
<br />
<div class="btn-group" role="group">
<button type="button" class="btn btn-dark">Left</button>
<button type="button" class="btn btn-dark">Middle</button>
<button type="button" class="btn btn-dark">Right</button>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4 mb-4">
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<hr class="my-5" />
<section>
<p class="subheader text-center mb-4 pb-2">Collapse</p>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-6 mb-4">
<!-- Buttons trigger collapse -->
<a
class="btn btn-primary"
data-mdb-toggle="collapse"
href="#collapseExample"
role="button"
aria-expanded="false"
aria-controls="collapseExample"
>
Link with href
</a>
<button
class="btn btn-primary"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#collapseExample"
aria-expanded="false"
aria-controls="collapseExample"
>
Button with data-mdb-target
</button>
<!-- Collapsed content -->
<div class="collapse mt-3" id="collapseExample">
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>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6 mb-4">
<!-- Accordion wrapper -->
<div class="accordion" id="accordionExample">
<!-- Single collapse -->
<div id="headingOne">
<h2>
<button
class="btn btn-link btn-block text-start ps-3"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne"
>
Collapsible Group Item #1
</button>
</h2>
</div>
<div
id="collapseOne"
class="collapse show ps-3"
aria-labelledby="headingOne"
data-mdb-parent="#accordionExample"
>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente
ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
accusamus labore sustainable VHS.
</div>
<!-- Single collapse -->
<!-- Single collapse -->
<div id="headingTwo">
<h2>
<button
class="btn btn-link btn-block text-start ps-3 collapsed"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo"
>
Collapsible Group Item #2
</button>
</h2>
</div>
<div
id="collapseTwo"
class="collapse ps-3"
aria-labelledby="headingTwo"
data-mdb-parent="#accordionExample"
>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente
ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
accusamus labore sustainable VHS.
</div>
<!-- Single collapse -->
<!-- Single collapse -->
<div id="headingThree">
<h2>
<button
class="btn btn-link btn-block text-start ps-3 collapsed"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#collapseThree"
aria-expanded="false"
aria-controls="collapseThree"
>
Collapsible Group Item #3
</button>
</h2>
</div>
<div
id="collapseThree"
class="collapse ps-3"
aria-labelledby="headingThree"
data-mdb-parent="#accordionExample"
>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente
ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
accusamus labore sustainable VHS.
</div>
<!-- Single collapse -->
</div>
<!-- Accordion wrapper -->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<hr class="my-5" />
<section class="text-center">
<p class="subheader mb-4 pb-2">Dropdowns</p>
<!-- Primary -->
<div class="btn-group">
<button
type="button"
class="btn btn-primary dropdown-toggle"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<!-- Secondary -->
<div class="btn-group">
<button
type="button"
class="btn btn-secondary dropdown-toggle"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<!-- Success -->
<div class="btn-group">
<button
type="button"
class="btn btn-success dropdown-toggle"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<!-- Info -->
<div class="btn-group">
<button
type="button"
class="btn btn-info dropdown-toggle"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<!-- Warning -->
<div class="btn-group">
<button
type="button"
class="btn btn-warning dropdown-toggle"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<!-- Danger -->
<div class="btn-group">
<button
type="button"
class="btn btn-danger dropdown-toggle"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<!-- Dark -->
<div class="btn-group">
<button
type="button"
class="btn btn-dark dropdown-toggle"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<!-- Light -->
<div class="btn-group shadow-0">
<button
type="button"
class="btn btn-light dropdown-toggle"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<!-- Link -->
<div class="btn-group shadow-0">
<button
type="button"
class="btn btn-link dropdown-toggle"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</section>
<hr class="my-5" />
<section>
<p class="subheader text-center mb-4 pb-2">Modal</p>
<section class="border p-4 text-center mb-4 bg-light">
<!-- Button trigger modal -->
<button
type="button"
class="btn btn-primary"
data-mdb-toggle="modal"
data-mdb-target="#exampleModal"
>
Launch demo modal
</button>
<div
class="modal"
tabindex="-1"
style="position: static; display: block; height: auto;"
data-gtm-vis-first-on-screen-2340190_1302="6684"
data-gtm-vis-total-visible-time-2340190_1302="100"
data-gtm-vis-has-fired-2340190_1302="1"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button
type="button"
class="btn-close"
data-mdb-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Modal -->
<div
class="modal fade"
id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button
type="button"
class="btn-close"
data-mdb-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
</section>
<hr class="my-5" />
<section>
<p class="subheader text-center mb-4 pb-2">Toasts</p>
<!--Grid row-->
<div class="row d-flex justify-content-center">
<!--Grid column-->
<div class="col-md-3 mb-4">
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">MDBootstrap</strong>
<small>11 mins ago</small>
<button
type="button"
class="btn-close"
data-mdb-dismiss="toast"
aria-label="Close"
></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4">
<!-- Info toast -->
<div
class="toast fade show bg-info text-white"
role="alert"
aria-live="assertive"
aria-atomic="true"
>
<div class="toast-header bg-info text-white">
<i class="fas fa-info-circle fa-lg me-2"></i>
<strong class="me-auto">MDBootstrap</strong>
<small>11 mins ago</small>
<button
type="button"
class="btn-close btn-close-white"
data-mdb-dismiss="toast"
aria-label="Close"
></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4">
<!-- Warning toast -->
<div
class="toast fade show bg-warning text-white"
role="alert"
aria-live="assertive"
aria-atomic="true"
>
<div class="toast-header bg-warning text-white">
<i class="fas fa-exclamation-triangle fa-lg me-2"></i>
<strong class="me-auto">MDBootstrap</strong>
<small>11 mins ago</small>
<button
type="button"
class="btn-close btn-close-white"
data-mdb-dismiss="toast"
aria-label="Close"
></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4">
<!-- Success toast -->
<div
class="toast fade show bg-success text-white"
role="alert"
aria-live="assertive"
aria-atomic="true"
>
<div class="toast-header bg-success text-white">
<i class="fas fa-check fa-lg me-2"></i>
<strong class="me-auto">MDBootstrap</strong>
<small>11 mins ago</small>
<button
type="button"
class="btn-close btn-close-white"
data-mdb-dismiss="toast"
aria-label="Close"
></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4">
<!-- Danger toast -->
<div
class="toast fade show bg-danger text-white"
role="alert"
aria-live="assertive"
aria-atomic="true"
>
<div class="toast-header bg-danger text-white">
<i class="fas fa-exclamation-circle fa-lg me-2"></i>
<strong class="me-auto">MDBootstrap</strong>
<small>11 mins ago</small>
<button
type="button"
class="btn-close btn-close-white"
data-mdb-dismiss="toast"
aria-label="Close"
></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<hr class="my-5" />
<section>
<p class="subheader text-center mb-4 pb-2">Acrylic</p>
<div class="container mb-5">
<section style="height: 1000px;">
<div
class="bg-image h-100"
style="
background-image: url(https://mdbootstrap.com/img/Photos/new-templates/glassmorphism-article/img5.jpg);
"
>
<div class="mask d-flex align-items-center h-100">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-8 mb-4">
<div
class="card mask-custom custom-1 py-5 px-4 text-white"
style="height: 350px;"
>
<div class="card-body d-flex align-items-center justify-content-center">
<p class="h4 mb-0 text-dark">Blur: 30px</p>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-xl-2">
<div
class="card mask-custom custom-2 py-5 px-4 text-white"
style="height: 150px;"
>
<div class="card-body d-flex align-items-center justify-content-center">
<p class="h6 mb-0 text-dark">Blur: 60px</p>
</div>
</div>
</div>
<div class="col-xl-2">
<div
class="card mask-custom custom-3 py-5 px-4 text-white"
style="height: 150px;"
>
<div class="card-body d-flex align-items-center justify-content-center">
<p class="h6 mb-0 text-dark">Blur: 40px</p>
</div>
</div>
</div>
<div class="col-xl-2">
<div
class="card mask-custom custom-4 py-5 px-4 text-white"
style="height: 150px;"
>
<div class="card-body d-flex align-items-center justify-content-center">
<p class="h6 mb-0 text-dark">Blur: 15px</p>
</div>
</div>
</div>
<div class="col-xl-2">
<div
class="card mask-custom custom-5 py-5 px-4 text-white"
style="height: 150px;"
>
<div class="card-body d-flex align-items-center justify-content-center">
<p class="h6 mb-0 text-dark">Blur: 5px</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="container mb-5">
<section style="height: 1000px;">
<div
class="bg-image h-100"
style="
background-image: url(https://mdbootstrap.com/img/Photos/new-templates/glassmorphism-article/img8.jpg);
"
>
<div class="mask d-flex align-items-center h-100">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-8 mb-4">
<div
class="card mask-custom-1 custom-6 py-5 px-4 text-white"
style="height: 350px;"
>
<div class="card-body d-flex align-items-center justify-content-center">
<p class="h4 mb-0">Blur: 30px</p>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-xl-2">
<div
class="card mask-custom-1 custom-7 py-5 px-4 text-white"
style="height: 150px;"
>
<div class="card-body d-flex align-items-center justify-content-center">
<p class="h6 mb-0">Blur: 60px</p>
</div>
</div>
</div>
<div class="col-xl-2">
<div
class="card mask-custom-1 custom-8 py-5 px-4 text-white"
style="height: 150px;"
>
<div class="card-body d-flex align-items-center justify-content-center">
<p class="h6 mb-0">Blur: 40px</p>
</div>
</div>
</div>
<div class="col-xl-2">
<div
class="card mask-custom-1 custom-9 py-5 px-4 text-white"
style="height: 150px;"
>
<div class="card-body d-flex align-items-center justify-content-center">
<p class="h6 mb-0">Blur: 15px</p>
</div>
</div>
</div>
<div class="col-xl-2">
<div
class="card mask-custom-1 custom-10 py-5 px-4 text-white"
style="height: 150px;"
>
<div class="card-body d-flex align-items-center justify-content-center">
<p class="h6 mb-0">Blur: 5px</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="row">
<div class="col-12 mb-4"></div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
</div>
</section>
<hr class="my-5" />
<section class="text-center">
<p class="subheader mb-4 pb-2">Tooltips</p>
<button
type="button"
class="btn btn-secondary m-1"
data-mdb-toggle="tooltip"
data-mdb-placement="top"
title=""
data-mdb-original-title="Tooltip on top"
>
Tooltip on top
</button>
<button
type="button"
class="btn btn-secondary m-1"
data-mdb-toggle="tooltip"
data-mdb-placement="right"
title=""
data-mdb-original-title="Tooltip on right"
>
Tooltip on right
</button>
<button
type="button"
class="btn btn-secondary m-1"
data-mdb-toggle="tooltip"
data-mdb-placement="bottom"
title=""
data-mdb-original-title="Tooltip on bottom"
>
Tooltip on bottom
</button>
<button
type="button"
class="btn btn-secondary m-1"
data-mdb-toggle="tooltip"
data-mdb-placement="left"
title=""
data-mdb-original-title="Tooltip on left"
>
Tooltip on left
</button>
</section>
<hr class="my-5" />
<section class="text-center">
<p class="subheader mb-4 pb-2">Popovers</p>
<button
type="button"
class="btn btn-success m-1"
data-mdb-container="body"
data-mdb-toggle="popover"
data-mdb-placement="top"
data-mdb-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
data-mdb-original-title=""
title=""
>
Popover on top
</button>
<button
type="button"
class="btn btn-success m-1"
data-mdb-container="body"
data-mdb-toggle="popover"
data-mdb-placement="right"
data-mdb-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
data-mdb-original-title=""
title=""
>
Popover on right
</button>
<button
type="button"
class="btn btn-success m-1"
data-mdb-container="body"
data-mdb-toggle="popover"
data-mdb-placement="bottom"
data-mdb-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus."
data-mdb-original-title=""
title=""
>
Popover on bottom
</button>
<button
type="button"
class="btn btn-success m-1"
data-mdb-container="body"
data-mdb-toggle="popover"
data-mdb-placement="left"
data-mdb-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
data-mdb-original-title=""
title=""
>
Popover on left
</button>
</section>
<hr class="my-5" />
<section>
<p class="subheader text-center mb-4 pb-2">Footer</p>
<footer class="bg-primary text-white mb-5">
<!-- Grid container -->
<div class="container p-4">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-6 col-md-12 mb-4 mb-md-0">
<h5 class="text-uppercase">Footer Content</h5>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis
molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam
voluptatem veniam, est atque cumque eum delectus sint!
</p>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!" class="text-white">Link 1</a>
</li>
<li>
<a href="#!" class="text-white">Link 2</a>
</li>
<li>
<a href="#!" class="text-white">Link 3</a>
</li>
<li>
<a href="#!" class="text-white">Link 4</a>
</li>
</ul>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!" class="text-white">Link 1</a>
</li>
<li>
<a href="#!" class="text-white">Link 2</a>
</li>
<li>
<a href="#!" class="text-white">Link 3</a>
</li>
<li>
<a href="#!" class="text-white">Link 4</a>
</li>
</ul>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- Grid container -->
<!-- Copyright -->
<div
class="text-center p-3"
style="background-color: rgba(0, 0, 0, 0.2); color: rgba(255, 255, 255, 0.6);"
>
© 2020 Copyright:
<a class="text-white" href="https://mdbootstrap.com/"> MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<footer class="bg-secondary text-white">
<!-- Grid container -->
<div class="container p-4">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-6 col-md-12 mb-4 mb-md-0">
<h5 class="text-uppercase">Footer Content</h5>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis
molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam
voluptatem veniam, est atque cumque eum delectus sint!
</p>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!" class="text-white">Link 1</a>
</li>
<li>
<a href="#!" class="text-white">Link 2</a>
</li>
<li>
<a href="#!" class="text-white">Link 3</a>
</li>
<li>
<a href="#!" class="text-white">Link 4</a>
</li>
</ul>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!" class="text-white">Link 1</a>
</li>
<li>
<a href="#!" class="text-white">Link 2</a>
</li>
<li>
<a href="#!" class="text-white">Link 3</a>
</li>
<li>
<a href="#!" class="text-white">Link 4</a>
</li>
</ul>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- Grid container -->
<!-- Copyright -->
<div
class="text-center p-3"
style="background-color: rgba(0, 0, 0, 0.2); color: rgba(255, 255, 255, 0.6);"
>
© 2020 Copyright:
<a class="text-white" href="https://mdbootstrap.com/"> MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
</section>
<hr class="my-5" />
<section>
<p class="subheader text-center mb-4 pb-2">Breadcrumbs</p>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">
<a href="#">Data</a>
</li>
</ol>
</nav>
</div>
</nav>
</section>
<hr class="my-5" />
<section>
<p class="subheader text-center mb-4 pb-2">Pills</p>
<!-- Pills navs -->
<ul class="nav nav-pills nav-justified mb-3" id="ex-3" role="tablist">
<li class="nav-item" role="presentation">
<a
class="nav-link active"
id="ex-3-tab-1"
data-mdb-toggle="pill"
href="#ex-3-pills-1"
role="tab"
aria-controls="pills-1"
aria-selected="true"
>Home</a
>
</li>
<li class="nav-item" role="presentation">
<a
class="nav-link"
id="ex-3-tab-2"
data-mdb-toggle="pill"
href="#ex-3-pills-2"
role="tab"
aria-controls="pills-2"
aria-selected="false"
>Profile</a
>
</li>
<li class="nav-item" role="presentation">
<a
class="nav-link"
id="ex-3-tab-3"
data-mdb-toggle="pill"
href="#ex-3-pills-3"
role="tab"
aria-controls="pills-3"
aria-selected="false"
>Settings</a
>
</li>
</ul>
<!-- Pills navs -->
<!-- Pills content -->
<div class="tab-content" id="ex-3-content">
<div
class="tab-pane fade show active"
id="ex-3-pills-1"
role="tabpanel"
aria-labelledby="pills-1-tab"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero sint similique eaque
excepturi quisquam molestiae, mollitia eos magnam est iure doloribus veritatis aut modi
eligendi nulla doloremque, et consequuntur! Fuga.
</div>
<div
class="tab-pane fade"
id="ex-3-pills-2"
role="tabpanel"
aria-labelledby="pills-2-tab"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero sint similique eaque
excepturi quisquam molestiae, mollitia eos magnam est iure doloribus veritatis aut modi
eligendi nulla doloremque, et consequuntur! Fuga.
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero sint similique eaque
excepturi quisquam molestiae, mollitia eos magnam est iure doloribus veritatis aut modi
eligendi nulla doloremque, et consequuntur! Fuga.
</div>
<div
class="tab-pane fade"
id="ex-3-pills-3"
role="tabpanel"
aria-labelledby="pills-3-tab"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero sint similique eaque
excepturi quisquam molestiae, mollitia eos magnam est iure doloribus veritatis aut modi
eligendi nulla doloremque, et consequuntur! Fuga.
</div>
</div>
<!-- Pills content -->
</section>
<hr class="my-5" />
<section>
<p class="subheader text-center mb-4 pb-2">Tabs</p>
<!-- Tabs navs -->
<ul class="nav nav-tabs nav-fill mb-3" id="ex-2" role="tablist">
<li class="nav-item" role="presentation">
<a
class="nav-link active"
id="ex-2-tab-1"
data-mdb-toggle="pill"
href="#ex-2-tabs-1"
role="tab"
aria-controls="pills-1"
aria-selected="true"
>Home</a
>
</li>
<li class="nav-item" role="presentation">
<a
class="nav-link"
id="ex-2-tab-2"
data-mdb-toggle="pill"
href="#ex-2-tabs-2"
role="tab"
aria-controls="pills-2"
aria-selected="false"
>Profile</a
>
</li>
<li class="nav-item" role="presentation">
<a
class="nav-link"
id="ex-2-tab-3"
data-mdb-toggle="pill"
href="#ex-2-tabs-3"
role="tab"
aria-controls="pills-3"
aria-selected="false"
>Settings</a
>
</li>
</ul>
<!-- Tabs navs -->
<!-- Tabs content-->
<div class="tab-content" id="ex-2-content">
<div
class="tab-pane fade show active"
id="ex-2-tabs-1"
role="tabpanel"
aria-labelledby="pills-1-tab"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero sint similique eaque
excepturi quisquam molestiae, mollitia eos magnam est iure doloribus veritatis aut modi
eligendi nulla doloremque, et consequuntur! Fuga.
</div>
<div class="tab-pane fade" id="ex-2-tabs-2" role="tabpanel" aria-labelledby="pills-2-tab">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero sint similique eaque
excepturi quisquam molestiae, mollitia eos magnam est iure doloribus veritatis aut modi
eligendi nulla doloremque, et consequuntur! Fuga.
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero sint similique eaque
excepturi quisquam molestiae, mollitia eos magnam est iure doloribus veritatis aut modi
eligendi nulla doloremque, et consequuntur! Fuga.
</div>
<div class="tab-pane fade" id="ex-2-tabs-3" role="tabpanel" aria-labelledby="pills-3-tab">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero sint similique eaque
excepturi quisquam molestiae, mollitia eos magnam est iure doloribus veritatis aut modi
eligendi nulla doloremque, et consequuntur! Fuga.
</div>
</div>
<!-- Tabs content-->
</section>
<hr class="my-5" />
<section>
<p class="subheader text-center mb-4 pb-2">Tables</p>
<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 colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</section>
<hr class="my-5" />
<section>
<p class="subheader text-center mb-5 pb-2">Shadows</p>
<div class="row mb-5 pb-5">
<div class="col">
<div class="shadow-demo shadow-1 mx-auto"></div>
</div>
<div class="col">
<div class="shadow-demo shadow-2 mx-auto"></div>
</div>
<div class="col">
<div class="shadow-demo shadow-3 mx-auto"></div>
</div>
<div class="col">
<div class="shadow-demo shadow-4 mx-auto"></div>
</div>
</div>
</section>
</div>
<!-- MDB -->
<script type="text/javascript" src="../../js/mdb.min.js"></script>
<!-- PRISM -->
<script type="text/javascript" src="../../dev/js/new-prism.js"></script>
<!-- MDB SNIPPET -->
<script type="text/javascript" src="../../dev/js/dist/mdbsnippet.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript"></script>
</body>
</html>
Reference in New Issue Copy Permalink