Bootstrap features sections
MDB provides you multiple sections which help you highlight the best features of your project.
Features v.1
Why is it so great?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Analytics
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.
Tutorials
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.
Support
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.
<!--Section: Features v.1-->
<section class="text-center">
<!--Section heading-->
<h1 class="py-5 font-bold">Why is it so great?</h1>
<!--Section description-->
<p class="px-5 mb-5 pb-3 lead grey-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam.</p>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-4 mb-r">
<i class="fa fa-area-chart fa-3x red-text"></i>
<h5 class="font-bold mt-3">Analytics</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti
hic.
</p>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4 mb-r">
<i class="fa fa-book fa-3x cyan-text"></i>
<h5 class="font-bold mt-3">Tutorials</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti
hic.
</p>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4 mb-r">
<i class="fa fa-comments-o fa-3x orange-text"></i>
<h5 class="font-bold mt-3">Support</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti
hic.
</p>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Features v.1-->
Features v.2 MDB Pro component
Why is it so great?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Marketing
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.
Learn moreCustomization
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.
Learn moreSupport
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.
Learn more
<!--Section: Features v.2-->
<section class="feature-box">
<!--Section heading-->
<h1 class="py-5 font-bold">Why is it so great?</h1>
<!--Section description-->
<p class="px-5 mb-5 pb-3 lead grey-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam.</p>
<!--Grid row-->
<div class="row features-small">
<!--Grid column-->
<div class="col-md-4 mb-r">
<div class="col-1 col-md-2 float-left">
<i class="fa fa-bullhorn blue-text"></i>
</div>
<div class="col-10 col-md-9 col-lg-10 float-right">
<h4 class="font-bold">Marketing</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
<a class="btn btn-primary btn-sm ml-0">Learn more</a>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4 mb-r">
<div class="col-1 col-md-2 float-left">
<i class="fa fa-cogs pink-text"></i>
</div>
<div class="col-10 col-md-9 col-lg-10 float-right">
<h4 class="font-bold">Customization</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
<a class="btn btn-pink btn-sm ml-0">Learn more</a>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4 mb-r">
<div class="col-1 col-md-2 float-left">
<i class="fa fa-dashboard purple-text"></i>
</div>
<div class="col-10 col-md-9 col-lg-10 float-right">
<h4 class="font-bold">Support</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
<a class="btn btn-secondary btn-sm ml-0">Learn more</a>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Features v.2-->
Features v.3
Why is it so great?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Safety
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.
Technology
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.
Finance
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.
<!--Section: Features v.3-->
<section>
<!--Section heading-->
<h1 class="py-5 font-bold text-center">Why is it so great?</h1>
<!--Section description-->
<p class="px-5 mb-5 pb-3 lead grey-text text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam.</p>
<!--Grid row-->
<div class="row pt-2">
<!--Grid column-->
<div class="col-lg-5 mb-r center-on-small-only">
<img src="https://mdbootstrap.com/img/Photos/Others/screens-section.jpg" alt="" class="img-fluid z-depth-0">
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-7">
<!--Grid row-->
<div class="row pb-3">
<div class="col-2 col-md-1">
<i class="fa fa-mail-forward fa-lg indigo-text"></i>
</div>
<div class="col-10">
<h5 class="font-bold text-left mb-3 dark-grey-text">Safety</h5>
<p class="grey-text text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda
deleniti hic.</p>
</div>
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row pb-3">
<div class="col-2 col-md-1">
<i class="fa fa-mail-forward fa-lg indigo-text"></i>
</div>
<div class="col-10">
<h5 class="font-bold text-left mb-3 dark-grey-text">Technology</h5>
<p class="grey-text text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda
deleniti hic.</p>
</div>
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row pb-3">
<div class="col-2 col-md-1">
<i class="fa fa-mail-forward fa-lg indigo-text"></i>
</div>
<div class="col-10">
<h5 class="font-bold text-left mb-3 dark-grey-text">Finance</h5>
<p class="grey-text text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda
deleniti hic.</p>
</div>
</div>
<!--Grid row-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Features v.3-->
Features v.4
Why is it so great?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
International
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.
Experimental
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.
Relaxing
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.
Beloved
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.
Rapid
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.
Magical
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.
<!--Section: Features v.4-->
<section>
<!--Section heading-->
<h1 class="py-5 font-bold text-center">Why is it so great?</h1>
<!--Section description-->
<p class="px-5 mb-5 pb-3 lead grey-text text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam.</p>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-4">
<!--Grid row-->
<div class="row mb-2">
<div class="col-2">
<i class="fa fa-2x fa-flag-checkered deep-purple-text"></i>
</div>
<div class="col-10 text-left">
<h5 class="font-bold">International</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda
deleniti hic.</p>
</div>
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row mb-2">
<div class="col-2">
<i class="fa fa-2x fa-flask deep-purple-text"></i>
</div>
<div class="col-10 text-left">
<h5 class="font-bold">Experimental</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda
deleniti hic.</p>
</div>
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row mb-2">
<div class="col-2">
<i class="fa fa-2x fa-glass deep-purple-text"></i>
</div>
<div class="col-10 text-left">
<h5 class="font-bold">Relaxing</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda
deleniti hic.</p>
</div>
</div>
<!--Grid row-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4 mb-2 center-on-small-only flex-center">
<img src="https://mdbootstrap.com/img/Mockups/Transparent/Small/iphone-portfolio1.png" alt="" class="z-depth-0">
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4">
<!--Grid row-->
<div class="row mb-2">
<div class="col-2">
<i class="fa fa-2x fa-heart deep-purple-text"></i>
</div>
<div class="col-10 text-left">
<h5 class="font-bold">Beloved</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda
deleniti hic.</p>
</div>
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row mb-2">
<div class="col-2">
<i class="fa fa-2x fa-flash deep-purple-text"></i>
</div>
<div class="col-10 text-left">
<h5 class="font-bold">Rapid</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda
deleniti hic.</p>
</div>
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row mb-2">
<div class="col-2">
<i class="fa fa-2x fa-magic deep-purple-text"></i>
</div>
<div class="col-10 text-left">
<h5 class="font-bold">Magical</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda
deleniti hic.</p>
</div>
</div>
<!--Grid row-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--/Section: Features v.4-->