Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Bootstrap features sections

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

Features v.1 Premium 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?

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">Why is it so great? v.1</h1>
    <!--Section sescription-->
    <p class="section-description lead">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>

    <!--First row-->
    <div class="row features-big">
        <!--First column-->
        <div class="col-md-4 mb-r">
            <i class="fa fa-area-chart blue-text"></i>
            <h4 class="feature-title">Analytics</h4>
            <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
        </div>
        <!--/First column-->

        <!--Second column-->
        <div class="col-md-4 mb-r">
            <i class="fa fa-book green-text"></i>
            <h4 class="feature-title">Tutorials</h4>
            <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
        </div>
        <!--/Second column-->

        <!--Third column-->
        <div class="col-md-4 mb-r">
            <i class="fa fa-coffee red-text"></i>
            <h4 class="feature-title">Relax</h4>
            <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
        </div>
        <!--/Third column-->
    </div>
    <!--/First row-->

</section>
<!--/Section: Features v.1-->

Features v.2 Premium 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?

Marketing

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

Learn more

Customization

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

Learn more

Support

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

Learn more

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

    <!--Section heading-->
    <h1 class="section-heading">Why is it so great? v.2</h1>
    <!--Section sescription-->
    <p class="section-description lead">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>

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

        <!--First column-->
        <div class="col-md-4">
            <div class="col-2 float-left">
                <i class="fa fa-bullhorn blue-text"></i>
            </div>
            <div class="col-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 deleniti hic.</p>
                <a class="btn btn-primary">Learn more</a>
                <div style="height:20px"></div>
            </div>
        </div>
        <!--/First column-->

        <!--Second column-->
        <div class="col-md-4">
            <div class="col-2 float-left">
                <i class="fa fa-cogs green-text"></i>
            </div>
            <div class="col-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 deleniti hic.</p>
                <a class="btn btn-default">Learn more</a>
                <div style="height:20px"></div>
            </div>
        </div>
        <!--/Second column-->

        <!--Third column-->
        <div class="col-md-4">
            <div class="col-2 float-left">
                <i class="fa fa-dashboard red-text"></i>
            </div>
            <div class="col-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 deleniti hic.</p>
                <a class="btn btn-danger">Learn more</a>
                <div style="height:20px"></div>
            </div>
        </div>
        <!--/Third column-->
    </div>
    <!--/First row-->

</section>
<!--/Section: Features v.2-->

Features v.3 Premium 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?

MDB website displayed on iPad
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">Why is it so great? v.3</h1>
    <!--Section sescription-->
    <p class="section-description lead">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>

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

        <!--First column-->
        <div class="col-md-5 mb-r center-on-small-only">
            <img src="https://mdbootstrap.com/img/Mockups/Transparent/Small/ipad1.jpg" alt="" class="z-depth-0">
        </div>
        <!--/First column-->

        <!--Second column-->
        <div class="col-md-7 center-on-small">
            <!--First row-->
            <div class="row">
                <div class="col-1">
                    <i class="fa fa-bank indigo-text"></i>
                </div>
                <div class="col-10">
                    <h4 class="feature-title">Safety</h4>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                </div>
            </div>
            <!--/First row-->

            <div style="height:50px"></div>

            <!--Second row-->
            <div class="row">
                <div class="col-1">
                    <i class="fa fa-code indigo-text"></i>
                </div>
                <div class="col-10">
                    <h4 class="feature-title">Technology</h4>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                </div>
            </div>
            <!--/Second row-->

            <div style="height:50px"></div>

            <!--Third row-->
            <div class="row">
                <div class="col-1">
                    <i class="fa fa-money indigo-text"></i>
                </div>
                <div class="col-10">
                    <h4 class="feature-title">Finance</h4>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                </div>
            </div>
            <!--/Third row-->
        </div>
        <!--/Second column-->
    </div>
    <!--/First row-->

</section>
<!--/Section: Features v.3-->

Features v.4 Premium 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?

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.

MDB website displayed on iPhone

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">Why is it so great? v.4</h1>
    <!--Section sescription-->
    <p class="section-description lead">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>

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

        <!--First column-->
        <div class="col-md-4">
            <!--First row-->
            <div class="row">
                <div class="col-2">
                    <i class="fa fa-flag-checkered indigo-text"></i>
                </div>
                <div class="col-10">
                    <h4 class="feature-title">International</h4>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                    <div style="height:30px"></div>
                </div>
            </div>
            <!--/First row-->

            <!--Second row-->
            <div class="row">
                <div class="col-2">
                    <i class="fa fa-flask blue-text"></i>
                </div>
                <div class="col-10">
                    <h4 class="feature-title">Experimental</h4>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                    <div style="height:30px"></div>
                </div>
            </div>
            <!--/Second row-->

            <!--Third row-->
            <div class="row">
                <div class="col-2">
                    <i class="fa fa-glass cyan-text"></i>
                </div>
                <div class="col-10">
                    <h4 class="feature-title">Relaxing</h4>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                    <div style="height:30px"></div>
                </div>
            </div>
            <!--/Third row-->
        </div>
        <!--/First column-->

        <!--Second column-->
        <div class="col-md-4 mb-r center-on-small-only flex-center">
            <img src="https://mdbootstrap.com/img/Mockups/Transparent/Small/iphone3.jpg" alt="" class="z-depth-0">
        </div>
        <!--/Second column-->

        <!--Third column-->
        <div class="col-md-4">
            <!--First row-->
            <div class="row">
                <div class="col-2">
                    <i class="fa fa-heart red-text"></i>
                </div>
                <div class="col-10">
                    <h4 class="feature-title">Beloved</h4>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                    <div style="height:30px"></div>
                </div>
            </div>
            <!--/First row-->

            <!--Second row-->
            <div class="row">
                <div class="col-2">
                    <i class="fa fa-flash orange-text"></i>
                </div>
                <div class="col-10">
                    <h4 class="feature-title">Rapid</h4>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                    <div style="height:30px"></div>
                </div>
            </div>
            <!--/Second row-->

            <!--Third row-->
            <div class="row">
                <div class="col-2">
                    <i class="fa fa-magic lime-text"></i>
                </div>
                <div class="col-10">
                    <h4 class="feature-title">Magical</h4>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                    <div style="height:30px"></div>
                </div>
            </div>
            <!--/Third row-->
        </div>
        <!--/Third column-->
    </div>
    <!--/First row-->

</section>
<!--/Section: Features v.4-->