Bootstrap snippet: Latest Tweet

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: Tweet,profile,social



<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-4 col-lg-4 bootstrap snippets"> <div class="widget panel"> <div class="panel-body"> <h4 class="mb0">Latest Tweet <i class="fa fa-twitter text-info pull-right"></i> </h4> <hr> <ul class="list-table"> <li style="width:70px;"> <img class="img-circle img-bordered-primary" src="http://bootdey.com/img/Content/avatar/avatar6.png" alt="" width="65px" height="65px"> </li> <li class="text-left"> <h5 class="semibold ellipsis nm">Colt Jenkins</h5> <p class="text-muted nm">5k followers</p> </li> <li class="text-right"> <button type="button" class="btn btn-sm btn-success">Follow</button> </li> </ul> </div> <ul class="list-group"> <li class="list-group-item"> <p class="nm">Lorem ipsum dolor sit amet, consectetur <a href="javascript:void(0);">#adipisicing</a> elit, sed do eiusmod.</p> <small class="text-muted">1 day ago</small> </li> <li class="list-group-item"> <p class="nm">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui <a href="javascript:void(0);">@officia</a> deserunt mollit anim id est laborum.</p> <small class="text-muted">2 day ago</small> </li> <li class="list-group-item"> <p class="nm">Duis aute irure dolor in <a href="javascript:void(0);">tweet.er</a> in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> <small class="text-muted">3 day ago</small> </li> </ul> </div> </div> <div class="col-xs-12 col-md-4 col-lg-4 bootstrap snippets"> <div class="widget panel"> <div class="panel-body"> <h4 class="mb0">Latest Tweet <i class="fa fa-twitter text-info pull-right"></i> </h4> <hr> <ul class="list-table"> <li style="width:70px;"> <img class="img-circle img-bordered-primary" src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="" width="65px" height="65px"> </li> <li class="text-left"> <h5 class="semibold ellipsis nm">Colt Jenkins</h5> <p class="text-muted nm">5k followers</p> </li> <li class="text-right"> <button type="button" class="btn btn-sm btn-success">Follow</button> </li> </ul> </div> <ul class="list-group"> <li class="list-group-item"> <p class="nm">Lorem ipsum dolor sit amet, consectetur <a href="javascript:void(0);">#adipisicing</a> elit, sed do eiusmod.</p> <small class="text-muted">1 day ago</small> </li> <li class="list-group-item"> <p class="nm">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui <a href="javascript:void(0);">@officia</a> deserunt mollit anim id est laborum.</p> <small class="text-muted">2 day ago</small> </li> <li class="list-group-item"> <p class="nm">Duis aute irure dolor in <a href="javascript:void(0);">tweet.er</a> in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> <small class="text-muted">3 day ago</small> </li> </ul> </div> </div> <div class="col-xs-12 col-md-4 col-lg-4 bootstrap snippets"> <div class="widget panel"> <div class="panel-body"> <h4 class="mb0">Latest Tweet <i class="fa fa-twitter text-info pull-right"></i> </h4> <hr> <ul class="list-table"> <li style="width:70px;"> <img class="img-circle img-bordered-primary" src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="" width="65px" height="65px"> </li> <li class="text-left"> <h5 class="semibold ellipsis nm">Colt Jenkins</h5> <p class="text-muted nm">5k followers</p> </li> <li class="text-right"> <button type="button" class="btn btn-sm btn-success">Follow</button> </li> </ul> </div> <ul class="list-group"> <li class="list-group-item"> <p class="nm">Lorem ipsum dolor sit amet, consectetur <a href="javascript:void(0);">#adipisicing</a> elit, sed do eiusmod.</p> <small class="text-muted">1 day ago</small> </li> <li class="list-group-item"> <p class="nm">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui <a href="javascript:void(0);">@officia</a> deserunt mollit anim id est laborum.</p> <small class="text-muted">2 day ago</small> </li> <li class="list-group-item"> <p class="nm">Duis aute irure dolor in <a href="javascript:void(0);">tweet.er</a> in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> <small class="text-muted">3 day ago</small> </li> </ul> </div> </div> </div> </div>
body{ margin-top:20px; background:#ddd; } .widget .panel, .widget.panel { border-bottom-width: 1px; border-bottom-color: #cfd9db; overflow: hidden; } .widget { margin-bottom: 20px; } .panel { position: relative; border-width: 1px; border-color: #cfd9db; border-radius: 3px; -webkit-box-shadow: 0 .0625rem .0625rem rgba(0,0,0,.05); box-shadow: 0 .0625rem .0625rem rgba(0,0,0,.05); } .panel-body { position: relative; } .mb0 { margin-bottom: 0!important; } .text-info { color: #22A7F0!important; } .list-table { display: table; table-layout: fixed; width: 100%; margin: 0; padding: 0; } .list-table>li:first-child { padding-left: 0; } .list-table>li { display: table-cell; table-layout: fixed; vertical-align: middle; width: auto; padding: 0 5px; } .img-bordered-primary { -webkit-box-shadow: 0 0 0 2px #fff,0 0 0 4px #446CB3; box-shadow: 0 0 0 2px #fff,0 0 0 4px #446CB3; } .img-circle { border-radius: 50%!important; } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .semibold { font-weight: 600; } .nm { margin: 0!important; }
Dey-Dey

Latest Tweet

Dey-Dey
  Apr 23rd, 13:46
1.4K Views