<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> </div> </div> <div class="card mb-1"> <div class="card-body"> <div class="row"> <div class="col-md-4"> <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-5 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> </div> </div> <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-warning rounded-0 mb-1">PREVIEW</button> <button type="button" class="btn btn-success rounded-0 mb-1">SAVE</button> </div> </div> </div> </div> <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> </div> </div> </div> </div> </div> <div class="col-md-3"> <div class="card"> <div class="card-body"> <img src="https://assets.shopfront.envato-static.com/images/cross-sell__tutsplus.jpg"> </div> </div> </div> </div> </div>

img {width:100%;} .card-body {padding:15px;}