Rate this docs

Vue Bootstrap Social Sections

Vue Social Sections - Bootstrap 4 & Material Design

Vue Bootstrap Social Sections enhance your project with a variety of elements such as news feed, comments, and post cards.

Social newsfeed v.1 MDB Pro component

John Doe added you as a friend
1 hour ago
Danny Moore added you as a friend
7 hours ago
Lili Rose posted on his page
2 days ago
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero inventore, iste quas libero eius? Vitae sint neque animi alias sunt dolor, accusantium ducimus, non placeat voluptate.
Kate Harrison added 2 new photos of you
3 days ago
        
<template>
  <mdb-container>
    <div class="mdb-feed">
      <div class="news">
        <div class="label">
          <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-1-mini.jpg" class="rounded-circle z-depth-1-half"/>
        </div>
        <div class="excerpt">
          <div class="brief">
            <a class="name">John Doe</a> added you as a friend
            <div class="date">1 hour ago</div>
          </div>
          <div class="feed-footer">
            <a class="like">
              <mdb-icon icon="heart"/>
              <span>5 likes</span>
            </a>
          </div>
        </div>
      </div>

      <div class="news">
        <div class="label">
          <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(17)-mini.jpg" class="rounded-circle z-depth-1-half"/>
        </div>
        <div class="excerpt">
          <div class="brief">
            <a class="name">Anna Smith</a> added <a>2 new illustrations</a>
            <div class="date">4 hours ago</div>
          </div>
          <div class="added-images">
            <img src="https://mdbootstrap.com/img/Photos/Others/images/71.jpg" class="z-depth-1 rounded mb-md-0 mb-2"/>
            <img src="https://mdbootstrap.com/img/Photos/Others/images/74.jpg" class="z-depth-1 rounded"/>
          </div>
          <div class="feed-footer">
            <a class="like">
            <mdb-icon icon="heart"/>
              <span>18 likes</span>
            </a>
          </div>
        </div>
      </div>

      <div class="news">
        <div class="label">
          <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9)-mini.jpg" class="rounded-circle z-depth-1-half"/>
        </div>
        <div class="excerpt">
          <div class="brief">
            <a class="name">Danny Moore</a> added you as a friend
            <div class="date">7 hours ago</div>
          </div>
          <div class="feed-footer">
            <a class="like">
            <mdb-icon icon="heart"/>
              <span>11 likes</span>
            </a>
          </div>
        </div>
      </div>

      <div class="news">
        <div class="label">
          <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(18)-mini.jpg" class="rounded-circle z-depth-1-half"/>
        </div>
        <div class="excerpt">
          <div class="brief">
            <a class="name">Lili Rose</a> posted on her page
            <div class="date">2 days ago</div>
          </div>
          <div class="added-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero inventore, iste quas libero eius? Vitae sint neque animi alias sunt dolor, accusantium ducimus, non placeat voluptate.</div>
          <div class="feed-footer">
            <a class="like">
            <mdb-icon icon="heart"/>
              <span>7 likes</span>
            </a>
          </div>
        </div>
      </div>

      <div class="news">
        <div class="label">
          <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20)-mini.jpg" class="rounded-circle z-depth-1-half"/>
        </div>
        <div class="excerpt">
          <div class="brief">
            <a class="name">Kate Harrison</a> added <a> 2 new photos</a> of you
            <div class="date">3 days ago</div>
          </div>
          <div class="added-images">
            <img src="https://mdbootstrap.com/img/Photos/Others/images/29.jpg" class="z-depth-1 rounded mb-md-0 mb-2"/>
            <img src="https://mdbootstrap.com/img/Photos/Others/images/31.jpg" class="z-depth-1 rounded"/>
          </div>
          <div class="feed-footer">
            <a class="like">
            <mdb-icon icon="heart"/>
              <span>53 likes</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </mdb-container>
</template>

<script>
import { mdbContainer, mdbIcon } from 'mdbvue';

export default {
  name: 'SocialPage',
  components: {
    mdbContainer,
    mdbIcon
  }
};
</script>
        

Social newsfeed v.2 MDB Pro component

John Doe added you as a friend
1 hour ago
Anna Smith added 2 new illustrations
4 hours ago
Danny Moore added you as a friend
7 hours ago
Lili Rose posted on his page
2 days ago
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero inventore, iste quas libero eius? Vitae sint neque animi alias sunt dolor, accusantium ducimus, non placeat voluptate.
Kate Harrison added 2 new photos of you
3 days ago
        
