Boostrap - cards

boostrap_cards_css

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
.pzro{ padding:0;}
.twPc-div {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #e1e8ed;
    border-radius: 6px;
  /*  max-width: 340px; // orginal twitter width: 290px;*/
}
.twPc-bg {
   /* background-image: url("");*/
    background-position: 0 50%;
    background-size: 100% auto;
    border-bottom: 1px solid #e1e8ed;
    border-radius: 4px 4px 0 0;
    width: 100%;
}
.twPc-bg img{ width: 100%;}
.twPc-block {
    display: block !important;
	margin-bottom:10px;}
.twPc-button {
    margin: -35px -10px 0;
    text-align: right;
    width: 100%;
}
.twPc-avatarLink {
    background-color: #fff;
    border-radius: 6px;
    display: inline-block !important;
    float: left;
    margin: -30px 5px 0 8px;
    max-width: 100%;
    padding: 1px;
    vertical-align: bottom;
	position:relative;
	z-index:1;
}
.twPc-avatarImg {
    border: 2px solid #fff;
    border-radius: 7px;
    box-sizing: border-box;
    color: #fff;
    height: 72px;
    width: 72px;
}
.twPc-divUser {
    margin: 5px 0 0;
}
.twPc-divName {
    font-size: 16px;
    font-weight: 700;
    line-height: 21px;
}
.twPc-divName a {
    color: inherit !important;
}
.twPc-divStats {
    margin-left: 11px;
    padding: 10px 0;
}
.twPc-Arrange {
    box-sizing: border-box;
    display: table;
    margin: 0;
    min-width: 100%;
    padding: 0;
    table-layout: auto;
}
ul.twPc-Arrange {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
.twPc-ArrangeSizeFit {
    display: table-cell;
    padding: 0;
    vertical-align: top;
}
.twPc-ArrangeSizeFit a:hover {
    text-decoration: none;
}
.twPc-StatValue {
    display: block;
    font-size: 18px;
    font-weight: 500;
    transition: color 0.15s ease-in-out 0s;
}
.twPc-StatLabel {
    color: #8899a6;
    font-size: 10px;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-transform: uppercase;
    transition: color 0.15s ease-in-out 0s;
	margin-left: 5px;
    margin-top: 3px;
}



.bdr{ margin-top: 20px;margin-bottom: 20px; height:1px; background-color:#eee;}
.row_mrgn{    margin-left: -15px;margin-right: -1px;}
bold{ font-weight:800;}    
    
</style>

boostrap_cards_html

<!-- time_line_start -->

<div class="container" style="margin-top:50px;">
  <div class="row"> 
    
    <!-- code start -->
    <div class="twPc-div col-sm-3 pzro"> <a class="twPc-bg twPc-block pull-left"> <img src="http://cdn.shopify.com/s/files/1/0691/5403/t/128/assets/insta-1.jpg?16696099757203580349" /> </a>
      <div> <a title="Mert Salih Kaplan" href="#" class="twPc-avatarLink"> <img alt="Mert Salih Kaplan" src="http://cdn.shopify.com/s/files/1/0691/5403/t/128/assets/avatar-mdo.jpg?16696099757203580349" class="twPc-avatarImg"> </a>
        <div class="twPc-divUser">
          <div class="twPc-divName"> Mert S. Kaplan </div>
          @<span>mertskaplan</span> </div>
        <div class="twPc-divStats">
          <ul class="twPc-Arrange">
            <li class="twPc-ArrangeSizeFit"> <span class="glyphicon glyphicon-heart pull-left"></span> <span class="twPc-StatLabel twPc-block pull-left">Tweets</span> </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- code end --> 
  </div>
</div>
<!-- time_line_end -->

<div class="container" style="margin-top:50px;">
  <div class="row"> 
    
    <!-- code start -->
    
    <div class="twPc-div col-xs-6 col-sm-6 col-md-6 pzro">
      <div> <a class="twPc-bg twPc-block pull-left"> <img src="http://cdn.shopify.com/s/files/1/0691/5403/t/128/assets/insta-1.jpg?16696099757203580349" > </a> </div>
      <div class="pull-left col-xs-12 col-sm-12 col-md-12">
        <div class="bdr"></div>
        ssss
        <div class="bdr"></div>
        ssss
        <div class="bdr"></div>
        ssss
        <div class="bdr"></div>
        <div class="pull-left col-xs-12 col-sm-12 col-md-12 pzro"> <a title="Mert Salih Kaplan" href="#" class="twPc-avatarLink" style="margin: 0px 5px 10px 0px;"> <img alt="Mert Salih Kaplan" src="http://cdn.shopify.com/s/files/1/0691/5403/t/128/assets/avatar-mdo.jpg?16696099757203580349" class="twPc-avatarImg"> </a>
          <div class="twPc-divName" style="margin-top:15px;"> Mert S. Kaplan </div>
          <span>mertskaplan</span> </div>
      </div>
    </div>
  </div>
</div>
<!-- code end -->
<!-- time_line_end -->

<div class="container" style="margin-top:50px;">
  <div class="row"> 
    
    <!-- code start -->
    
    <div class="twPc-div col-xs-6 col-sm-6 col-md-6 pzro">
    <div class="row_mrgn">
   <div class="col-sm-12 pzro">  
 <div class="col-sm-4" style="padding-right: 0;" > <a class="twPc-bg twPc-block pull-left"> <img src="http://cdn.shopify.com/s/files/1/0691/5403/t/128/assets/insta-1.jpg?16696099757203580349" > </a> </div>
 <div class="col-sm-4" style="padding-right: 0;"> <a class="twPc-bg twPc-block pull-left"> <img src="http://cdn.shopify.com/s/files/1/0691/5403/t/128/assets/insta-1.jpg?16696099757203580349" > </a> </div>  
   <div class="col-sm-4" style="padding-right: 0;"> <a class="twPc-bg twPc-block pull-left"> <img src="http://cdn.shopify.com/s/files/1/0691/5403/t/128/assets/insta-1.jpg?16696099757203580349" > </a> </div>
   </div>
   </div>
     
      <div class="pull-left col-xs-12 col-sm-12 col-md-12">
        <div class="bdr"></div>
        ssss
        <div class="bdr"></div>
        ssss
        <div class="bdr"></div>
        ssss
        <div class="bdr"></div>
        <div class="pull-left col-xs-12 col-sm-12 col-md-12 pzro"> <a title="Mert Salih Kaplan" href="#" class="twPc-avatarLink" style="margin: 0px 5px 10px 0px;"> <img alt="Mert Salih Kaplan" src="http://cdn.shopify.com/s/files/1/0691/5403/t/128/assets/avatar-mdo.jpg?16696099757203580349" class="twPc-avatarImg"> </a>
          <div class="twPc-divName" style="margin-top:15px;"> Mert S. Kaplan </div>
          <span>mertskaplan</span> </div>
      </div>
    </div>
  </div>
</div>
<!-- code end -->


<!-- time_line_end -->

<div class="container" style="margin-top:50px;">
  <div class="row"> 
    
    <!-- code start -->
    
    <div class="twPc-div col-xs-6 col-sm-6 col-md-6 pzro">
  
   <div class="col-sm-12 " style="margin-left: -7px; margin-top: 15px;">  
 <div class="col-sm-4" style="padding-right: 0;" > <a class="twPc-bg twPc-block pull-left"> <img src="http://cdn.shopify.com/s/files/1/0691/5403/t/128/assets/insta-1.jpg?16696099757203580349" > </a> </div>
 <div class="col-sm-4" style="padding-right: 0;"> <a class="twPc-bg twPc-block pull-left"> <img src="http://cdn.shopify.com/s/files/1/0691/5403/t/128/assets/insta-1.jpg?16696099757203580349" > </a> </div>  
   <div class="col-sm-4" style="padding-right: 0;"> <a class="twPc-bg twPc-block pull-left"> <img src="http://cdn.shopify.com/s/files/1/0691/5403/t/128/assets/insta-1.jpg?16696099757203580349" > </a> </div>
   </div>
   
     
      <div class="pull-left col-xs-12 col-sm-12 col-md-12">
        <div class="bdr"></div>
        <bold>ssss</bold>
        <div class="bdr"></div>
        ssss
        <div class="bdr"></div>
        ssss
        <div class="bdr"></div>
        <div class="pull-left col-xs-12 col-sm-12 col-md-12 pzro"> <a title="Mert Salih Kaplan" href="#" class="twPc-avatarLink" style="margin: 0px 5px 10px 0px;"> <img alt="Mert Salih Kaplan" src="http://cdn.shopify.com/s/files/1/0691/5403/t/128/assets/avatar-mdo.jpg?16696099757203580349" class="twPc-avatarImg"> </a>
          <div class="twPc-divName" style="margin-top:15px;"> Mert S. Kaplan </div>
          <span>mertskaplan</span> </div>
      </div>
    </div>
  </div>
</div>
<!-- code end -->


<div class="container" style="margin-top:50px;">
  <div class="row"> 
    
    <!-- code start -->
    
    <div class="twPc-div col-xs-6 col-sm-6 col-md-6 pzro">
      <div> <a class="twPc-bg twPc-block pull-left"> <img src="http://cdn.shopify.com/s/files/1/0691/5403/t/128/assets/insta-1.jpg?16696099757203580349" > </a> </div>
      <div class="pull-left col-xs-12 col-sm-12 col-md-12">
        <div class="bdr"></div>
      Louis Vuittton - Wine color
jacket 
        <div class="bdr"></div>

        <div class="pull-left col-xs-12 col-sm-12 col-md-12 pzro"> <a title="Mert Salih Kaplan" href="#" class="twPc-avatarLink" style="margin: 0px 5px 10px 0px;"> <img alt="Mert Salih Kaplan" src="http://cdn.shopify.com/s/files/1/0691/5403/t/128/assets/avatar-mdo.jpg?16696099757203580349" class="twPc-avatarImg"> </a>
          <div class="twPc-divName" style="margin-top:25px;"> Mert S. Kaplan </div>
           </div>
      </div>
    </div>
  </div>
</div>
<!-- code end -->
<!-- time_line_end -->