Angular Bootstrap Features sections
Angular features sections - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
MDB provides you multiple sections which help you highlight the best features of your project.
Features v.1 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.
Analytics
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores aperiam minima assumenda deleniti hic.
Tutorials
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores aperiam minima assumenda deleniti hic.
Support
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores aperiam minima assumenda deleniti hic.
<!--Section: Features v.1-->
<section class="text-center">
<!--Section heading-->
<h2 class="h1 py-5 font-weight-bold">Why is it so great?</h2>
<!--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">
<mdb-icon fas icon="chart-area" size="3x" class="red-text"></mdb-icon>
<h5 class="font-weight-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">
<mdb-icon fas icon="book" size="3x" class="cyan-text"></mdb-icon>
<h5 class="font-weight-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">
<mdb-icon far icon="comments" size="3x" class="orange-text"></mdb-icon>
<h5 class="font-weight-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 adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Learn moreCustomization
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Learn moreSupport
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Learn more
<!--Section: Features v.2-->
<section class="text-center">
<!--Section heading-->
<h2 class="h1 py-5 font-weight-bold">Why is it so great?</h2>
<!--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 text-left">
<!--Grid column-->
<div class="col-md-4 mb-4">
<div class="col-1 col-md-2 float-left">
<mdb-icon fas icon="bullhorn" size="2x" class="blue-text"></mdb-icon>
</div>
<div class="col-10 col-md-9 col-lg-10 float-right">
<h4 class="font-weight-bold">Marketing</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
nam,
aperiam minima assumenda.</p>
<a mdbBtn color="primary" size="sm" class="ml-0 waves-light" mdbWavesEffect>Learn more</a>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4 mb-4">
<div class="col-1 col-md-2 float-left">
<mdb-icon fas icon="cogs" size="2x" class="pink-text"></mdb-icon>
</div>
<div class="col-10 col-md-9 col-lg-10 float-right">
<h4 class="font-weight-bold">Customization</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
nam,
aperiam minima assumenda.</p>
<a mdbBtn color="pink" size="sm" class="ml-0 waves-light" mdbWavesEffect>Learn more</a>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4 mb-4">
<div class="col-1 col-md-2 float-left">
<mdb-icon fas icon="tachometer-alt" size="2x" class="purple-text"></mdb-icon>
</div>
<div class="col-10 col-md-9 col-lg-10 float-right">
<h4 class="font-weight-bold">Support</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
nam,
aperiam minima assumenda.</p>
<a mdbBtn color="secondary" size="sm" class="ml-0 waves-light" mdbWavesEffect>Learn more</a>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Features v.2-->
Features v.3 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.
Safety
Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti hic.
Technology
Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti hic.
Finance
Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti hic.
<!--Section: Features v.3-->
<section>
<!--Section heading-->
<h2 class="h1 py-5 font-weight-bold text-center">Why is it so great?</h2>
<!--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 text-center text-lg-left">
<img src="https://mdbootstrap.com/img/Photos/Others/screens-section.webp" 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">
<mdb-icon fas icon="reply" size="lg" class="indigo-text"></mdb-icon>
</div>
<div class="col-10">
<h5 class="font-weight-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">
<mdb-icon fas icon="reply" size="lg" class="indigo-text"></mdb-icon>
</div>
<div class="col-10">
<h5 class="font-weight-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">
<mdb-icon fas icon="reply" size="lg" class="indigo-text"></mdb-icon>
</div>
<div class="col-10">
<h5 class="font-weight-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 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.
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-->
<h2 class="h1 py-5 font-weight-bold text-center">Why is it so great?</h2>
<!--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">
<mdb-icon fas icon="flag-checkered" size="2x" class="deep-purple-text"></mdb-icon>
</div>
<div class="col-10 text-left">
<h5 class="font-weight-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">
<mdb-icon fas icon="flask" size="2x" class="deep-purple-text"></mdb-icon>
</div>
<div class="col-10 text-left">
<h5 class="font-weight-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">
<mdb-icon fas icon="glass-martini" size="2x" class="deep-purple-text"></mdb-icon>
</div>
<div class="col-10 text-left">
<h5 class="font-weight-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.webp" 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">
<mdb-icon fas icon="heart" size="2x" class="deep-purple-text"></mdb-icon>
</div>
<div class="col-10 text-left">
<h5 class="font-weight-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">
<mdb-icon fas icon="bolt" size="2x" class="deep-purple-text"></mdb-icon>
</div>
<div class="col-10 text-left">
<h5 class="font-weight-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">
<mdb-icon fas icon="magic" size="2x" class="deep-purple-text"></mdb-icon>
</div>
<div class="col-10 text-left">
<h5 class="font-weight-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-->
Angular Features - API
In this section you will find informations about required modules and available inputs, outputs, methods and events of Angular features sections.
Modules used
In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.
import { WavesModule, ButtonsModule } from 'ng-uikit-pro-standard'