<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="main-content py-5"> <div class="container"> <div class="row title"> <div class="col-md-12"> <h4>Title of the Page goes here</h4> <p>Find the updates on Latest News in this area</p> </div> </div> <div class="row"> <div class="col-md-9 pr-1"> <div class="row mb-2"> <div class="col-md-12"> <div class="card "> <div class="card-body"> Insert Rows after rows here in this box </div> </div> </div> </div> <div class="row mb-2"> <div class="col-md-12"> <nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only">Previous</span> </a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a> </li> </ul> </nav> </div> </div> </div> <div class="col-md-3 pl-1"> <div class="row mb-2"> <div class="col-md-12"> <div class="card "> <div class="card-body"> Insert Rows after rows here in this box </div> </div> </div> </div> </div> </div> </div> </section>

body {background:#f2f2f2;}

gutter less by pl-1 and pr-1