<template>
  <mdb-container>
    <mdb-row>
      <div class="mdb-feed">
        <div class="news">
          <div class="label">
            <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-1-mini.jpg" class="rounded-circle z-depth-1-half"/>
          </div>
          <div class="excerpt">
            <div class="brief">
              <a class="name">John Doe</a> added you as a friend
              <div class="date">1 hour ago</div>
            </div>
            <div class="feed-footer">
                <a class="comment" aria-expanded="false" aria-controls="collapseExample-1" @click="comment1=!comment1">Comment </a> &middot; <span><a> 7 </a></span>
                <a class="thumbs">
                  <mdb-tooltip trigger="hover" :options="{placement: 'top'}" tag="span">
                    <div class="tooltip">
                      I like it
                    </div>
                    <mdb-icon slot="reference" icon="thumbs-up"/>
                  </mdb-tooltip>
                </a>
                <a class="thumbs">
                  <mdb-tooltip trigger="hover" :options="{placement: 'top'}" tag="span">
                    <div class="tooltip">
                      I don't like it
                    </div>
                    <mdb-icon slot="reference" icon="thumbs-down"/>
                  </mdb-tooltip>
                </a>
              <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
                <mdb-collapse v-if="comment1" class="collapse-item">
                  <mdb-card class="card-body mt-1">
                    <mdb-textarea label="Add comment"/>
                    <div class="d-flex justify-content-end">
                      <mdb-btn flat @click.native="comment1=!comment1">Cancel</mdb-btn>
                      <mdb-btn color="primary" @click.native="comment1=!comment1">Reply</mdb-btn>
                    </div>
                  </mdb-card>
                </mdb-collapse>
              </transition>
            </div>
          </div>
        </div>

        <div class="news">
          <div class="label">
            <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(17)-mini.jpg" class="rounded-circle z-depth-1-half"/>
          </div>
          <div class="excerpt">
            <div class="brief">
              <a class="name">Anna Smith</a> added <a>2 new illustrations</a>
              <div class="date">4 hours ago</div>
            </div>
            <div class="added-images">
              <img src="https://mdbootstrap.com/img/Photos/Others/images/50.jpg" class="z-depth-1 rounded mb-md-0 mb-2"/>
              <img src="https://mdbootstrap.com/img/Photos/Others/images/52.jpg" class="z-depth-1 rounded"/>
            </div>
            <div class="feed-footer">
                <a class="comment" aria-expanded="false" aria-controls="collapseExample-1" @click="comment2=!comment2">Comment </a> &middot; <span><a> 31 </a></span>
                <a class="thumbs">
                  <mdb-tooltip trigger="hover" :options="{placement: 'top'}" tag="span">
                    <div class="tooltip">
                      I like it
                    </div>
                    <mdb-icon slot="reference" icon="thumbs-up"/>
                  </mdb-tooltip>
                </a>
                <a class="thumbs">
                  <mdb-tooltip trigger="hover" :options="{placement: 'top'}" tag="span">
                    <div class="tooltip">
                      I don't like it
                    </div>
                    <mdb-icon slot="reference" icon="thumbs-down"/>
                  </mdb-tooltip>
                </a>
              </div>
              <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
                <mdb-collapse v-if="comment2" class="collapse-item">
                  <mdb-card class="card-body mt-1">
                    <mdb-textarea label="Add comment"/>
                    <div class="d-flex justify-content-end">
                      <mdb-btn flat @click.native="comment2=!comment2">Cancel</mdb-btn>
                      <mdb-btn color="primary" @click.native="comment2=!comment2">Reply</mdb-btn>
                    </div>
                  </mdb-card>
                </mdb-collapse>
              </transition>
          </div>
        </div>

        <div class="news">
          <div class="label">
            <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9)-mini.jpg" class="rounded-circle z-depth-1-half"/>
          </div>
          <div class="excerpt">
            <div class="brief">
              <a class="name">Danny Moore</a> added you as a friend
              <div class="date">7 hours ago</div>
            </div>
            <div class="feed-footer">
                <a class="comment" aria-expanded="false" aria-controls="collapseExample-1" @click="comment3=!comment3">Comment </a> &middot; <span><a> 12 </a></span>
                <a class="thumbs">
                  <mdb-tooltip trigger="hover" :options="{placement: 'top'}" tag="span">
                    <div class="tooltip">
                      I like it
                    </div>
                    <mdb-icon slot="reference" icon="thumbs-up"/>
                  </mdb-tooltip>
                </a>
                <a class="thumbs">
                  <mdb-tooltip trigger="hover" :options="{placement: 'top'}" tag="span">
                    <div class="tooltip">
                      I don't like it
                    </div>
                    <mdb-icon slot="reference" icon="thumbs-down"/>
                  </mdb-tooltip>
                </a>
              </div>
              <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
                <mdb-collapse v-if="comment3" class="collapse-item">
                  <mdb-card class="card-body mt-1">
                    <mdb-textarea label="Add comment"/>
                    <div class="d-flex justify-content-end">
                      <mdb-btn flat @click.native="comment3=!comment3">Cancel</mdb-btn>
                      <mdb-btn color="primary" @click.native="comment3=!comment3">Reply</mdb-btn>
                    </div>
                  </mdb-card>
                </mdb-collapse>
              </transition>
          </div>
        </div>

        <div class="news">
          <div class="label">
            <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(18)-mini.jpg" class="rounded-circle z-depth-1-half"/>
          </div>
          <div class="excerpt">
            <div class="brief">
              <a class="name">Lili Rose</a> posted on her page
              <div class="date">2 days ago</div>
            </div>
            <div class="added-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero inventore, iste quas libero eius? Vitae sint neque animi alias sunt dolor, accusantium ducimus, non placeat voluptate.</div>
            <div class="feed-footer">
                <a class="comment" aria-expanded="false" aria-controls="collapseExample-1" @click="comment4=!comment4">Comment </a> &middot; <span><a> 25 </a></span>
                <a class="thumbs">
                  <mdb-tooltip trigger="hover" :options="{placement: 'top'}" tag="span">
                    <div class="tooltip">
                      I like it
                    </div>
                    <mdb-icon slot="reference" icon="thumbs-up"/>
                  </mdb-tooltip>
                </a>
                <a class="thumbs">
                  <mdb-tooltip trigger="hover" :options="{placement: 'top'}" tag="span">
                    <div class="tooltip">
                      I don't like it
                    </div>
                    <mdb-icon slot="reference" icon="thumbs-down"/>
                  </mdb-tooltip>
                </a>
              </div>
              <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
                <mdb-collapse v-if="comment4" class="collapse-item">
                  <mdb-card class="card-body mt-1">
                    <mdb-textarea label="Add comment"/>
                    <div class="d-flex justify-content-end">
                      <mdb-btn flat @click.native="comment4=!comment4">Cancel</mdb-btn>
                      <mdb-btn color="primary" @click.native="comment4=!comment4">Reply</mdb-btn>
                    </div>
                  </mdb-card>
                </mdb-collapse>
              </transition>
          </div>
        </div>

        <div class="news">
          <div class="label">
            <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20)-mini.jpg" class="rounded-circle z-depth-1-half"/>
          </div>
          <div class="excerpt">
            <div class="brief">
              <a class="name">Kate Harrison</a> added <a> 2 new photos</a> of you
              <div class="date">3 days ago</div>
            </div>
            <div class="added-images">
              <img src="https://mdbootstrap.com/img/Photos/Others/images/81.jpg" class="z-depth-1 rounded mb-md-0 mb-2"/>
              <img src="https://mdbootstrap.com/img/Photos/Others/images/86.jpg" class="z-depth-1 rounded"/>
            </div>
            <div class="feed-footer">
              <a class="comment" aria-expanded="false" aria-controls="collapseExample-1" @click="comment5=!comment5">Comment </a> &middot; <span><a> 47 </a></span>
              <a class="thumbs">
                <mdb-tooltip trigger="hover" :options="{placement: 'top'}" tag="span">
                  <div class="tooltip">
                    I like it
                  </div>
                  <mdb-icon slot="reference" icon="thumbs-up"/>
                </mdb-tooltip>
              </a>
              <a class="thumbs">
                <mdb-tooltip trigger="hover" :options="{placement: 'top'}" tag="span">
                  <div class="tooltip">
                    I don't like it
                  </div>
                  <mdb-icon slot="reference" icon="thumbs-down"/>
                </mdb-tooltip>
              </a>
            </div>
            <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
              <mdb-collapse v-if="comment5" class="collapse-item">
                <mdb-card class="card-body mt-1">
                  <mdb-textarea label="Add comment"/>
                  <div class="d-flex justify-content-end">
                    <mdb-btn flat @click.native="comment5=!comment5">Cancel</mdb-btn>
                    <mdb-btn color="primary" @click.native="comment5=!comment5">Reply</mdb-btn>
                  </div>
                </mdb-card>
              </mdb-collapse>
            </transition>
          </div>
        </div>
      </div>
    </mdb-row>
  </mdb-container>
