<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <section class="py-5 bg-warning"> <div class="container"> <div class="row"> <div class="col-md-8"> col-8 </div> <div class="col-md-4"> col-4 </div> </div> </div> </section> <section class="py-5 bg-primary"> <div class="container"> <div class="row"> <div class="col-md-8"> <div class="row"> <div class="col-md-6"> <div class="card p-3"> <h5>Honda City 2017</h5> <ul> <li>New Delhi</li> <li>New Delhi</li> </ul> <div class="card-footer"> <button type="button" class="btn btn-sm btn-outline-primary">Update</button> </div> </div> </div> </div> </div> <div class="col-md-4"> col-4 </div> </div> </div> </section> <section class="py-5 bg-secondary"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="row"> <div class="col-md-3"> <div class="card shadow"> <kbd>10 March 2019</kbd> <div class="card-body"> <h5>Honda City 2016</h5> <small>New Delhi</small>, <small>Reference No.</small>, <small>Kotak Mahindra Bank</small> </div> <div class="card-footer"> <button type="button" class="btn btn-sm btn-outline-primary">Update</button> </div> </div> </div> <div class="col-md-3"> <div class="card shadow"> <kbd>10 March 2019</kbd> <div class="card-body"> <h5>Honda City 2016</h5> <small>New Delhi</small>, <small>Reference No.</small>, <small>Kotak Mahindra Bank</small> </div> <div class="card-footer"> <button type="button" class="btn btn-sm btn-outline-primary">Update</button> </div> </div> </div> <div class="col-md-3"> <div class="card shadow"> <kbd>10 March 2019</kbd> <div class="card-body"> <h5>Honda City 2016</h5> <small>New Delhi</small>, <small>Reference No.</small>, <small>Kotak Mahindra Bank</small> </div> <div class="card-footer"> <button type="button" class="btn btn-sm btn-outline-primary">Update</button> </div> </div> </div> <div class="col-md-3"> <div class="card shadow"> <kbd>10 March 2019</kbd> <div class="card-body"> <h5>Honda City 2016</h5> <small>New Delhi</small>, <small>Reference No.</small>, <small>Kotak Mahindra Bank</small> </div> <div class="card-footer"> <button type="button" class="btn btn-sm btn-outline-primary">Update</button> </div> </div> </div> </div> </div> </div> </div> </section>

img {width:100%;}