Vue Bootstrap Project Sections

Vue Project Sections - Bootstrap 4 & Material Design

Vue Bootstrap 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

Show code

template
script

        
            
          <template>
            <mdb-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>
                <mdb-row class="text-center">
                  <mdb-col lg="4" md="12" class="mb-lg-0 mb-4">
                    <mdb-view class="overlay rounded z-depth-1">
                      <img src="https://mdbootstrap.com/img/Photos/Others/images/58.webp" alt="sample photo"
                        class="img-fluid" />
                      <a>
                              <mdb-mask waves overlay="white-slight"/>
                            </a>
                    </mdb-view>
                    <mdb-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>
                      <mdb-btn color="indigo" size="sm">
                        <mdb-icon icon="clone" class="left" /> View project</mdb-btn>
                    </mdb-card-body>
                  </mdb-col>
                  <mdb-col lg="4" md="12" class="mb-lg-0 mb-4">
                    <mdb-view class="overlay rounded z-depth-1">
                      <img src="https://mdbootstrap.com/img/Photos/Others/project4.webp" alt="sample photo"
                        class="img-fluid" />
                      <a>
                              <mdb-mask waves overlay="white-slight"/>
                            </a>
                    </mdb-view>
                    <mdb-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>
                      <mdb-btn color="indigo" size="sm">
                        <mdb-icon icon="clone" class="left" /> View project</mdb-btn>
                    </mdb-card-body>
                  </mdb-col>
                  <mdb-col lg="4" md="12" class="mb-lg-0 mb-4">
                    <mdb-view class="overlay rounded z-depth-1">
                      <img src="https://mdbootstrap.com/img/Photos/Others/images/88.webp" alt="sample photo"
                        class="img-fluid" />
                      <a>
                              <mdb-mask waves overlay="white-slight"/>
                            </a>
                    </mdb-view>
                    <mdb-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>
                      <mdb-btn color="indigo" size="sm">
                        <mdb-icon icon="clone" class="left" /> View project</mdb-btn>
                    </mdb-card-body>
                  </mdb-col>
                </mdb-row>
              </section>
            </mdb-container>
          </template>

        
            
          <script>
            import {
              mdbContainer,
              mdbRow,
              mdbCol,
              mdbView,
              mdbMask,
              mdbCard,
              mdbCardBody,
              mdbBtn,
              mdbIcon
            } from 'mdbvue';
            export default {
              name: 'ProjectsPage',
              components: {
                mdbContainer,
                mdbRow,
                mdbCol,
                mdbView,
                mdbMask,
                mdbCard,
                mdbCardBody,
                mdbBtn,
                mdbIcon
              }
            }
          </script>

Projects v.2 MDB Pro component

Our best projects

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.

Entertainment

This is title of the news

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

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.

Technology

This is title of the news

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

Show code

template
script

        
            
          <template>
            <mdb-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>
                <mdb-row class="d-flex justify-content-center">
                  <mdb-col md="6" xl="5" class="mb-4">
                    <mdb-view class="overlay rounded z-depth-2">
                      <img src="https://mdbootstrap.com/img/Photos/Others/laptop-sm.webp" alt="sample photo"
                        class="img-fluid" />
                      <a>
                              <mdb-mask waves overlay="white-slight"/>
                            </a>
                    </mdb-view>
                    <mdb-card-body class="pb-0">
                      <a href="" class="green-text"><h5 class="font-weight-bold mt-2 mb-3"><mdb-icon icon="chart-line" 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>
                      <mdb-btn color="success" rounded>View more</mdb-btn>
                    </mdb-card-body>
                  </mdb-col>
                  <mdb-col md="6" xl="5" class="mb-4">
                    <mdb-view class="overlay rounded z-depth-2">
                      <img src="https://mdbootstrap.com/img/Photos/Others/images/19.webp" alt="sample photo"
                        class="img-fluid" />
                      <a>
                              <mdb-mask waves overlay="white-slight"/>
                            </a>
                    </mdb-view>
                    <mdb-card-body class="pb-0">
                      <a href="" class="blue-text"><h5 class="font-weight-bold mt-2 mb-3"><mdb-icon 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>
                      <mdb-btn color="success" rounded>View more</mdb-btn>
                    </mdb-card-body>
                  </mdb-col>
                  <mdb-col md="6" xl="5" class="mb-4">
                    <mdb-view class="overlay rounded z-depth-2">
                      <img src="https://mdbootstrap.com/img/Photos/Others/images/48.webp" alt="sample photo"
                        class="img-fluid" />
                      <a>
                              <mdb-mask waves overlay="white-slight"/>
                            </a>
                    </mdb-view>
                    <mdb-card-body class="pb-0">
                      <a href="" class="brown-text"><h5 class="font-weight-bold mt-2 mb-3"><mdb-icon 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>
                      <mdb-btn color="success" rounded>View more</mdb-btn>
                    </mdb-card-body>
                  </mdb-col>
                  <mdb-col md="6" xl="5" class="mb-4">
                    <mdb-view class="overlay rounded z-depth-2">
                      <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img (56).webp"
                        alt="sample photo" class="img-fluid" />
                      <a>
                              <mdb-mask waves overlay="white-slight"/>
                            </a>
                    </mdb-view>
                    <mdb-card-body class="pb-0">
                      <a href="" class="cyan-text"><h5 class="font-weight-bold mt-2 mb-3"><mdb-icon 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>
                      <mdb-btn color="success" rounded>View more</mdb-btn>
                    </mdb-card-body>
                  </mdb-col>
                </mdb-row>
              </section>
            </mdb-container>
          </template>

        
            
          <script>
            import {
              mdbContainer,
              mdbRow,
              mdbCol,
              mdbView,
              mdbMask,
              mdbCard,
              mdbCardBody,
              mdbBtn,
              mdbIcon
            } from 'mdbvue';
            export default {
              name: 'ProjectsPage',
              components: {
                mdbContainer,
                mdbRow,
                mdbCol,
                mdbView,
                mdbMask,
                mdbCard,
                mdbCardBody,
                mdbBtn,
                mdbIcon
              }
            }
          </script>