Bootstrap Card
Card design.
by superj80820
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container" >
<ul class="list-group">
<li>
<div class="panel panel-default">
<div class="panel-body">
<div class="panel-info">
<p><strong>Tel: 011-345-898</strong></p>
<p>9182 Lorem Ipsum<br />
consectetur adipiscing elit.<br />
Nullam vel lacus felis.</p>
</div>
<div class="panel-rating">
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<p>Rate Yourself!</p>
</div>
<div class="panel-more1">
<img src="http://lorempixel.com/100/100" />
<br /><span>Caption</span>
</div>
<div class="panel-more1">
<img src="http://lorempixel.com/100/100" />
<br /><span>Caption</span>
</div>
<div class="panel-more1">
<img src="http://lorempixel.com/100/100" />
<br /><span>Caption</span>
</div>
</div>
</div>
</li>
<li>
<div class="panel panel-default">
<div class="panel-body">
<div class="panel-info">
<p><strong>Tel: 011-345-898</strong></p>
<p>9182 Lorem Ipsum<br />
consectetur adipiscing elit.<br />
Nullam vel lacus felis.</p>
</div>
...
CSS
.list-group li {
list-style: none;
}
.panel-info, .panel-rating, .panel-more1 {
float: left;
margin: 0 10px;
}