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.
Title of the news
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae.
View projectTitle of the news
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae.
View projectTitle 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>
<!--Section heading-->
<h2 class="text-center h1 py-5">
<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 rounded z-depth-1">
<img src="https://mdbootstrap.com/img/Photos/Others/images/58.jpg" class="img-fluid" alt="Sample project image">
<a>
<div class="mask"></div>
</a>
</div>
<!--Excerpt-->
<div class="card-body mt-3">
<h4 class="t">
<strong>Title of the news</strong>
</h4>
<p class="grey-text">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates
repudiandae.</p>
<a class="btn btn-indigo btn-sm">
<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 rounded z-depth-1">
<img src="https://mdbootstrap.com/img/Photos/Others/project4.jpg" class="img-fluid" alt="Sample project image">
<a>
<div class="mask"></div>
</a>
</div>
<!--Excerpt-->
<div class="card-body mt-3">
<h4 class="t">
<strong>Title of the news</strong>
</h4>
<p class="grey-text">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates
repudiandae.</p>
<a class="btn btn-indigo btn-sm">
<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 rounded z-depth-1">
<img src="https://mdbootstrap.com/img/Photos/Others/images/88.jpg" class="img-fluid" alt="Sample project image">
<a>
<div class="mask"></div>
</a>
</div>
<!--Excerpt-->
<div class="card-body mt-3">
<h4 class="t">
<strong>Title of the news</strong>
</h4>
<p class="grey-text">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates
repudiandae.</p>
<a class="btn btn-indigo btn-sm">
<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.
Entertainment
This is title of the news
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam nisi ut aliquid.
View moreTechnology
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">
<!--Section heading-->
<h2 class="font-bold h1 py-5">
<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 rounded z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/laptop-sm.jpg" class="img-fluid" alt="Sample project image">
<a>
<div class="mask"></div>
</a>
</div>
<!--Excerpt-->
<div class="card-body">
<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 btn-md"> 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 rounded z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/images/19.jpg" class="img-fluid" alt="Sample project image">
<a>
<div class="mask"></div>
</a>
</div>
<!--Excerpt-->
<div class="card-body">
<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 btn-md"> 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 rounded z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/images/48.jpg" class="img-fluid" alt="Sample project image">
<a>
<div class="mask"></div>
</a>
</div>
<!--Excerpt-->
<div class="card-body">
<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 btn-md"> 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 rounded z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img (56).jpg" class="img-fluid" alt="Sample project image">
<a>
<div class="mask"></div>
</a>
</div>
<!--Excerpt-->
<div class="card-body">
<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 btn-md"> View more</a>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--/Projects section v.2-->
Projects v.3
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.
Education
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.
Marketing
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.
<!--Projects section v.3-->
<section>
<!--Section heading-->
<h2 class="text-center h1 my-5">
<strong>Our best projects</strong>
</h2>
<!--Section description-->
<p class="px-xl-5 text-center grey-text mb-5">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/images/83.jpg" alt="Sample project image" class="img-fluid rounded z-depth-1">
</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-book fa-2x cyan-text"></i>
</div>
<div class="col-10">
<h5 class="font-bold">Education</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-2x red-text"></i>
</div>
<div class="col-10 ">
<h5 class="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-->
<!--Grid row-->
<div class="row">
<div class="col-1 mr-1">
<i class="fa fa-money fa-2x deep-purple-text"></i>
</div>
<div class="col-10">
<h5 class="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>
<!--/Grid 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-bar-chart fa-2x indigo-text"></i>
</div>
<div class="col-10">
<h5 class="font-bold">Marketing</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-music fa-2x pink-text"></i>
</div>
<div class="col-10">
<h5 class="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-->
<!--Grid row-->
<div class="row mb-3">
<div class="col-1 mr-1">
<i class="fa fa-smile-o fa-2x blue-text"></i>
</div>
<div class="col-10">
<h5 class="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>
<!--/Grid 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/images/82.jpg" alt="Sample project image" class="img-fluid rounded z-depth-1">
</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.
Travel
This is card 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 projectMarketing
This is card 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 projectEntertainment
This is card 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="text-center pb-3">
<!--Section heading-->
<h2 class="font-bold h1 py-5">
<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-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/img%20%2832%29.jpg);">
<div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4 rounded">
<div>
<h6 class="purple-text">
<i class="fa fa-plane"></i>
<strong> Travel</strong>
</h6>
<h3 class="py-3 font-bold">
<strong>This is card title</strong>
</h3>
<p class="pb-3">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-secondary btn-rounded btn-md">
<i class="fa fa-clone left"></i> View project</a>
</div>
</div>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6 mb-r">
<div class="card card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20%2873%29.jpg);">
<div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4 rounded">
<div>
<h6 class="pink-text">
<i class="fa fa-pie-chart"></i>
<strong> Marketing</strong>
</h6>
<h3 class="py-3 font-bold">
<strong>This is card title</strong>
</h3>
<p class="pb-3">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-rounded btn-md">
<i class="fa fa-clone left"></i> View project</a>
</div>
</div>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6 mb-r">
<div class="card card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/City/6-col/img%20%2847%29.jpg);">
<div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4 rounded">
<div>
<h6 class="green-text">
<i class="fa fa-eye"></i>
<strong> Entertainment</strong>
</h6>
<h3 class="py-3 font-bold">
<strong>This is card title</strong>
</h3>
<p class="pb-3">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-rounded btn-md">
<i class="fa fa-clone left"></i> View project</a>
</div>
</div>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Projects section v.4-->