Bootstrap project sections

Project sections help you to present your achievements and experience.

Projects v.1 MDB Pro component

Our best projects

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sample project image
Culinary

Title of the news

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque.

View project
Sample project image
Business

Title of the news

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime facere possimus.

View project
Sample project image
Travels

Title of the news

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae.

View project 
            
<!--Projects section v.1-->
<section class="section pb-3">

    <!--Section heading-->
    <h2 class="section-heading h1 pt-4"><strong>Our best projects</strong></h2>

    <!--Section description-->
    <p class="section-description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <!--Grid row-->
    <div class="row text-center">

        <!--Grid column-->
        <div class="col-lg-4 col-md-12 mb-r">

            <!--Featured image-->
            <div class="view overlay hm-white-slight z-depth-2">

                <img src="https://mdbootstrap.com/img/Photos/Others/food.jpg" alt="Sample project image">

                <a>
                    <div class="mask"></div>
                </a>
            </div>

            <!--Excerpt-->
            <div class="card-body mt-1">
                <a href="" class="pink-text">
                    <h5><i class="fa fa-coffee"></i> Culinary</h5>
                </a>
                <h4>Title of the news</h4>
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
                    deleniti atque.</p>
                <a class="btn btn-indigo btn-sm" ripple-radius><i class="fa fa-clone left"></i> View project</a>
            </div>

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-4 col-md-6 mb-r">

            <!--Featured image-->
            <div class="view overlay hm-white-slight z-depth-2">

                <img src="https://mdbootstrap.com/img/Photos/Others/project4.jpg" alt="Sample project image">

                <a>
                    <div class="mask"></div>
                </a>
            </div>

            <!--Excerpt-->
            <div class="card-body mt-1">
                <a href="" class="blue-text">
                    <h5><i class="fa fa-camera"></i> Business</h5>
                </a>
                <h4>Title of the news</h4>
                <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime
                    facere possimus.</p>
                <a class="btn btn-indigo btn-sm" ripple-radius><i class="fa fa-clone left"></i> View project</a>
            </div>

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-4 col-md-6 mb-r">

            <!--Featured image-->
            <div class="view overlay hm-white-slight z-depth-2">

                <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img (73).jpg" alt="Sample project image">

                <a>
                    <div class="mask"></div>
                </a>
            </div>

            <!--Excerpt-->
            <div class="card-body mt-1">
                <a href="" class="purple-text">
                    <h5><i class="fa fa-plane"></i> Travels</h5>
                </a>
                <h4>Title of the news</h4>
                <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates
                    repudiandae.</p>
                <a class="btn btn-indigo btn-sm" ripple-radius><i class="fa fa-clone left"></i> View project</a>
            </div>

        </div>
        <!--Grid column-->

    </div>
    <!--Grid row-->

</section>
<!--/Projects section v.1-->

Projects v.2 MDB Pro component

Our best projects

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sample project image
Marketing

This is title of the news

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam.

View more
Sample project image
Entertainment

This is title of the news

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam nisi ut aliquid.

View more
Sample project image
Travel

This is title of the news

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam.

View more
Sample project image
Technology

This is title of the news

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam nisi ut aliquid.

View more 
            
