Bootstrap 3 Template
This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.
HTML
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container col-xs-12 col-sm-12 col-md-12">
<div class="product-item col-xs-12 col-sm-12 col-md-4">
<a href="#" class="row">
<div class="item-img col-xs-6 col-sm-6 col-md-6">
<img src="#">
<p style="font-size:13px;"><b>Exp date</b></p>
<p class="price"><b>$1.09</b></p>
</div>
<div class="item-content col-xs- col-sm-6 col-md-6">
<h3>Title</h3>
<p>Description</p>
</div>
</a>
</div>
</div>
CSS
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.product-item {
width: 368px;
min-height: 150px;
background: none;
padding: 12px 0px 10px 0px;
margin: 10px 5px;
color: #000;
text-align: left;
border: 2px solid #F48B3A;
dis
}
.product-item .item-content {
max-height: 140px;
overflow: hidden;
}
.item-img .price {
color: blue;
font-weight: 600;
font-size: 14px;
}
.product-item .row {
display: table;
margin: 0;
table-layout: fixed;
width: 100%;
}
.item-img,
.item-content {
float: none !important;
display: table-cell;
}
JavaScript
/* Latest compiled and minified JavaScript included as External Resource */