Bootstrap features sections

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 nam, aperiam minima assumenda deleniti hic.

Tutorials

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Relax

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

            
<!--Section: Features v.1-->
<section class="section feature-box">

    <!--Section heading-->
    <h1 class="section-heading pt-4">Why is it so great?</h1>
    <!--Section description-->
    <p class="section-description 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-big">

        <!--Grid column-->
        <div class="col-md-4 mb-r">
            <i class="fa fa-area-chart red-text"></i>
            <h5 class="feature-title">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 cyan-text"></i>
            <h5 class="feature-title">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-coffee orange-text"></i>
            <h5 class="feature-title">Relax</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 adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum.

Marketing

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.

Learn more

Customization

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.

Learn more

Support

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.

Learn more

            
<!--Section: Features v.2-->
<section class="section feature-box">

    <!--Section heading-->
    <h1 class="section-heading pt-4">Why is it so great?</h1>
    <!--Section description-->
    <p class="section-description lead grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum.</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="feature-title">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" ripple-radius>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="feature-title">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" ripple-radius>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="feature-title">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" ripple-radius>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 adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?

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 class="section feature-box">

    <!--Section heading-->
    <h1 class="section-heading pt-4">Why is it so great?</h1>
    <!--Section description-->
    <p class="section-description lead grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>

    <!--Grid row-->
    <div class="row features-small pt-2">

        <!--Grid column-->
        <div class="col-lg-5 mb-r center-on-small-only">
            <img src="https://mdbootstrap.com/img/Mockups/Transparent/Small/ipad-portfolio2.png" 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-bank blue-text"></i>
                </div>
                <div class="col-10">
                    <h5 class="feature-title">Safety</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 pb-3">
                <div class="col-2 col-md-1">
                    <i class="fa fa-code blue-text"></i>
                </div>
                <div class="col-10">
                    <h5 class="feature-title">Technology</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 pb-3">
                <div class="col-2 col-md-1">
                    <i class="fa fa-money blue-text"></i>
                </div>
                <div class="col-10">
                    <h5 class="feature-title">Finance</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.3-->

Features v.4 MDB Pro component

Why is it so great?

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 class="section feature-box">

    <!--Section heading-->
    <h1 class="section-heading pt-4">Why is it so great?</h1>
    <!--Section description-->
    <p class="section-description lead grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>

    <!--Grid row-->
    <div class="row features-small">

        <!--Grid column-->
        <div class="col-md-4">

            <!--Grid row-->
            <div class="row mb-2">
                <div class="col-2">
                    <i class="fa fa-flag-checkered indigo-text"></i>
                </div>
                <div class="col-10">
                    <h5 class="feature-title">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-flask blue-text"></i>
                </div>
                <div class="col-10">
                    <h5 class="feature-title">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-glass cyan-text"></i>
                </div>
                <div class="col-10">
                    <h5 class="feature-title">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-heart deep-purple-text"></i>
                </div>
                <div class="col-10">
                    <h5 class="feature-title">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-flash purple-text"></i>
                </div>
                <div class="col-10">
                    <h5 class="feature-title">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-magic pink-text"></i>
                </div>
                <div class="col-10">
                    <h5 class="feature-title">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-->