Angular Bootstrap Project sections

Angular project sections - Bootstrap 4 & Material Design

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.

Sample project image

Title of the news

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

View project
Sample project image

Title of the news

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

View project
Sample project image

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.jpg" 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>
                  <i class="far fa-clone left"></i> 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.jpg" 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>
                  <i class="far fa-clone left"></i> 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.jpg" 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>
                  <i class="far fa-clone left"></i> 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.

Sample project image
Marketing

Title of the news

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit cupidatat proident voluptatem quia numquam.

View more
Sample project image
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
Sample project image
Travel

Title of the news

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa.

View more
Sample project image
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.jpg" 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">
                    <i class="fas fa-chart-line"></i> 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.jpg" 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">
                    <i class="far fa-eye"></i> 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.jpg" 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">
                    <i class="fas fa-camera"></i> 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).jpg" 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">
                    <i class="fas fa-phone"></i> 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.

Sample project image
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.

Sample project image 


        <!-- 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.jpg" 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">
                  <i class="fas fa-book fa-2x cyan-text"></i>
                </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">
                  <i class="fas fa-code fa-2x red-text"></i>
                </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">
                  <i class="far fa-money-bill-alt fa-2x deep-purple-text"></i>
                </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">
                  <i class="fas fa-chart-bar fa-2x indigo-text"></i>
                </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">
                  <i class="fas fa-music fa-2x pink-text"></i>
                </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">
                  <i class="far fa-smile fa-2x blue-text"></i>
                </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.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 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 project
Marketing

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
Entertainment

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">
              <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="fas fa-plane"></i>
                      <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>
                      <i class="far fa-clone left"></i> View project</a>
                  </div>
                </div>
              </div>
            </div>
            <!--Grid column-->

            <!--Grid column-->
            <div class="col-md-6 mb-4">
              <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="fas fa-chart-pie"></i>
                      <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>
                      <i class="far fa-clone left"></i> View project</a>
                  </div>
                </div>
              </div>
            </div>
            <!--Grid column-->

            <!--Grid column-->
            <div class="col-md-6 mb-4">
              <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="far fa-eye"></i>
                      <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>
                      <i class="far fa-clone left"></i> View project</a>
                  </div>
                </div>
              </div>
            </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. 

// MDB Angular Pro
import { CardsFreeModule, WavesModule, ButtonsModule } from 'ng-uikit-pro-standard'
Import example Modules list