"LISTING VIEW"
Bootstrap 4.0.0 Snippet by jeevan123456

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<div class="card mb-1">
<div class="card-body">
<div class="row">
<div class="col-md-3">
<img src="https://previews-themeforest.imgix.net/files/112138384/590x300.jpg?auto=compress%2Cformat&fit=crop&crop=top&w=590&h=300&s=bb6b8b5332dac7c4dd5ab59181d940b9">
<p class="card-text"><small class="text-muted">Tags: Second Hand, Honda, SUV, Delhi</small></p>
</div>
<div class="col-md-6 border-right">
<h5 class="text-danger">Verado - profesional HTML5 Template</h5>
<a href="#" class="badge badge-secondary">Site Template/ Automobiles</a>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<div class="col-md-3">
<h5>Rs. 45000</h5>
<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
<small>Last updated: 10 Nov 15</small>
<p>Total Visits: 91</p>
<button type="button" class="btn btn-outline-secondary rounded-0 mb-1">PREVIEW</button>
<button type="button" class="btn btn-outline-secondary rounded-0 mb-1">SAVE</button>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
img {width:100%;}
.card-body {padding:15px;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: