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 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
            
<template>
  <container>
    <section class="text-center my-5">
      <h2 class="h1-responsive font-weight-bold my-5">Our best projects</h2>
      <p class="grey-text 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>
      <row class="text-center">
        <column lg="4" md="12" class="mb-lg-0 mb-4">
          <view-wrapper class="overlay rounded z-depth-1">
            <img src="https://mdbootstrap.com/img/Photos/Others/images/58.jpg" alt="sample photo" class="img-fluid"/>
            <a>
              <md-mask waves overlay="white-slight"/>
            </a>
          </view-wrapper>
          <card-body class="pb-0">
            <h4 class="font-weight-bold my-3">Title of the news</h4>
            <p class="grey-text">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae.</p>
            <btn color="indigo" size="sm"><fa icon="clone" class="left"/> View project</btn>
          </card-body>
        </column>
        <column lg="4" md="12" class="mb-lg-0 mb-4">
          <view-wrapper class="overlay rounded z-depth-1">
            <img src="https://mdbootstrap.com/img/Photos/Others/project4.jpg" alt="sample photo" class="img-fluid"/>
            <a>
              <md-mask waves overlay="white-slight"/>
            </a>
          </view-wrapper>
          <card-body class="pb-0">
            <h4 class="font-weight-bold my-3">Title of the news</h4>
            <p class="grey-text">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae.</p>
            <btn color="indigo" size="sm"><fa icon="clone" class="left"/> View project</btn>
          </card-body>
        </column>
        <column lg="4" md="12" class="mb-lg-0 mb-4">
          <view-wrapper class="overlay rounded z-depth-1">
            <img src="https://mdbootstrap.com/img/Photos/Others/images/88.jpg" alt="sample photo" class="img-fluid"/>
            <a>
              <md-mask waves overlay="white-slight"/>
            </a>
          </view-wrapper>
          <card-body class="pb-0">
            <h4 class="font-weight-bold my-3">Title of the news</h4>
            <p class="grey-text">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae.</p>
            <btn color="indigo" size="sm"><fa icon="clone" class="left"/> View project</btn>
          </card-body>
        </column>
      </row>
    </section>
  </container>
</template>

<script>
import { Container, Row, Column, ViewWrapper, MdMask, Card, CardBody, Btn, Fa } from 'mdbvue';

export default {
  name: 'ProjectsPage',
  components: {
    Container,
    Row,
    Column,
    ViewWrapper,
    MdMask,
    Card,
    CardBody,
    Btn,
    Fa
  },
};
</script>

<style scoped>
</style>
            
        

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.

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
Entertainment

This is title of the news

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

View more
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
Technology

This is title of the news

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

View more
            
<template>
  <container>
    <section class="text-center my-5">
      <h2 class="h1-responsive font-weight-bold my-5">Our best projects</h2>
      <p class="grey-text 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>
      <row class="d-flex justify-content-center">
        <column md="6" xl="5" class="mb-4">
          <view-wrapper class="overlay rounded z-depth-2">
            <img src="https://mdbootstrap.com/img/Photos/Others/laptop-sm.jpg" alt="sample photo" class="img-fluid"/>
            <a>
              <md-mask waves overlay="white-slight"/>
            </a>
          </view-wrapper>
          <card-body class="pb-0">
            <a href="" class="green-text"><h5 class="font-weight-bold mt-2 mb-3"><fa icon="line-chart" class="pr-2"/>Marketing</h5></a>
            <h4 class="font-weight-bold mb-3">Title of the news</h4>
            <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit cupidatat proident voluptatem quia numquam.</p>
            <btn color="success" rounded>View more</btn>
          </card-body>
        </column>
        <column md="6" xl="5" class="mb-4">
          <view-wrapper class="overlay rounded z-depth-2">
            <img src="https://mdbootstrap.com/img/Photos/Others/images/19.jpg" alt="sample photo" class="img-fluid"/>
            <a>
              <md-mask waves overlay="white-slight"/>
            </a>
          </view-wrapper>
          <card-body class="pb-0">
            <a href="" class="blue-text"><h5 class="font-weight-bold mt-2 mb-3"><fa icon="eye" class="pr-2"/>Entertainment</h5></a>
            <h4 class="font-weight-bold mb-3">Title of the news</h4>
            <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit cupidatat proident voluptatem quia numquam.</p>
            <btn color="success" rounded>View more</btn>
          </card-body>
        </column>
        <column md="6" xl="5" class="mb-4">
          <view-wrapper class="overlay rounded z-depth-2">
            <img src="https://mdbootstrap.com/img/Photos/Others/images/48.jpg" alt="sample photo" class="img-fluid"/>
            <a>
              <md-mask waves overlay="white-slight"/>
            </a>
          </view-wrapper>
          <card-body class="pb-0">
            <a href="" class="brown-text"><h5 class="font-weight-bold mt-2 mb-3"><fa icon="camera" class="pr-2"/>Travel</h5></a>
            <h4 class="font-weight-bold mb-3">Title of the news</h4>
            <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit cupidatat proident voluptatem quia numquam.</p>
            <btn color="success" rounded>View more</btn>
          </card-body>
        </column>
        <column md="6" xl="5" class="mb-4">
          <view-wrapper class="overlay rounded z-depth-2">
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img (56).jpg" alt="sample photo" class="img-fluid"/>
            <a>
              <md-mask waves overlay="white-slight"/>
            </a>
          </view-wrapper>
          <card-body class="pb-0">
            <a href="" class="cyan-text"><h5 class="font-weight-bold mt-2 mb-3"><fa icon="phone" class="pr-2"/>Technology</h5></a>
            <h4 class="font-weight-bold mb-3">Title of the news</h4>
            <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit cupidatat proident voluptatem quia numquam.</p>
            <btn color="success" rounded>View more</btn>
          </card-body>
        </column>
      </row>
    </section>
  </container>
</template>

<script>
import { Container, Row, Column, ViewWrapper, MdMask, Card, CardBody, Btn, Fa } from 'mdbvue';

export default {
  name: 'ProjectsPage',
  components: {
    Container,
    Row,
    Column,
    ViewWrapper,
    MdMask,
    Card,
    CardBody,
    Btn,
    Fa
  },
};
</script>

<style scoped>
</style>
            
        

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
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.

Sample project image
            
<template>
  <container>
    <section class="my-5">
      <h2 class="h1-responsive font-weight-bold text-center my-5">Our best projects</h2>
      <p class="grey-text w-responsive text-center 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>
      <row>
        <column lg="5" class="mb-lg-0 mb-5">
          <img src="https://mdbootstrap.com/img/Photos/Others/images/83.jpg" alt="Sample project image" class="img-fluid rounded z-depth-1" />
        </column>
        <column lg="7">
          <row class="mb-3">
            <column md="1" size="2">
              <fa icon="bar-chart" size="2x" class="indigo-text"/>
            </column>
            <column md="11" size="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>
            </column>
          </row>
          <row class="mb-3">
            <column md="1" size="2">
              <fa icon="music" size="2x" class="pink-text"/>
            </column>
            <column md="11" size="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>
            </column>
          </row>
          <row class="mb-3">
            <column md="1" size="2">
              <fa icon="smile-o" size="2x" class="blue-text"/>
            </column>
            <column md="11" size="10">
              <h5 class="font-weight-bold mb-3">Communication</h5>
              <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing. Reprehenderit maiores nam, aperiam minima elit assumenda voluptate velit.</p>
            </column>
          </row>
        </column>
      </row>
      <hr class="my-5"/>
      <row>
        <column lg="7">
          <row class="mb-3">
            <column md="1" size="2">
              <fa icon="book" size="2x" class="cyan-text"/>
            </column>
            <column md="11" size="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>
            </column>
          </row>
          <row class="mb-3">
            <column md="1" size="2">
              <fa icon="code" size="2x" class="red-text"/>
            </column>
            <column md="11" size="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>
            </column>
          </row>
          <row class="mb-3">
            <column md="1" size="2">
              <fa icon="money" size="2x" class="deep-purple-text"/>
            </column>
            <column md="11" size="10">
              <h5 class="font-weight-bold mb-3">Finance</h5>
              <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing. Reprehenderit maiores nam, aperiam minima elit assumenda voluptate velit.</p>
            </column>
          </row>
        </column>
        <column lg="5">
          <img src="https://mdbootstrap.com/img/Photos/Others/images/82.jpg" alt="Sample project image" class="img-fluid rounded z-depth-1"/>
        </column>             
      </row>
    </section>
  </container>
</template>

<script>
import { Container, Row, Column, ViewWrapper, MdMask, Card, CardBody, Btn, Fa } from 'mdbvue';

export default {
  name: 'ProjectsPage',
  components: {
    Container,
    Row,
    Column,
    ViewWrapper,
    MdMask,
    Card,
    CardBody,
    Btn,
    Fa
  },
};
</script>

<style scoped>
</style>
            
        

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 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
            
<template>
  <container>
    <section class="text-center my-5">
      <h2 class="h1-responsive font-weight-bold my-5">Our best projects</h2>
      <p class="grey-text 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>
      <row>
        <column md="12" class="mb-4">
          <card class="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">
                  <fa icon="plane"></fa><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>
                <btn color="secondary" rounded size="md"><fa icon="clone" class="left"/> View project</btn>
              </div>
            </div>
          </card>
        </column>
        <column md="6" class="md-0 mb-4">
          <card class="card-image" style="backgroundImage: 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">
                  <fa icon="pie-chart"></fa><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>
                <btn color="pink" rounded size="md"><fa icon="clone" class="left"/> View project</btn>
              </div>
            </div>
          </card>
        </column>
        <column md="6" class="md-0 mb-4">
          <card class="card-image" style="backgroundImage: 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="green-text">
                  <fa icon="eye"></fa><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>
                <btn color="success" rounded size="md"><fa icon="clone" class="left"/> View project</btn>
              </div>
            </div>
          </card>
        </column>
      </row>
    </section>
  </container>
</template>

<script>
import { Container, Row, Column, ViewWrapper, MdMask, Card, CardBody, Btn, Fa } from 'mdbvue';

export default {
  name: 'ProjectsPage',
  components: {
    Container,
    Row,
    Column,
    ViewWrapper,
    MdMask,
    Card,
    CardBody,
    Btn,
    Fa
  },
};
</script>

<style scoped>
</style>