</template>

<script>
import { mdbContainer, mdbmdbRow, mdbCard, mdbIcon, mdbTooltip, mdbCollapse, mdbBtn, mdbTextarea } from 'mdbvue';

export default {
  name: 'SocialPage',
  components: {
    mdbContainer,
    mdbmdbRow,
    mdbCard,
    mdbIcon,
    mdbTooltip,
    mdbCollapse,
    mdbBtn,
    mdbTextarea
  },
  data() {
    return {
      comment1: false,
      comment2: false,
      comment3: false,
      comment4: false,
      comment5: false,
    };
  },
  methods: {
    beforeEnter(el) {
      this.elHeight = el.scrollHeight;
    },
    enter(el) {
      el.style.height = this.elHeight+'px';
    },
    beforeLeave(el) {
      el.style.height = 0;
    }
  },
};
</script>

<style scoped>
.collapse-item {
  overflow: hidden;
  height: 0;
  padding: 0;
  transition: height .5s;
}
</style>
        

Personal card MDB Pro component

mdbCard image cap

Clara

Joined in 2013

Clara is an photographer living in Madrid.


22 Friends
        
<template>
  <mdb-container>
    <mdb-row>
      <mdb-col md="6" lg="4">
        <mdb-card personal>
          <mdb-card-image top src="https://mdbootstrap.com/img/Photos/Avatars/img%20(29).jpg" alt="mdbCard image cap"/>
          <mdb-card-body>
            <mdb-card-title><a class="title-one">Clara</a></mdb-card-title>
            <p class="card-meta">Joined in 2013</p>
            <mdb-card-text>Clara is an photographer living in Madrid.</mdb-card-text>
            <hr/>
            <a class="card-meta"><span><mdb-icon icon="user"/>22 Friends</span></a>
          </mdb-card-body>
        </mdb-card>
      </mdb-col>
    </mdb-row>
  </mdb-container>
