CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Barrosy
Barrosy

Reputation: 1457

How to vertically center page limiter next to pagination Bootstrap 3?

The page I am working on contains a table with a pagination element (provided by Bootstrap 3). I would like to add a page limiter to the pagination as well, allowing the user to set the maximum amount of items per page to show. When I try doing this, the control for this moves out of position:

.block {
  border: 1px solid #000;
  border-radius: 2px;
  margin: 2px;
}

.left {
  display: inline-block;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="block left">
  <nav aria-label="Page navigation">
    <ul class="pagination">
      <li class="disabled">
        <a href="#" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      <li class="active"><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li>
        <a href="#" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
  </nav>
</div>
<div class="block left">
  <!-- Must go in here -->
  <!--<div class="form-inline">
    <div class="form-group">-->
  <!--<select type="text" class="form-control" id="exampleInputName2">-->
  <select type="text" id="exampleInputName1">
    <option>10</option>
    <option>20</option>
    <option>50</option>
  </select>
  <!--<label for="exampleInputName2">Items per page</label>
    </div>
  </div>-->
</div>
<br />
<br /> \/ Select below vertically centered next to the pagination above /\
<div class="block text-center">
  <!-- How to copy this into the second "block" without break it from its layout? -->
  <div class="form-inline">
    <div class="form-group">
      <select type="text" class="form-control" id="exampleInputName2">
        <option>10</option>
        <option>20</option>
        <option>50</option>
      </select>
      <label for="exampleInputName2">Items per page</label>
    </div>
  </div>
</div>

JSFiddle

How could I solve this?

I tried adding margin-top: -50px; (just to get it to move in the first place) but this seems unable to move the element:

.block {
  border: 1px solid #000;
  border-radius: 2px;
  margin: 2px;
}

.left {
  display: inline-block;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="block left">
  <nav aria-label="Page navigation">
    <ul class="pagination">
      <li class="disabled">
        <a href="#" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      <li class="active"><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li>
        <a href="#" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
  </nav>
</div>
<div class="block left" style="margin-top: -50px;">
  <!-- Must go in here -->
  <div class="form-inline">
    <div class="form-group">
      <select type="text" class="form-control" id="exampleInputName1">
        <!--<select type="text" id="exampleInputName1">-->
        <option>10</option>
        <option>20</option>
        <option>50</option>
      </select>
      <label for="exampleInputName2">Items per page</label>
    </div>
  </div>
</div>
<br />
<br /> \/ Select below vertically centered next to the pagination above /\
<div class="block text-center">
  <!-- How to copy this into the second "block" without break it from its layout? -->
  <div class="form-inline">
    <div class="form-group">
      <select type="text" class="form-control" id="exampleInputName2">
        <option>10</option>
        <option>20</option>
        <option>50</option>
      </select>
      <label for="exampleInputName2">Items per page</label>
    </div>
  </div>
</div>

JSfiddle

Upvotes: 0

Views: 292

Answers (1)

Karuppiah RK
Karuppiah RK

Reputation: 3964

No need to set margin-top: -50px. You can add a parent div and add below css class.

JsFiddle

.alignCenter {
  display: flex;
  align-items: center
}

Upvotes: 1

Related Questions