Angular Bootstrap Project sections
Angular project sections - Bootstrap 4 & Material Design
Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5.
While we'll continue to support for the transition period, we encourage you to migrate to
MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition,
enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO
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 est laborum.
Title of the news
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae.
View project
Title of the news
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae.
View project
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>
<!--Section heading-->
<h2 class="text-center h1 py-5">
<strong>Our best projects</strong>
</h2>
<!--Section description-->
<p class="grey-text pb-5 text-center">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-4">
<!--Featured image-->
<div class="view overlay rounded z-depth-1 waves-light" mdbWavesEffect>
<img src="https://mdbootstrap.com/img/Photos/Others/images/58.webp" class="img-fluid" alt="Sample project image">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Excerpt-->
<mdb-card-body class="mt-3">
<h4>
<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 mdbBtn color="indigo" size="sm" class="waves-light" mdbWavesEffect>
<mdb-icon far icon="clone" class="left"></mdb-icon> View project</a>
</mdb-card-body>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay rounded z-depth-1 waves-light" mdbWavesEffect>
<img src="https://mdbootstrap.com/img/Photos/Others/project4.webp" class="img-fluid" alt="Sample project image">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Excerpt-->
<mdb-card-body class="mt-3">
<h4>
<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 mdbBtn color="indigo" size="sm" class="waves-light" mdbWavesEffect>
<mdb-icon far icon="clone" class="left"></mdb-icon> View project</a>
</mdb-card-body>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay rounded z-depth-1 waves-light" mdbWavesEffect>
<img src="https://mdbootstrap.com/img/Photos/Others/images/88.webp" class="img-fluid" alt="Sample project image">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Excerpt-->
<mdb-card-body class="mt-3">
<h4>
<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 mdbBtn color="indigo" size="sm" class="waves-light" mdbWavesEffect>
<mdb-icon far icon="clone" class="left"></mdb-icon> View project</a>
</mdb-card-body>
</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 est laborum.
Entertainment
Title of the news
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam nisi ut aliquid, aspernatur aut odit aut fugit.
View more
.webp)
Technology
Title of the news
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, illum qui dolorem eum fugiat quo voluptas.
View more
<!--Projects section v.2-->
<section class="section text-center">
<!--Section heading-->
<h2 class="font-weight-bold h1 py-5">
<strong>Our best projects</strong>
</h2>
<!--Section description-->
<p class="grey-text pb-5 text-center mx-xl-5 px-xl-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 d-flex justify-content-center">
<!--Grid column-->
<div class="col-lg-6 col-xl-5 mb-3">
<!--Featured image-->
<div class="view overlay rounded z-depth-2 waves-light" mdbWavesEffect>
<img src="https://mdbootstrap.com/img/Photos/Others/laptop-sm.webp" class="img-fluid" alt="Sample project image">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Excerpt-->
<mdb-card-body>
<a href="" class="green-text">
<h5 class="font-weight-bold mt-2 mb-3">
<mdb-icon fas icon="chart-line"></mdb-icon> Marketing</h5>
</a>
<h4 class="font-weight-bold mt-2 mb-3">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 mdbBtn color="success" size="md" rounded="true" class="waves-light" mdbWavesEffect> View more</a>
</mdb-card-body>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-6 col-xl-5 mb-3">
<!--Featured image-->
<div class="view overlay rounded z-depth-2 waves-light" mdbWavesEffect>
<img src="https://mdbootstrap.com/img/Photos/Others/images/19.webp" class="img-fluid" alt="Sample project image">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Excerpt-->
<mdb-card-body>
<a href="" class="blue-text">
<h5 class="font-weight-bold mt-2 mb-3">
<mdb-icon far icon="eye"></mdb-icon> Entertainment</h5>
</a>
<h4 class="font-weight-bold mt-2 mb-3">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 mdbBtn color="success" size="md" rounded="true" class="waves-light" mdbWavesEffect> View more</a>
</mdb-card-body>
</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 rounded z-depth-2 waves-light" mdbWavesEffect>
<img src="https://mdbootstrap.com/img/Photos/Others/images/48.webp" class="img-fluid" alt="Sample project image">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Excerpt-->
<mdb-card-body>
<a href="" class="brown-text">
<h5 class="font-weight-bold mt-2 mb-3">
<mdb-icon fas icon="camera"></mdb-icon> Travel</h5>
</a>
<h4 class="font-weight-bold mt-2 mb-3">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 mdbBtn color="success" size="md" rounded="true" class="waves-light" mdbWavesEffect> View more</a>
</mdb-card-body>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-6 col-xl-5 mb-3">
<!--Featured image-->
<div class="view overlay rounded z-depth-2 waves-light" mdbWavesEffect>
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img (56).webp" class="img-fluid"
alt="Sample project image">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Excerpt-->
<mdb-card-body>
<a href="" class="cyan-text">
<h5 class="font-weight-bold mt-2 mb-3">
<mdb-icon fas icon="phone"></mdb-icon> Technology</h5>
</a>
<h4 class="font-weight-bold mt-2 mb-3">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 mdbBtn color="success" size="md" rounded="true" class="waves-light" mdbWavesEffect> View more</a>
</mdb-card-body>
</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 est laborum.
Education
Lorem ipsum dolor sit amet, consectetur adipisicing. Reprehenderit maiores nam, aperiam minima elit assumenda voluptate velit.
Technology
Lorem ipsum dolor sit amet, consectetur adipisicing. Reprehenderit maiores nam, aperiam minima elit assumenda voluptate velit.
Finance
Lorem ipsum dolor sit amet, consectetur adipisicing. Reprehenderit maiores nam, aperiam minima elit assumenda voluptate velit.
Marketing
Lorem ipsum dolor sit amet, consectetur adipisicing. Reprehenderit maiores nam, aperiam minima elit assumenda voluptate velit.
Entertainment
Lorem ipsum dolor sit amet, consectetur adipisicing. Reprehenderit maiores nam, aperiam minima elit assumenda voluptate velit.
Communication
Lorem ipsum dolor sit amet, consectetur adipisicing. Reprehenderit maiores nam, aperiam minima elit assumenda voluptate velit.
<!-- Projects section v.3 -->
<section class="my-5">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold text-center my-5">Our best projects</h2>
<!-- Section description -->
<p class="grey-text text-center w-responsive mx-auto 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 est laborum.</p>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-lg-5 mb-lg-0 mb-5">
<!--Image-->
<img src="https://mdbootstrap.com/img/Photos/Others/images/83.webp" alt="Sample project image" class="img-fluid rounded z-depth-1">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-7">
<!-- Grid row -->
<div class="row mb-3">
<div class="col-md-1 col-2">
<mdb-icon fas icon="book" size="2x" class="cyan-text"></mdb-icon>
</div>
<div class="col-md-11 col-10">
<h5 class="font-weight-bold mb-3">Education</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing. Reprehenderit maiores nam,
aperiam
minima elit assumenda
voluptate velit.</p>
</div>
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="row mb-3">
<div class="col-md-1 col-2">
<mdb-icon fas icon="code" size="2x" class="red-text"></mdb-icon>
</div>
<div class="col-md-11 col-10">
<h5 class="font-weight-bold mb-3">Technology</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing. Reprehenderit maiores nam,
aperiam
minima elit assumenda
voluptate velit.</p>
</div>
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="row">
<div class="col-md-1 col-2">
<mdb-icon far icon="money-bill-alt" size="2x" class="deep-purple-text"></mdb-icon>
</div>
<div class="col-md-11 col-10">
<h5 class="font-weight-bold mb-3">Finance</h5>
<p class="grey-text mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing. Reprehenderit maiores
nam,
aperiam minima elit assumenda
voluptate velit.</p>
</div>
</div>
<!-- Grid row -->
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<hr class="my-5">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-lg-7">
<!-- Grid row -->
<div class="row mb-3">
<div class="col-md-1 col-2">
<mdb-icon fas icon="chart-bar" size="2x" class="indigo-text"></mdb-icon>
</div>
<div class="col-md-11 col-10">
<h5 class="font-weight-bold mb-3">Marketing</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing. Reprehenderit maiores nam,
aperiam
minima elit assumenda
voluptate velit.</p>
</div>
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="row mb-3">
<div class="col-md-1 col-2">
<mdb-icon fas icon="music" size="2x" class="pink-text"></mdb-icon>
</div>
<div class="col-md-11 col-10">
<h5 class="font-weight-bold mb-3">Entertainment</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing. Reprehenderit maiores nam,
aperiam
minima elit assumenda
voluptate velit.</p>
</div>
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="row mb-lg-0 mb-5">
<div class="col-md-1 col-2">
<mdb-icon far icon="smile" size="2x" class="blue-text"></mdb-icon>
</div>
<div class="col-md-11 col-10">
<h5 class="font-weight-bold mb-3">Communication</h5>
<p class="grey-text mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing. Reprehenderit maiores
nam,
aperiam minima elit assumenda
voluptate velit.</p>
</div>
</div>
<!-- Grid row -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-5">
<!--Image-->
<img src="https://mdbootstrap.com/img/Photos/Others/images/82.webp" 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 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-weight-bold h1 py-5">
<strong>Our best projects</strong>
</h2>
<!--Section description-->
<p class="grey-text pb-5 text-center">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-4">
<mdb-card style="background-image: url('https://mdbootstrap.com/img/Photos/Others/img%20%2832%29.webp')">
<div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4 rounded">
<div>
<h6 class="purple-text">
<mdb-icon fas icon="plane"></mdb-icon>
<strong> Travel</strong>
</h6>
<h3 class="py-3 font-weight-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 mdbBtn color="secondary" size="md" rounded="true" class="waves-light" mdbWavesEffect>
<mdb-icon far icon="clone" class="left"></mdb-icon> View project</a>
</div>
</div>
</mdb-card>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6 mb-4">
<mdb-card style="background-image: url('https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20%2873%29.webp')">
<div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4 rounded">
<div>
<h6 class="pink-text">
<mdb-icon fas icon="chart-pie"></mdb-icon>
<strong> Marketing</strong>
</h6>
<h3 class="py-3 font-weight-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 mdbBtn color="pink" size="md" rounded="true" class="waves-light" mdbWavesEffect>
<mdb-icon far icon="clone" class="left"></mdb-icon> View project</a>
</div>
</div>
</mdb-card>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6 mb-4">
<mdb-card style="background-image: url('https://mdbootstrap.com/img/Photos/Horizontal/City/6-col/img%20%2847%29.webp')">
<div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4 rounded">
<div>
<h6 class="green-text">
<mdb-icon far icon="eye"></mdb-icon>
<strong> Entertainment</strong>
</h6>
<h3 class="py-3 font-weight-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 mdbBtn color="success" size="md" rounded="true" class="waves-light" mdbWavesEffect>
<mdb-icon far icon="clone" class="left"></mdb-icon> View project</a>
</div>
</div>
</mdb-card>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Projects section v.4-->
Angular Projects - API
In this section you will find informations about required modules and available inputs, outputs, methods and events of Angular projects sections.
Modules used
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.
import { CardsFreeModule, WavesModule, ButtonsModule } from 'ng-uikit-pro-standard'