<!--Projects section v.2-->
<section class="section text-center pb-3">

    <!--Section heading-->
    <h2 class="section-heading h1 pt-4"><strong>Our best projects</strong></h2>
    <!--Section description-->
    <p class="section-description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <!--Grid row-->
    <div class="row d-flex justify-content-center">

        <!--Grid column-->
        <div class="col-lg-6 col-xl-5 mb-3">

            <!--Featured image-->
            <div class="view overlay hm-white-slight z-depth-2">

                <img src="https://mdbootstrap.com/img/Photos/Others/laptop-sm.jpg" alt="Sample project image">

                <a>
                    <div class="mask"></div>
                </a>
            </div>

            <!--Excerpt-->
            <div class="card-body mt-1">
                <a href="" class="green-text">
                    <h5><i class="fa fa-line-chart"></i> Marketing</h5>
                </a>
                <h4>This is title of the news</h4>
                <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
                    quia non numquam.</p>
                <a class="btn btn-success btn-rounded" ripple-radius> View more</a>
            </div>

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-6 col-xl-5 mb-3">

            <!--Featured image-->
            <div class="view overlay hm-white-slight z-depth-2">

                <img src="https://mdbootstrap.com/img/Photos/Horizontal/City/6-col/img%20(45).jpg" alt="Sample project image">

                <a>
                    <div class="mask"></div>
                </a>
            </div>

            <!--Excerpt-->
            <div class="card-body mt-1">
                <a href="" class="blue-text">
                    <h5><i class="fa fa-eye"></i> Entertainment</h5>
                </a>
                <h4>This is title of the news</h4>
                    <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam nisi
                        ut aliquid.</p>
                    <a class="btn btn-success btn-rounded" ripple-radius> View more</a>
            </div>

        </div>
        <!--Grid column-->

    </div>
    <!--Grid row-->

    <!--Grid row-->
    <div class="row d-flex justify-content-center">

        <!--Grid column-->
        <div class="col-lg-6 col-xl-5 mb-3">

            <!--Featured image-->
            <div class="view overlay hm-white-slight z-depth-2">

                <img src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img%20(31).jpg" alt="Sample project image">

                <a>
                    <div class="mask"></div>
                </a>
            </div>

            <!--Excerpt-->
            <div class="card-body mt-1">
                <a href="" class="brown-text">
                    <h5><i class="fa fa-camera"></i> Travel</h5>
                </a>
                <h4>This is title of the news</h4>
                    <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
                        sed quia non numquam.</p>
                    <a class="btn btn-success btn-rounded" ripple-radius> View more</a>
            </div>

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-6 col-xl-5 mb-3">

            <!--Featured image-->
            <div class="view overlay hm-white-slight z-depth-2">

                <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img (56).jpg" alt="Sample project image">

                <a>
                    <div class="mask"></div>
                </a>
            </div>

            <!--Excerpt-->
            <div class="card-body mt-1">
                <a href="" class="cyan-text">
                    <h5><i class="fa fa-phone"></i> Technology</h5>
                </a>
                <h4>This is title of the news</h4>
                <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam nisi ut
                    aliquid.</p>
                <a class="btn btn-success btn-rounded" ripple-radius> View more</a>
            </div>

        </div>
        <!--Grid column-->

    </div>
    <!--Grid row-->

</section>
<!--/Projects section v.2-->

Projects v.3 MDB Pro component

Our best projects

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sample project image
Safety

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

Technology

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

Finance

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

Followers

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

Entertainment

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

Communication

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

Sample project image 
            
<!--Projects section v.3-->
<section class="section extra-margins pb-3">

    <!--Section heading-->
    <h2 class="section-heading h1 pt-4"><strong>Our best projects</strong></h2>
    <!--Section description-->
    <p class="section-description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

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

        <!--Grid column-->
        <div class="col-lg-6 col-xl-5 pr-lg-5 pb-5">

            <!--Image-->
            <img src="https://mdbootstrap.com/img/Photos/Others/img (31).jpg" alt="Sample project image" class="img-fluid z-depth-2">

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-6 col-xl-7 pl-lg-5 pb-4">

            <!--Grid row-->
            <div class="row mb-3">
                <div class="col-1 mr-1">
                    <i class="fa fa-bank fa-lg cyan-text"></i>
                </div>
                <div class="col-10">
                    <h5 class="feature-title font-bold">Safety</h5>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam
                        minima assumenda voluptate velit.</p>
                </div>
            </div>
            <!--Grid row-->

            <!--Grid row-->
            <div class="row mb-3">
                <div class="col-1 mr-1">
                    <i class="fa fa-code fa-lg red-text"></i>
                </div>
                <div class="col-10 ">
                    <h5 class="feature-title font-bold">Technology</h5>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam
                        minima assumenda voluptate velit.</p>
                </div>
            </div>
            <!--Grid row-->

            <!--Third row-->
            <div class="row">
                <div class="col-1 mr-1">
                    <i class="fa fa-money fa-lg brown-text"></i>
                </div>
                <div class="col-10">
                    <h5 class="feature-title font-bold">Finance</h5>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam
                        minima assumenda voluptate velit.</p>
                </div>
            </div>
            <!--/Third row-->

        </div>
        <!--Grid column-->

    </div>
    <!--Grid row-->

    <hr>

    <!--Grid row-->
    <div class="row pt-5">

        <!--Grid column-->
        <div class="col-lg-6 col-xl-7 mb-3">

            <!--Grid row-->
            <div class="row mb-3">
                <div class="col-1 mr-1">
                    <i class="fa fa-eye fa-lg light-green-text"></i>
                </div>
                <div class="col-10">
                    <h5 class="feature-title font-bold">Followers</h5>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam
                        minima assumenda voluptate velit.</p>
                </div>
            </div>
            <!--Grid row-->

            <!--Grid row-->
            <div class="row mb-3">
                <div class="col-1 mr-1">
                    <i class="fa fa-heart-o fa-lg pink-text"></i>
                </div>
                <div class="col-10">
                    <h5 class="feature-title font-bold">Entertainment</h5>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam
                        minima assumenda voluptate velit.</p>
                </div>
            </div>
            <!--Grid row-->

            <!--Third row-->
            <div class="row mb-3">
                <div class="col-1 mr-1">
                    <i class="fa fa-smile-o fa-lg amber-text"></i>
                </div>
                <div class="col-10">
                    <h5 class="feature-title font-bold">Communication</h5>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam
                        minima assumenda voluptate velit.</p>
                </div>
            </div>
            <!--/Third row-->

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-6 col-xl-5 mb-3">

            <!--Image-->
            <img src="https://mdbootstrap.com/img/Photos/Others/img (30).jpg" alt="Sample project image" class="img-fluid z-depth-2">

        </div>
        <!--Grid column-->

    </div>
    <!--Grid row-->

