Latest Tweet

Bootstrap snippet. Latest Tweet, this snippet was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code.
tags: Tweet,profile,social

HTML code

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection

<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="https://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="https://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="https://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>

CSS code

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection

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;
}
                                    

Similar snippets

Bootstrap snippet bs4 profile settings page

bs4 profile settings page

View

Bootstrap snippet bs4 account tickets

bs4 account tickets

View

Bootstrap snippet bs4 authors card

bs4 authors card

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Mar 5th 2016, 15:40

Views: 2.8K

Rated 5/5 based on 4 reviews