Bootstrap features sections

MDB provides you multiple sections which help you highlight the best features of your project.

Features v.1 MDB Pro component

    
<!--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">
            <i class="fa fa-area-chart fa-3x red-text"></i>
            <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">
            <i class="fa fa-book fa-3x cyan-text"></i>
            <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">
            <i class="fa fa-comments-o fa-3x orange-text"></i>
            <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

    
 <!--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">
                <i class="fa fa-bullhorn blue-text fa-2x"></i>
            </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">
                <i class="fa fa-cogs pink-text fa-2x"></i>
            </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">
                <i class="fa fa-dashboard purple-text fa-2x"></i>
            </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. 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-->
    <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.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-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">
                    <i class="fa fa-mail-forward fa-lg indigo-text"></i>
                </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">
                    <i class="fa fa-mail-forward fa-lg indigo-text"></i>
                </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">
                    <i class="fa fa-2x fa-flag-checkered deep-purple-text"></i>
                </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">
                    <i class="fa fa-2x fa-flask deep-purple-text"></i>
                </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">
                    <i class="fa fa-2x fa-glass deep-purple-text"></i>
                </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.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-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">
                    <i class="fa fa-2x fa-flash deep-purple-text"></i>
                </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">
                    <i class="fa fa-2x fa-magic deep-purple-text"></i>
                </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-->
    

API Reference:

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

API Reference for MDB Angular Features Sections:

// For MDB Angular Pro
import { WavesModule, ButtonsModule  } from 'ng-uikit-pro-standard'

// For MDB Angular Free
import { WavesModule, ButtonsModule  } from 'angular-bootstrap-md'