CODEWITHSUNDEEP
htmlcsstwitter-bootstrappagination
raduken
raduken

Reputation: 2119

grid and bootstrap pagination

I am using boostrap grid and pagination, I need get the result bellow which I showed you in the image:enter image description here

the label and pagination needs to be aligned to the right as I am trying now with my code. the thing I can't make this be aligned and cool like the image.

can someone help?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="col-md-2 col-md-offset-7">
  <label>Page 1 of 3</label>
</div>
<div class="col-md-3">
  <ul class="pagination">
  <li><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>
</ul>
</div>
<h1>
need get this result
</h1>
<img src="https://i.imgur.com/eJplxch.jpg">

Upvotes: 0

Views: 2597

Answers (2)

Robert
Robert

Reputation: 6967

I would not recommend relying on the Grid for this solution; you never know when you'll have to display Page 1 of 1 or Page 1 of 72,386,104. A better approach would be to have both the label and the pagination in the same column, but that will take a few additional class declarations in Bootstrap 3.x (Note: Literally everything in this solution can be accomplished with native classes in Bootstrap 4).

.d-inline-block {
  display: inline-block;
  vertical-align: middle;
}
  
.pagination-label {
  margin-right: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 text-right">
      <strong class="pagination-label d-inline-block">Page 1 of 3</strong>
 
      <div class="d-inline-block">
        <ul class="pagination">
        <li><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>
        </ul>
      </div>
  </div>
</div>

Applying display: inline-block to both the label and the pagination (as a wrapper element) cause the two to align horizontally. The vertical-align declaration will cause the label text to center itself in relation to the pagination.

pagination-label merely applies a small right-margin bump so everything isn't squished together.

One advantage to this approach is that you can easily adjust the alignment of the entire thing with native classes like text-left, text-center, or (in the case of this example) text-right.

Upvotes: 1

Levano
Levano

Reputation: 319

It's quite simple with flex-box. Wrap your two cols in a parent element.

Here's a JSFiddle example.

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

Upvotes: 0

Related Questions