Latest Tweet

This bootstrap snippet called "Latest Tweet" 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

This is the HTML code for this bootstrap snippet

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

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

This is the CSS code for this bootstrap snippet

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

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

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Mar 5th 2016, 15:40

Views: 2.6K

Rated 5/5 based on 3 reviews