Pagination

Copy 
  
   
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
   <h5 class="card-title"></h5>
     <!-- Pagination with icons -->
     <nav aria-label="Page navigation example">
     <ul class="pagination flex-wrap ml-3">
       <li class="page-item">
         <a class="page-link" href="#" aria-label="Previous">
           <span aria-hidden="true">&lt;</span>
         </a>
       </li>
       <li class="page-item active"><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="#">4</a></li>
       <li class="page-item"><a class="page-link" href="#">5</a></li>
       <li class="page-item"><a class="page-link" href="#">...</a></li>
       <li class="page-item"><a class="page-link" href="#">10</a></li>

       <li class="page-item">
         <a class="page-link" href="#" aria-label="Next">
           <span aria-hidden="true">&gt;</span>
         </a>
       </li>
     </ul>
   </nav><!-- End Pagination with icons -->


   <nav aria-label="Page navigation example">
       <ul class="pagination flex-wrap ml-3">
         <li class="page-item">
           <a class="page-link" href="#" aria-label="Previous">
             <span aria-hidden="true">&lt;</span>
           </a>
         </li>
         <li class="page-item active"><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="#">4</a></li>
         <li class="page-item"><a class="page-link" href="#">5</a></li>
         <li class="page-item"><a class="page-link" href="#">6</a></li>
         <li class="page-item"><a class="page-link" href="#">7</a></li>
         <li class="page-item"><a class="page-link" href="#">8</a></li>

         <li class="page-item"><a class="page-link" href="#">...</a></li>
         <li class="page-item"><a class="page-link" href="#">19</a></li>
         <li class="page-item"><a class="page-link" href="#">20</a></li>

         <li class="page-item">
           <a class="page-link" href="#" aria-label="Next">
             <span aria-hidden="true">&gt;</span>
           </a>
         </li>
       </ul>
     </nav>

 </div>
</div>

  

</div>



<div class="col-lg-12">

<div class="card">
 <div class="card-body">
   <h5 class="card-title"></h5>
    <div>
      <div class="dataTables_length" id="example_length">
        <div class="wrap">
         <label>Show <select name="example_length" aria-controls="example" class="custom-select custom-select-sm form-control form-control-sm"><option value="10">10</option><option value="25">25</option><option value="50">50</option><option value="100">100</option></select> Rows of 10</label>
         <div class="result">
         <nav aria-label="row-pagination Page navigation example ">
            <ul class="pagination flex-wrap ml-3">
              <li class="page-item">
                <a class="page-link" href="#" aria-label="Previous">
                  <span aria-hidden="true">&lt;</span>
                </a>
              </li>
              <li class="page-item active"><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="#">4</a></li>
              <li class="page-item"><a class="page-link" href="#">5</a></li>
              <li class="page-item"><a class="page-link" href="#">...</a></li>
              <li class="page-item"><a class="page-link" href="#">10</a></li>

              <li class="page-item">
                <a class="page-link" href="#" aria-label="Next">
                  <span aria-hidden="true">&gt;</span>
                </a>
              </li>
            </ul>
          </nav>
          </div>
</div>
      
  </div>
</div>

 </div>
</div>

  

</div>



</div>
Copy 
  
   

   
      
     .dataTables_length label {
       font-weight: normal;
       text-align: left;
       white-space: nowrap;
       color: #7A7A7A;
       font-size: 12px;
     }
     .dataTables_length select {
       width: auto;
       display: inline-block;
       padding: 2px 30px 0px 10px;
       margin-right: 5px;
       margin-left: 5px;
     }
     
     .custom-control-label::before, .custom-file-label, .custom-select {
       transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
     }
     
     .custom-select-sm {
       height: calc(1.8125rem + 2px);
       padding-top: 0.375rem;
       padding-bottom: 0.375rem;
       font-size: 75%;
     }
     
     .custom-select {
       background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%233F4254' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 1rem center/8px 10px
     }
     
     .dataTables_length nav {
        display: inline-flex; 
        float: right;
        padding-top: 15px;
     }
     
     .font-weight-bold {
       font-weight: 700!important;
     }