</section>
<!--Projects section v.3-->

Projects v.4 MDB Pro component

Our best projects

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Card image
Travel

Project title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus quod minima assumenda qui mollitia architecto soluta at ipsa itaque nam, aliquam minus odit expedita voluptatibus fugiat amet, nostrum error dolorum!.

View project
Card image
Photography

Project title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.

View project
Card image
Entertainment

Project title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.

View project 
            
<!--Projects section v.4-->
<section class="section pb-3">

    <!--Section heading-->
    <h2 class="section-heading h1 pt-4"><strong>Our best projects</strong></h2>
    <!--Section description-->
    <p class="section-description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

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

        <!--Grid column-->
        <div class="col-md-12 mb-r">
            <div class="card card-inverse">
                <img class="card-img" src="https://mdbootstrap.com/img/Photos/Others/img%20(32).jpg" alt="Card image">
                <div class="card-img-overlay text-white text-center d-flex align-items-center rgba-black-strong">
                    <div>
                        <a href="" class="purple-text">
                            <h5><i class="fa fa-plane"></i>Travel</h5>
                        </a>
                        <h3 class="mb-4 mt-3"><strong>Project title</strong></h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus quod minima assumenda
                            qui mollitia architecto soluta at ipsa itaque nam, aliquam minus odit expedita voluptatibus
                            fugiat amet, nostrum error dolorum!.</p>
                        <a class="btn btn-secondary btn-sm" ripple-radius><i class="fa fa-clone left"></i> View project</a>
                    </div>
                </div>
            </div>
        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-md-6">
            <div class="card card-inverse">
                <img class="card-img" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(73).jpg" alt="Card image">
                <div class="card-img-overlay text-white text-center d-flex align-items-center  rgba-black-strong">
                    <div>
                        <a href="" class="pink-text">
                            <h5><i class="fa fa-camera"></i>Photography</h5>
                        </a>
                        <h3 class="mb-4 mt-3"><strong>Project title</strong></h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,
                            optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos.
                            Odit sed qui, dolorum!.</p>
                        <a class="btn btn-pink btn-sm" ripple-radius><i class="fa fa-clone left"></i> View project</a>
                    </div>
                </div>
            </div>
        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-md-6">
            <div class="card card-inverse">
                <img class="card-img" src="https://mdbootstrap.com/img/Photos/Horizontal/City/6-col/img%20(47).jpg" alt="Card image">
                <div class="card-img-overlay text-white text-center d-flex align-items-center rgba-black-strong">
                    <div>
                        <a href="" class="green-text">
                            <h5><i class="fa fa-eye"></i>Entertainment</h5>
                        </a>
                        <h3 class="mb-4 mt-4"><strong>Project title</strong></h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,
                            optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos.
                            Odit sed qui, dolorum!.</p>
                        <a class="btn btn-success btn-sm" ripple-radius><i class="fa fa-clone left"></i> View project</a>
                    </div>
                </div>
            </div>
        </div>
        <!--Grid column-->

    </div>
    <!--Grid row-->

</section>
<!--Projects section v.4-->