</template>

<script>
import { mdbContainer, mdbRow, mdbCol, mdbCard, mdbCardBody, mdbCardTitle, mdbCardImage, mdbCardText, mdbIcon }  from 'mdbvue';

export default {
  name: 'SocialPage',
  components: {
    mdbContainer,
    mdbRow,
    mdbCol,
    mdbCard,
    mdbCardBody,
    mdbCardTitle,
    mdbCardText,
    mdbCardImage,
    mdbIcon,
  }
};
</script>
        

Social news card MDB Pro component

14 h
Kate
mdbCard image cap

        
<template>
  <mdb-container>
    <mdb-row>
      <mdb-col md="6" lg="4">
        <mdb-card news class="my-5">
          <mdb-card-body>
            <div class="content">
              <div class="right-side-meta">14 h</div>
              <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(17)-mini.jpg" class="rounded-circle avatar-img z-depth-1-half"/>Kate
            </div>
          </mdb-card-body>
          <mdb-card-image top src="https://mdbootstrap.com/img/Photos/Others/girl1.jpg" alt="mdbCard image cap"/>
          <mdb-card-body>
            <div class="social-meta">
              <p>Another great adventure! </p>
              <span><mdb-icon icon="heart-o"/>25 likes</span>
              <p><mdb-icon icon="comment"/>13 comments</p>
            </div>
            <hr/>
            <mdb-input icon="heart-o" placeholder="Add Comment..."/>
          </mdb-card-body>
        </mdb-card>
      </mdb-col>
    </mdb-row>
  </mdb-container>
</template>

<script>
import { mdbContainer, mdbRow, mdbCol, mdbCard, mdbCardBody, mdbCardImage, mdbIcon, mdbInput } from 'mdbvue';

export default {
  name: 'SocialPage',
  components: {
    mdbContainer,
    mdbRow,
    mdbCol,
    mdbCard,
    mdbCardBody,
    mdbCardImage,
    mdbIcon,
    mdbInput,
  }
};
</script>
        

Social card with video MDB Pro component

