Bootstrap features sections

MDB provides you multiple sections which help you highlight the best features of your project.

Features v.1 MDB Pro component

Why is it so great?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Analytics

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Tutorials

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Support

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

            
<template>
  <container>
    <section class="text-center my-5">
      <h2 class="h1-responsive font-weight-bold my-5">Why is it so great?</h2>
      <p class="lead grey-text w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
      <row>
        <column md="4">
          <fa icon="area-chart" size="3x" class="red-text"/>
          <h5 class="font-weight-bold my-4">Analytics</h5>
          <p class="grey-text mb-md-0 mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores aperiam minima assumenda deleniti hic.</p>
        </column>
        <column md="4">
          <fa icon="book" size="3x" class="cyan-text"/>
          <h5 class="font-weight-bold my-4">Tutorials</h5>
          <p class="grey-text mb-md-0 mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores aperiam minima assumenda deleniti hic.</p>
        </column>
        <column md="4">
          <fa icon="comments-o" size="3x" class="orange-text"/>
          <h5 class="font-weight-bold my-4">Support</h5>
          <p class="grey-text mb-md-0 mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores aperiam minima assumenda deleniti hic.</p>
        </column>
      </row>
    </section>
  </container>
</template>

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

export default {
  name: 'FeaturesPage',
  components: {
    Container,
    Row,
    Column,
    Fa,
    Btn
  },
};
</script>

<style scoped>
</style>
            
        

Features v.2 MDB Pro component

Why is it so great?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Marketing

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.

Learn more

Customization

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.

Learn more

Support

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.

Learn more
            
<template>
  <container>
    <section class="my-5">
      <h2 class="h1-responsive font-weight-bold text-center my-5">Why is it so great?</h2>
      <p class="lead grey-text w-responsive text-center mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
      <row>
        <column md="4" class="md-0 mb-5">
          <row>
            <column lg="2" md="3" size="2">
              <fa icon="bullhorn" size="2x" class="blue-text"/>
            </column>
            <column lg="10" md="9" size="10">
              <h4 class="font-weight-bold">Marketing</h4>
              <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
              <btn color="primary" size="sm">Learn more</btn>
            </column>
          </row>
        </column>
        <column md="4" class="md-0 mb-5">
          <row>
            <column lg="2" md="3" size="2">
              <fa icon="cogs" size="2x" class="pink-text"/>
            </column>
            <column lg="10" md="9" size="10">
              <h4 class="font-weight-bold">Customization</h4>
              <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
              <btn color="pink" size="sm">Learn more</btn>
            </column>
          </row>
        </column>
        <column md="4" class="md-0 mb-5">
          <row>
            <column lg="2" md="3" size="2">
              <fa icon="dashboard" size="2x" class="purple-text"/>
            </column>
            <column lg="10" md="9" size="10">
              <h4 class="font-weight-bold">Support</h4>
              <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
              <btn color="purple" size="sm">Learn more</btn>
            </column>
          </row>
        </column>
      </row>
    </section>
  </container>
</template>

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

export default {
  name: 'FeaturesPage',
  components: {
    Container,
    Row,
    Column,
    Fa,
    Btn
  },
};
</script>

<style scoped>
</style>
            
        

Features v.3 MDB Pro component

Why is it so great?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Safety

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Technology

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Finance

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

            
<template>
  <container>
    <section class="my-5">
      <h2 class="h1-responsive font-weight-bold text-center my-5">Why is it so great?</h2>
      <p class="lead grey-text w-responsive text-center mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
      <row>
        <column lg="5" class="text-center text-lg-left">
          <img  class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/screens-section.jpg" alt="Sample image" />
        </column>
        <column lg="7">
          <row class="mb-3">
            <column size="1">
              <fa icon="mail-forward" size="lg" class="indigo-text"/>
            </column>
            <column xl="10" md="11" size="10">
              <h5 class="font-weight-bold mb-3">Safety</h5>
              <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti hic.</p>
            </column>
          </row>
          <row class="mb-3">
            <column size="1">
              <fa icon="mail-forward" size="lg" class="indigo-text"/>
            </column>
            <column xl="10" md="11" size="10">
              <h5 class="font-weight-bold mb-3">Technology</h5>
              <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti hic.</p>
            </column>
          </row>
          <row class="mb-3">
            <column size="1">
              <fa icon="mail-forward" size="lg" class="indigo-text"/>
            </column>
            <column xl="10" md="11" size="10">
              <h5 class="font-weight-bold mb-3">Finance</h5>
              <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti hic.</p>
            </column>
          </row>
        </column>
      </row>
    </section>
  </container>
</template>

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

export default {
  name: 'FeaturesPage',
  components: {
    Container,
    Row,
    Column,
    Fa,
    Btn
  },
};
</script>

<style scoped>
</style>
            
        

Features v.4 MDB Pro component

Why is it so great?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

International

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Experimental

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Relaxing

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Beloved

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Rapid

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Magical

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

            
<template>
  <container>
    <section class="my-5">
      <h2 class="h1-responsive font-weight-bold text-center my-5">Why is it so great?</h2>
      <p class="lead grey-text w-responsive text-center mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
      <row>
        <column md="4">
          <row class="mb-3">
            <column size="2">
              <fa icon="flag-checkered" size="2x" class="deep-purple-text"/>
            </column>
            <column size="10">
              <h5 class="font-weight-bold mb-3">International</h5>
              <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
            </column>
          </row>
          <row class="mb-3">
            <column size="2">
              <fa icon="flask" size="2x" class="deep-purple-text"/>
            </column>
            <column size="10">
              <h5 class="font-weight-bold mb-3">Experimental</h5>
              <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
            </column>
          </row>
          <row class="mb-3">
            <column size="2">
              <fa icon="glass" size="2x" class="deep-purple-text"/>
            </column>
            <column size="10">
              <h5 class="font-weight-bold mb-3">Relaxing</h5>
              <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
            </column>
          </row>
        </column>
        <column md="4" class="text-name">
          <img class="img-fluid" src="https://mdbootstrap.com/img/Mockups/Transparent/Small/iphone-portfolio1.png" alt="Sample image" />
        </column>
        <column md="4">
          <row class="mb-3">
            <column size="2">
              <fa icon="heart" size="2x" class="deep-purple-text"/>
            </column>
            <column size="10">
              <h5 class="font-weight-bold mb-3">Beloved</h5>
              <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
            </column>
          </row>
          <row class="mb-3">
            <column size="2">
              <fa icon="flash" size="2x" class="deep-purple-text"/>
            </column>
            <column size="10">
              <h5 class="font-weight-bold mb-3">Rapid</h5>
              <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
            </column>
          </row>
          <row class="mb-3">
            <column size="2">
              <fa icon="magic" size="2x" class="deep-purple-text"/>
            </column>
            <column size="10">
              <h5 class="font-weight-bold mb-3">Magical</h5>
              <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
            </column>
          </row>
        </column>
      </row>
    </section>
  </container>
</template>

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

export default {
  name: 'FeaturesPage',
  components: {
    Container,
    Row,
    Column,
    Fa,
    Btn
  },
};
</script>

<style scoped>
</style>