-mini.webp){kind=avatar}
Kate
React Social Sections
React Social Sections - Bootstrap 4 & Material Design
React 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
-mini.webp)
Danny Moore added you as a friend
7 hours ago
-mini.webp)
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.
-mini.webp)
import React from "react";
import { MDBRow, MDBCard, MDBCardBody, MDBIcon} from "mdbreact";
const SocialPage = () => {
return (
<MDBCard
className="my-5 px-5 pt-4"
style={{ fontWeight: 300, maxWidth: 600 }}
>
<MDBCardBody className="py-0">
<MDBRow>
<div className="mdb-feed">
<div className="news">
<div className="label">
<img
src="https://mdbootstrap.com/img/Photos/Avatars/avatar-1-mini.webp"
alt=""
className="rounded-circle z-depth-1-half"
/>
</div>
<div className="excerpt">
<div className="brief">
<a href="#!" className="name">
John Doe
</a> added you as a friend
<div className="date">1 hour ago</div>
</div>
<div className="feed-footer">
<a href="#!" className="like">
<MDBIcon icon="heart" />
<span>5 likes</span>
</a>
</div>
</div>
</div>
<div className="news">
<div className="label">
<img
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(17)-mini.webp"
alt=""
className="rounded-circle z-depth-1-half"
/>
</div>
<div className="excerpt">
<div className="brief">
<a href="#!" className="name">
Anna Smith
</a> added <a href="#!">2 new illustrations</a>
<div className="date">4 hours ago</div>
</div>
<div className="added-images">
<img
src="https://mdbootstrap.com/img/Photos/Others/images/71.webp"
alt=""
className="z-depth-1 rounded mb-md-0 mb-2"
/>
<img
src="https://mdbootstrap.com/img/Photos/Others/images/74.webp"
alt=""
className="z-depth-1 rounded"
/>
</div>
<div className="feed-footer">
<a href="#!" className="like">
<MDBIcon icon="heart" />
<span>18 likes</span>
</a>
</div>
</div>
</div>
<div className="news">
<div className="label">
<img
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9)-mini.webp"
alt=""
className="rounded-circle z-depth-1-half"
/>
</div>
<div className="excerpt">
<div className="brief">
<a href="#!" className="name">
Danny Moore
</a> added you as a friend
<div href="#!" className="date">
7 hours ago
</div>
</div>
<div className="feed-footer">
<a href="#!" className="like">
<MDBIcon icon="heart" />
<span>11 likes</span>
</a>
</div>
</div>
</div>
<div className="news">
<div className="label">
<img
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(18)-mini.webp"
alt=""
className="rounded-circle z-depth-1-half"
/>
</div>
<div className="excerpt">
<div className="brief">
<a href="#!" className="name">
Lili Rose
</a> posted on her page
<div className="date">2 days ago</div>
</div>
<div className="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 className="feed-footer">
<a href="#!" className="like">
<MDBIcon icon="heart" />
<span>7 likes</span>
</a>
</div>
</div>
</div>
<div className="news">
<div className="label">
<img
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20)-mini.webp"
alt=""
className="rounded-circle z-depth-1-half"
/>
</div>
<div className="excerpt">
<div className="brief">
<a href="#!" className="name">
Kate Harrison
</a> added <a href="#!"> 2 new photos</a> of you
<div className="date">3 days ago</div>
</div>
<div className="added-images">
<img
src="https://mdbootstrap.com/img/Photos/Others/images/29.webp"
alt=""
className="z-depth-1 rounded mb-md-0 mb-2"
/>
<img
src="https://mdbootstrap.com/img/Photos/Others/images/31.webp"
alt=""
className="z-depth-1 rounded"
/>
</div>
<div className="feed-footer">
<a href="#!" className="like">
<MDBIcon icon="heart" />
<span>53 likes</span>
</a>
</div>
</div>
</div>
</div>
</MDBRow>
</MDBCardBody>
</MDBCard>
);
}
export default SocialPage;
Social newsfeed v.2 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.
import React, { Component } from "react";
import { MDBRow, MDBCard, MDBCardBody, MDBIcon, MDBTooltip, MDBCollapse, MDBInput, MDBBtn } from "mdbreact";
class SocialPage extends Component {
state = {
collapseID: ""
}
toggleCollapse = collapseID => () =>
this.setState(prevState => ({
collapseID: prevState.collapseID !== collapseID ? collapseID : ""
}));
render() {
return (
<MDBCard
className="my-5 px-5 pt-4"
style={{ fontWeight: 300, maxWidth: 600 }}
>
<MDBCardBody className="py-0">
<MDBRow>
<div className="mdb-feed">
<div className="news">
<div className="label">
<img
src="https://mdbootstrap.com/img/Photos/Avatars/avatar-1-mini.webp"
alt=""
className="rounded-circle z-depth-1-half"
/>
</div>
<div className="excerpt">
<div className="brief">
<a href="#!" className="name">
John Doe
</a> added you as a friend
<div className="date">1 hour ago</div>
</div>
<div className="feed-footer">
<div className="d-flex">
<a
href="#!"
className="comment"
aria-expanded="false"
aria-controls="collapseExample-1"
onClick={this.toggleCollapse("collapseExample-1")}
>
Comment
</a>
·
<span>
<a href="#!"> 7 </a>
</span>
<a href="#!" className="thumbs">
<MDBTooltip
tag="span"
placement="top"
tooltipContent="I like it"
>
<MDBIcon icon="thumbs-up" />
</MDBTooltip>
</a>
<a href="#!" className="thumbs">
<MDBTooltip
placement="top"
tooltipContent="I don't like it"
>
<MDBIcon icon="thumbs-down" />
</MDBTooltip>
</a>
</div>
<MDBCollapse
id="collapseExample-1"
isOpen={this.state.collapseID}
>
<MDBCard className="card-body mt-1">
<MDBInput type="textarea" label="Add comment" />
<div className="d-flex justify-content-end">
<MDBBtn flat onClick={this.click1}>
Cancel
</MDBBtn>
<MDBBtn color="primary" onClick={this.click1}>
Reply
</MDBBtn>
</div>
</MDBCard>
</MDBCollapse>
</div>
</div>
</div>
<div className="news">
<div className="label">
<img
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(17)-mini.webp"
alt=""
className="rounded-circle z-depth-1-half"
/>
</div>
<div className="excerpt">
<div className="brief">
<a href="#!" className="name">
Anna Smith
</a> added <a href="#!"> 2 new illustrations</a>
<div className="date">4 hours ago</div>
</div>
<div className="added-images">
<img
src="https://mdbootstrap.com/img/Photos/Others/images/50.webp"
alt=""
className="z-depth-1 rounded mb-md-0 mb-2"
/>
<img
src="https://mdbootstrap.com/img/Photos/Others/images/52.webp"
alt=""
className="z-depth-1 rounded"
/>
</div>
<div className="feed-footer">
<div className="d-flex">
<a
href="#!"
className="comment"
aria-expanded="false"
aria-controls="collapseExample-2"
onClick={this.toggleCollapse("collapseExample-2")}
>
Comment
</a>
·
<span>
<a href="#!"> 31 </a>
</span>
<a href="#!" className="thumbs">
<MDBTooltip
tag="span"
placement="top"
tooltipContent="I like it"
>
<MDBIcon icon="thumbs-up" />
</MDBTooltip>
</a>
<a href="#!" className="thumbs">
<MDBTooltip
placement="top"
tooltipContent="I don't like it"
>
<MDBIcon icon="thumbs-down" />
</MDBTooltip>
</a>
</div>
<MDBCollapse
id="collapseExample-2"
isOpen={this.state.collapseID}
>
<MDBCard className="card-body mt-1">
<MDBInput type="textarea" label="Add comment" />
<div className="d-flex justify-content-end">
<MDBBtn flat onClick={this.click2}>
Cancel
</MDBBtn>
<MDBBtn color="primary" onClick={this.click2}>
Reply
</MDBBtn>
</div>
</MDBCard>
</MDBCollapse>
</div>
</div>
</div>
<div className="news">
<div className="label">
<img
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9)-mini.webp"
alt=""
className="rounded-circle z-depth-1-half"
/>
</div>
<div className="excerpt">
<div className="brief">
<a href="#!" className="name">
Danny Moore
</a> added you as a friend
<div className="date">7 hours ago</div>
</div>
<div className="feed-footer">
<div className="d-flex">
<a
href="#!"
className="comment"
aria-expanded="false"
aria-controls="collapseExample-3"
onClick={this.toggleCollapse("collapseExample-3")}
>
Comment
</a>
·
<span>
<a href="#!"> 12 </a>
</span>
<a href="#!" className="thumbs">
<MDBTooltip
tag="span"
placement="top"
tooltipContent="I like it"
>
<MDBIcon icon="thumbs-up" />
</MDBTooltip>
</a>
<a href="#!" className="thumbs">
<MDBTooltip
placement="top"
tooltipContent="I don't like it"
>
<MDBIcon icon="thumbs-down" />
</MDBTooltip>
</a>
</div>
<MDBCollapse
id="collapseExample-3"
isOpen={this.state.collapseID}
>
<MDBCard className="card-body mt-1">
<MDBInput type="textarea" label="Add comment" />
<div className="d-flex justify-content-end">
<MDBBtn flat onClick={this.click3}>
Cancel
</MDBBtn>
<MDBBtn color="primary" onClick={this.click3}>
Reply
</MDBBtn>
</div>
</MDBCard>
</MDBCollapse>
</div>
</div>
</div>
<div className="news">
<div className="label">
<img
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(18)-mini.webp"
alt=""
className="rounded-circle z-depth-1-half"
/>
</div>
<div className="excerpt">
<div className="brief">
<a href="#!" className="name">
Lili Rose
</a> posted on her page
<div className="date">2 days ago</div>
</div>
<div className="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 className="feed-footer">
<div className="d-flex">
<a
href="#!"
className="comment"
aria-expanded="false"
aria-controls="collapseExample-4"
onClick={this.toggleCollapse("collapseExample-4")}
>
Comment
</a>
·
<span>
<a href="#!"> 25 </a>
</span>
<a href="#!" className="thumbs">
<MDBTooltip
tag="span"
placement="top"
tooltipContent="I like it"
>
<MDBIcon icon="thumbs-up" />
</MDBTooltip>
</a>
<a href="#!" className="thumbs">
<MDBTooltip
placement="top"
tooltipContent="I don't like it"
>
<MDBIcon icon="thumbs-down" />
</MDBTooltip>
</a>
</div>
<MDBCollapse
id="collapseExample-4"
isOpen={this.state.collapseID}
>
<MDBCard className="card-body mt-1">
<MDBInput type="textarea" label="Add comment" />
<div className="d-flex justify-content-end">
<MDBBtn flat onClick={this.click4}>
Cancel
</MDBBtn>
<MDBBtn color="primary" onClick={this.click4}>
Reply
</MDBBtn>
</div>
</MDBCard>
</MDBCollapse>
</div>
</div>
</div>
<div className="news">
<div className="label">
<img
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20)-mini.webp"
alt=""
className="rounded-circle z-depth-1-half"
/>
</div>
<div className="excerpt">
<div className="brief">
<a href="#!" className="name">
Kate Harrison
</a> added <a href="#!"> 2 new photos</a> of you
<div className="date">3 days ago</div>
</div>
<div className="added-images">
<img
src="https://mdbootstrap.com/img/Photos/Others/images/81.webp"
alt=""
className="z-depth-1 rounded mb-md-0 mb-2"
/>
<img
src="https://mdbootstrap.com/img/Photos/Others/images/86.webp"
alt=""
className="z-depth-1 rounded"
/>
</div>
<div className="feed-footer">
<div className="d-flex">
<a
href="#!"
className="comment"
aria-expanded="false"
aria-controls="collapseExample-5"
onClick={this.toggleCollapse("collapseExample-5")}
>
Comment
</a>
·
<span>
<a href="#!"> 47 </a>
</span>
<a href="#!" className="thumbs">
<MDBTooltip
tag="span"
placement="top"
tooltipContent="I like it"
>
<MDBIcon icon="thumbs-up" />
</MDBTooltip>
</a>
<a href="#!" className="thumbs">
<MDBTooltip
placement="top"
tooltipContent="I don't like it"
>
<MDBIcon icon="thumbs-down" />
</MDBTooltip>
</a>
</div>
<MDBCollapse
id="collapseExample-5"
isOpen={this.state.collapseID}
>
<MDBCard className="card-body mt-1">
<MDBInput type="textarea" label="Add comment" />
<div className="d-flex justify-content-end">
<MDBBtn flat onClick={this.click5}>
Cancel
</MDBBtn>
<MDBBtn color="primary" onClick={this.click5}>
Reply
</MDBBtn>
</div>
</MDBCard>
</MDBCollapse>
</div>
</div>
</div>
</div>
</MDBRow>
</MDBCardBody>
</MDBCard>
);
}
}
export default SocialPage;
Personal card MDB Pro component
.webp)
import React from "react";
import { MDBRow, MDBCard, MDBCardBody, MDBIcon, MDBCol, MDBCardImage, MDBCardText, MDBCardTitle } from "mdbreact";
const SocialPage = () => {
return (
<MDBRow>
<MDBCol md="6" lg="4">
<MDBCard personal className="my-5">
<MDBCardImage
top
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(29).webp"
alt="MDBCard image cap"
/>
<MDBCardBody>
<MDBCardTitle>
<a href="#!" className="title-one">
Clara
</a>
</MDBCardTitle>
<p className="card-meta">Joined in 2013</p>
<MDBCardText>Clara is an photographer living in Madrid.</MDBCardText>
<hr />
<a href="#!" className="card-meta">
<span>
<MDBIcon icon="user" />
22 Friends
</span>
</a>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
);
}
export default SocialPage;
Social news card MDB Pro component
Kate
import React from "react";
import { MDBRow, MDBCard, MDBCardBody, MDBIcon, MDBCol, MDBCardImage, MDBInput} from "mdbreact";
const SocialPage = () => {
return (
<MDBRow>
<MDBCol md="6" lg="4">
<MDBCard news className="my-5">
<MDBCardBody>
<div className="content">
<div className="right-side-meta">14 h</div>
<img
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(17)-mini.webp"
alt=""
className="rounded-circle avatar-img z-depth-1-half"
/>
Kate
</div>
</MDBCardBody>
<MDBCardImage
top
src="https://mdbootstrap.com/img/Photos/Others/girl1.webp"
alt=""
/>
<MDBCardBody>
<div className="social-meta">
<p>Another great adventure! </p>
<span>
<MDBIcon far icon="heart" />
25 likes
</span>
<p>
<MDBIcon icon="comment" />
13 comments
</p>
</div>
<hr />
<MDBInput far icon="heart" hint="Add Comment..." />
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
);
}
export default SocialPage;
Social card with video MDB Pro component
.webp){kind=avatar}
Tony
import React from "react";
import { MDBRow, MDBCard, MDBCardBody, MDBIcon, MDBCol, MDBInput} from "mdbreact";
const SocialPage = () => {
return (
<MDBRow>
<MDBCol md="6" lg="4">
<MDBCard news className="my-5">
<MDBCardBody>
<div className="content">
<div className="right-side-meta">2 h</div>
<img
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(3).webp"
alt=""
className="rounded-circle avatar-img z-depth-1-half"
/>
Tony
</div>
</MDBCardBody>
<div className="embed-responsive embed-responsive-1by1">
<iframe
className="embed-responsive-item"
title="This is a unique title"
src="https://www.youtube.com/embed/37pwbUp8t1I"
alt=""
allowFullScreen
/>
</div>
<MDBCardBody>
<div className="social-meta">
<p className="blue-text">
#awesome #bboy #battle #breaking #cool
</p>
<span>
<MDBIcon far icon="heart" />
265 likes
</span>
<p>
<MDBIcon icon="comment" />
89 comments
</p>
</div>
<hr />
<MDBInput far icon="heart" hint="Add Comment..." />
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
);
}
export default SocialPage;
Group of personal cards MDB Pro component
.webp)
.webp)
.webp)
import React from "react";
import { MDBRow, MDBCard, MDBCardBody, MDBIcon, MDBCol, MDBCardImage, MDBView, MDBMask, MDBCardTitle, MDBCardText} from "mdbreact";
const SocialPage = () => {
return (
<MDBRow>
<MDBCol md="12">
<div className="card-group my-5">
<MDBCard personal className="mb-md-0 mb-4">
<MDBView hover>
<MDBCardImage
top
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(26).webp"
alt="MDBCard image cap"
/>
<a href="#!">
<MDBMask overlay="white-slight" />
</a>
</MDBView>
<MDBCardBody>
<a href="#!">
<MDBCardTitle>Anna</MDBCardTitle>
</a>
<a href="#!" className="card-meta">
Friends
</a>
<MDBCardText>
Anna is a web designer living in New York.
</MDBCardText>
<hr />
<a href="#!" className="card-meta">
<span>
<MDBIcon icon="user" />
83 Friends
</span>
</a>
<p className="card-meta float-right">Joined in 2012</p>
</MDBCardBody>
</MDBCard>
<MDBCard personal className="mb-md-0 mb-4">
<MDBView hover>
<MDBCardImage
top
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).webp"
alt="MDBCard image cap"
/>
<a href="#!">
<MDBMask overlay="white-slight" />
</a>
</MDBView>
<MDBCardBody>
<a href="#!">
<MDBCardTitle>John</MDBCardTitle>
</a>
<a href="#!" className="card-meta">
Coworker
</a>
<MDBCardText>John is a copywriter living in Seattle.</MDBCardText>
<hr />
<a href="#!" className="card-meta">
<span>
<MDBIcon icon="user" />
48 Friends
</span>
</a>
<p className="card-meta float-right">Joined in 2015</p>
</MDBCardBody>
</MDBCard>
<MDBCard personal className="mb-md-0 mb-4">
<MDBView hover>
<MDBCardImage
top
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(28).webp"
alt="MDBCard image cap"
/>
<a href="#!">
<MDBMask overlay="white-slight" />
</a>
</MDBView>
<MDBCardBody>
<a href="#!">
<MDBCardTitle>Sara</MDBCardTitle>
</a>
<a href="#!" className="card-meta">
Coworker
</a>
<MDBCardText>Sara is a video maker living in Tokyo.</MDBCardText>
<hr />
<a href="#!" className="card-meta">
<span>
<MDBIcon icon="user" />
127 Friends
</span>
</a>
<p className="card-meta float-right">Joined in 2014</p>
</MDBCardBody>
</MDBCard>
</div>
</MDBCol>
</MDBRow>
);
}
export default SocialPage;