2 h
Tony

        
<template>
  <mdb-container>
    <mdb-row>
      <mdb-col md="6" lg="4">
        <mdb-card news class="my-5">
          <mdb-card-body>
            <div class="content">
              <div class="right-side-meta">2 h</div>
              <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(3).jpg" class="rounded-circle avatar-img z-depth-1-half"/>Tony
            </div>
          </mdb-card-body>
          <div class="embed-responsive embed-responsive-1by1">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/37pwbUp8t1I" allowFullScreen></iframe>
          </div>
          <mdb-card-body>
            <div class="social-meta">
              <p class="blue-text">#awesome #bboy #battle #breaking #cool</p>
              <span><mdb-icon icon="heart-o"/>265 likes</span>
              <p><mdb-icon icon="comment"/>89 comments</p>
            </div>
            <hr/>
            <mdb-input icon="heart-o" placeholder="Add Comment..."/>
          </mdb-card-body>
        </mdb-card>
      </mdb-col>
    </mdb-row>
  </mdb-container>
</template>

<script>import { mdbContainer, mdbRow, mdbCol, mdbCard, mdbCardBody, mdbIcon, mdbInput } from 'mdbvue';

export default {
  name: 'SocialPage',
  components: {
    mdbContainer,
    mdbRow,
    mdbCol,
    mdbCard,
    mdbCardBody,
    mdbIcon,
    mdbInput
  }
};
</script>
        

Group of personal cards MDB Pro component

Anna

Friends

Anna is a web designer living in New York.


83 Friends

Joined in 2012

John

Coworker

John is a copywriter living in Seattle.


48 Friends

Joined in 2015

Sara

Coworker

Sara is a video maker living in Tokyo.


127 Friends

Joined in 2014

        
<template>
  <mdb-container>
    <mdb-row>
      <mdb-col md="12">
        <mdb-card-group class="my-5">
          <mdb-card personal class="mb-md-0 mb-4">
            <mdb-view hover>
              <mdb-card-image top src="https://mdbootstrap.com/img/Photos/Avatars/img%20(26).jpg" alt="mdbCard image cap"/>
              <a><md-mask overlay="white-slight"/></a>
            </mdb-view>
            <mdb-card-body>
              <a><mdb-card-title>Anna</mdb-card-title></a>
              <a class="card-meta">Friends</a>
              <mdb-card-text>Anna is a web designer living in New York.</mdb-card-text>
              <hr/>
              <a class="card-meta"><span><mdb-icon icon="user"/>83 Friends</span></a>
              <p class="card-meta float-right">Joined in 2012</p>
            </mdb-card-body>
          </mdb-card>

          <mdb-card personal class="mb-md-0 mb-4">
            <mdb-view hover>
              <mdb-card-image top src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" alt="mdbCard image cap"/>
              <a><md-mask overlay="white-slight"/></a>
            </mdb-view>
            <mdb-card-body>
              <a><mdb-card-title>John</mdb-card-title></a>
              <a class="card-meta">Coworker</a>
              <mdb-card-text>John is a copywriter living in Seattle.</mdb-card-text>
              <hr/>
              <a class="card-meta"><span><mdb-icon icon="user"/>48 Friends</span></a>
              <p class="card-meta float-right">Joined in 2015</p>
            </mdb-card-body>
          </mdb-card>

          <mdb-card personal class="mb-md-0 mb-4">
            <mdb-view hover>
              <mdb-card-image top src="https://mdbootstrap.com/img/Photos/Avatars/img%20(28).jpg" alt="mdbCard image cap"/>
              <a><md-mask overlay="white-slight"/></a>
            </mdb-view>
            <mdb-card-body>
              <a><mdb-card-title>Sara</mdb-card-title></a>
              <a class="card-meta">Coworker</a>
              <mdb-card-text>Sara is a video maker living in Tokyo.</mdb-card-text>
              <hr/>
              <a class="card-meta"><span><mdb-icon icon="user"/>127 Friends</span></a>
              <p class="card-meta float-right">Joined in 2014</p>
            </mdb-card-body>
          </mdb-card>

        </mdb-card-group>
      </mdb-col>
    </mdb-row>
  </mdb-container>
</template>

<script>
import { mdbContainer, mdbRow, mdbCol, mdbCard, mdbCardBody, mdbCardGroup, mdbCardTitle, mdbCardText, mdbCardImage, mdbMask, mdbIcon, mdbView } from 'mdbvue';

export default {
  name: 'SocialPage',
  components: {
    mdbContainer,
    mdbRow,
    mdbCol,
    mdbCard,
    mdbCardBody,
    mdbCardGroup,
    mdbCardTitle,
    mdbCardText,
    mdbCardImage,
    mdbMask,
    mdbIcon,
    mdbView
  }
};
</script>