The height of div on Bootstrap is different in row, so there is a gap problem.

this is my code, because row is all on one line. But it feels like the two are not on the same level, the button is high and the paging is obviously lower.

this is the picture.
clipboard.png

this is the code.

<div class="row" style="margin-top:50px;padding-bottom:50px;">
  <div class="col-md-1"></div>
    <div class="col-md-1">
      <button type="button" class="btn btn-primary"></button>
    </div>
    <div class="col-md-3 col-md-offset-6">
      <ul class="pagination" style="display:inline-block;">
        <li ><a href="-sharp"></a></li>
        <li class="active"><a href="-sharp">1</a></li>
        <li class="disabled"><a href="-sharp">2</a></li>
        <li><a href="-sharp">3</a></li>
        <li><a href="-sharp">4</a></li>
        <li><a href="-sharp"></a></li>
      </ul>
    </div>
  <div class="col-md-1"></div>
</div>
Feb.24,2022

because . Pagination of bootstrap.min.css margin: 20px 0;
you can write another style yourself and overwrite its margin .
Click to view demo

.

this demo directly previews page breaks. The width may be too small to fit. It is better to open a new page to view demo

.

change the layout of your row div?

div.row {
  display: flex;
  align-items: center;
}

ul tag uses inline-block,. You need to use vertical-align or location position to adjust

.
Menu