"Social Media Feed"
Bootstrap 4.1.1 Snippet by hiteshvisit

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <title>Social Media Feed</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <link rel= "stylesheet" href= "https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href = "feed.css"> <script src = "feed.js"></script> </head> <body> <div class = "main panel panel-default z-depth-4"> <div class = "panel-body"> <div class="media"> <div class="media-left"> <img src="https://mms.businesswire.com/media/20190122005910/en/701785/5/Camila-x-MC.jpg" class="media-object circle"> </div> <div class="media-body"> <p>Neo Motto <span class = "time">(13 min. ago)</span></p> <span><i class = "fa fa-ellipsis-h right"></i></span> </div> </div> <div class = "post"> <img class = "not" src = "https://media2.s-nbcnews.com/j/newscms/2019_16/2822711/ss-190415-notre-dame-fire-mn-04_96c827a9102e4af198aa42513fd02e74.fit-760w.jpg"> <p class = "iconsec"><i class = "fa fa-heart-o"></i>   <i class = "fa fa-share"></i> <span class = "right"><b>4 likes</b></span></p> <p class = "caption">My heart breaks <i class = "fa fa-frown-o"></i>  <a href = "https://bbbootstrap.com">BBBootstrap.com</a></p> <p class = "read">Read 2 Comments <span class = "right"><b>Add Comment</b> <i class = "fa fa-comment-o"></i></span></p> </div> <div class = "menu"> <center> <a href = "#"><i class = "fa fa-home"></i></a> <a href = "#"><i class = "fa fa-search"></i></a> <a href = "#"><i class = "fa fa-user"></i></a> </center> </div> <center><a href = "#" class = "btn" id = "open"><i class = "fa fa-plus"></i></a></center> </div> </div> </body> </html>
.main{ width: 25vw; background-color: white; margin: auto; position: relative; top: 5vh; } body{ } .media-object{ width: 3.5vw; height: 3.5vw; } .media{ padding: 0.5vw; } .media-body{ padding-left: 1vw; font-size: 1.2vw; position: relative; top: 0.5vw; } .fa-ellipsis-h{ position: relative; bottom: 2vw; font-size: 1.5vw; margin-right: 1vw; } .panel-body{ padding: 1vw; } .not{ height: 20vw; width: 100%; } .iconsec{ padding-top: 1vw; padding-left: 0.5vw; font-size: 1.2vw; } .caption{ padding-left: 0.5vw; } .read{ padding-left: 0.5vw; cursor: pointer; color: grey; } .time{ font-size: 0.8vw; } .fa{ cursor : pointer } #open{ width: 100%; background-color: #d32f2f; } #open:hover{ background-color: white; color: #d32f2f; } .menu{ width: 100%; background: inherit; height: 3vw; display: none; } .menu a{ margin-left: 2vw; margin-right: 2vw; font-size: 2vw; color: #d32f2f; } @media only screen and (max-width: 425px){ .main{ width: 100vw; } .media-object{ width: 10.5vw; height: 10.5vw; } .media{ padding: 1.5vw; } .media-body{ padding-left: 3vw; font-size: 5.6vw; position: relative; top: 1.5vw; } .fa-ellipsis-h{ position: relative; bottom: 10vw; font-size: 5.5vw; margin-right: 3vw; } .panel-body{ padding: 3vw; } .not{ height: 60vw; width: 100%; } .iconsec{ padding-top: 3vw; padding-left: 1.5vw; font-size: 5.6vw; } .caption{ padding-left: 1.5vw; } .read{ padding-left: 1.5vw; } .time{ font-size: 3.5vw; } .menu{ height: 9vw; } .menu a{ margin-left: 6vw; margin-right: 6vw; font-size: 6vw; color: #d32f2f; } }

Related: See More

Now UI Kit Angular
Bootstrap Social Card
Navbar with Social icon & Dropdown
social network layout - bootstrap 4

Questions / Comments: