Centering the pagination in bootstrap

Question

I have this code in pagination

<div class="pagination">
    <ul>
        <li><a href="?p=0" data-original-title="" title="">1</a></li> 
        <li><a href="?p=1" data-original-title="" title="">2</a></li> 
    </ul>
</div>

But my ul is left aligned. Is there any way to center the ul wrt div?

I tried margin: auto auto and margin :0 auto they but didn't work.

With Bootstrap 3, you would have to wrap the `
...
` inside a `
`. — caw, Sep 24 '13 at 00:16
Bootstrap has several versions... It would be helpful if you could mention which specific version you are using. — Tariqul Islam, Feb 25 '20 at 14:35

score 158 · Accepted Answer · edited Sep 20 '16 at 02:28

158

Bootstrap has added a new class from 3.0.

<div class="text-center">
    <ul class="pagination">
        <li><a href="?p=0" data-original-title="" title="">1</a></li> 
        <li><a href="?p=1" data-original-title="" title="">2</a></li> 
    </ul>
</div>

Bootstrap 4 has new class

<div class="text-xs-center">
    <ul class="pagination">
        <li><a href="?p=0" data-original-title="" title="">1</a></li> 
        <li><a href="?p=1" data-original-title="" title="">2</a></li> 
    </ul>
</div>

For 2.3.2

<div class="pagination text-center">
    <ul>
        <li><a href="?p=0" data-original-title="" title="">1</a></li> 
        <li><a href="?p=1" data-original-title="" title="">2</a></li> 
    </ul>
</div>

~~Give this way:~~

.pagination {text-align: center;}

~~It works because ul is using inline-block;~~

Fiddle: http://jsfiddle.net/praveenscience/5L8fu/

~~Or if you would like to use Bootstrap's class:~~

<div class="pagination pagination-centered">
    <ul>
        <li><a href="?p=0" data-original-title="" title="">1</a></li> 
        <li><a href="?p=1" data-original-title="" title="">2</a></li> 
    </ul>
</div>

Fiddle: http://jsfiddle.net/praveenscience/5L8fu/1/

edited Sep 20 '16 at 02:28

JayDi

1,037
15
24

answered Mar 07 '13 at 07:19

Praveen Kumar Purushothaman

164,888
24
203
252

i tried and it didn't work. there is no overididng all css i can see in firebug is from bootstrap and this one – user192362127 Mar 07 '13 at 07:22
Use `pagination-centered`. Both does the same, but this is better. See http://jsfiddle.net/praveenscience/5L8fu/1/ – Praveen Kumar Purushothaman Mar 07 '13 at 07:26
can you tell where in the docs they have reference to pagination-centered – user192362127 Mar 07 '13 at 07:33
See [Pagination](http://twitter.github.com/bootstrap/components.html#pagination), and in that **Alignment** section. *Add one of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.* – Praveen Kumar Purushothaman Mar 07 '13 at 07:35
**Some people would like to watch the world burn with hit and run downvotes. Can they please clarify what's the problem with the answer?** – Praveen Kumar Purushothaman Sep 24 '13 at 11:30
9

@Praveen .pagination-centered was removed in Bootstrap 3, use .text-center instead. No downvote from me, though :P – Kevin C. Nov 12 '13 at 03:07
2

I don't know when drive-by downvoting became cool, but your first answer works for me so have an upvote. – David Harbage Nov 27 '13 at 01:20
`pagination pagination-centered` totally worked for me and looks clean – Cesar Bielich Jun 06 '15 at 16:37
1

Is it a good idea to add Bootstrap 4 given that it is still in alpha? – Phil Oct 18 '16 at 20:01
5
Bootstrap 4 should be `
...`
– Lysergia25 Apr 26 '17 at 06:15
12
Add `
– Денис May 11 '18 at 01:39
@Денис Sure. Will do. – Praveen Kumar Purushothaman May 11 '18 at 11:23
6
The currently accepted answer is wrong. It was obviously right at some point, but it's wrong now, at least for BS 4.x. The correct answer is now to add justify-content-center to the ul:
– FlashJordan May 18 '18 at 15:45
.dataTables_paginate .pagination { justify-content: center !important; } – Petraeus Mar 26 '19 at 14:08
For BS 4.5, this is not correct. Alignment is now discussed in the [Pagination documentation](https://getbootstrap.com/docs/4.5/components/pagination/#alignment) and [noobtw's answer](https://stackoverflow.com/a/43660921/1673550) is better. – OllieBrown Jun 15 '20 at 19:47
@OllieBrown As this answer is written before Bootstrap 4.5 was released, it is very obvious that this is outdated. Would you like to update the answer, as that would be the right thing to do instead of complaining? If not, I'll update it tomorrow. Thanks for your feedback. – Praveen Kumar Purushothaman Jun 15 '20 at 20:09

score 86 · Answer 2 · edited Jun 16 '15 at 00:08

For both Bootstrap 3.0 and 2.3.2, to center pagination, the .text-center class can be applied to the containing div.

Note: Where to apply the .pagination class in the markup has changed between Bootstrap 2.3.2 and 3.0. See below, or read the Bootstrap docs on pagination: Bootstrap 3.0, Bootstrap 2.3.2.

Bootstrap 3 Example

<div class="text-center">
    <ul class="pagination">
        <li><a href="?p=0" data-original-title="" title="">1</a></li> 
        <li><a href="?p=1" data-original-title="" title="">2</a></li> 
    </ul>
</div>

http://jsfiddle.net/mynameiswilson/eYNMu/

Bootstrap 2.3.2 Example

<div class="pagination text-center">
    <ul>
        <li><a href="?p=0" data-original-title="" title="">1</a></li> 
        <li><a href="?p=1" data-original-title="" title="">2</a></li> 
    </ul>
</div>

http://jsfiddle.net/mynameiswilson/84X3M/

also Bootstrap should document this. – ryenus Apr 25 '14 at 08:06 — ryenus, Apr 25 '14 at 08:06

NoobTW · Answer 3 · 2020-08-17T07:19:46.200

To centered the pagination in BS4, should add justify-content-center in ul:

 <nav aria-label="Page navigation example">
    <ul class="pagination justify-content-center">
      <li class="page-item disabled">
        <a class="page-link" href="#" tabindex="-1">Previous</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="#">Next</a>
      </li>
    </ul>
  </nav>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

See Pagination Bootstrap 4 for further information.

score 34 · Answer 4 · edited Nov 12 '20 at 22:05

34

Using laravel with bootstrap 4, the solution that worked:

<div class="d-flex">
    <div class="mx-auto">
        {{$products->links("pagination::bootstrap-4")}}
    </div>
</div>

edited Nov 12 '20 at 22:05

rrk

15,677
4
29
45

answered Jul 07 '18 at 09:17

manelseo

587
4
6

using Symfony and bootstrap4, working too ! thanks ! – Roubi Sep 26 '19 at 02:49

score 13 · Answer 5 · answered Sep 26 '18 at 08:50

solution for Bootstrap 4

You can use it Alignment use this class justify-content-center

Change the alignment of pagination components with flexbox utilities.

and learn more about it pagination

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>



<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</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="#">Next</a>
    </li>
  </ul>
</nav>

score 8 · Answer 6 · edited Dec 23 '19 at 21:41

The previously mentioned solutions for Bootstrap 3.0 did not work for me on 3.1.1. The pagination class has display:block, and the <li> elements have float:left, which means merely wrapping the <ul> in text-center alone does not work. I have no idea how or when things changed between 3.0 and 3.1.1. Anyway, I had make the <ul> use display:inline-block instead. Here's the code:

<div class="text-center">
    <ul class="pagination" style="display: inline-block">
        <li><a href="...">...</a></li>
    </ul>
</div>

Or for a cleaner setup, omit the style attribute and put it in your stylesheet instead:

.pagination {
    display: inline-block;
}

And then use the markup previously suggested:

<div class="text-center">
    <ul class="pagination">
        <li><a href="...">...</a></li>
    </ul>
</div>

score 8 · Answer 7 · answered Sep 01 '18 at 04:22

8

This this, it worked for me:

Style:

.pagination {
  display: flex;
  justify-content: center;
}

.pagination li {
  display: block;
 }

And blade:

<div class="pagination">                                              
  {{ $myCollection->render() }}
</div>

answered Sep 01 '18 at 04:22

Andrew

7,619
13
63
117

Using the settings of your first definition, I created the class below and added it to the wrapping div above my pagination did the trick for me. `.cs-list-paginator { display: flex; justify-content: center; } ` – cdsaenz Jan 03 '20 at 17:51

Ferhat KOÇER · Answer 8 · 2016-12-07T11:19:05.103

6

You can add your custom Css:

.pagination{
    display:table;
    margin:0 auto;
}

Thank you

edited Dec 07 '16 at 11:19

answered Nov 14 '14 at 09:56

Ferhat KOÇER

3,890
1
26
26

score 4 · Answer 9 · answered Jan 06 '15 at 19:51

It works for me:

<div class="text-center">
<ul class="pagination pagination-lg">
   <li>
  <a href="#" aria-label="Previous">
    <span aria-hidden="true">&laquo;</span>
  </a>
</li>
<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>
<li>
  <a href="#" aria-label="Next">
    <span aria-hidden="true">&raquo;</span>
  </a>
</li>
</ul>

score 3 · Answer 10 · answered Mar 18 '17 at 10:31

I couldn't get any of the proposed solutions to work with Bootstrap 4 alpha 6, but the following variation finally got me a centred pagination bar.

CSS override:

.pagination {
  display: inline-flex;
  margin: 0 auto;
}

HTML:

<div class="text-center">
  <ul class="pagination">
    <li><a href="...">...</a></li>
  </ul>
</div>

No other combination of display, margin or class on the wrapping div seemed to work.

score 3 · Answer 11 · answered Mar 07 '21 at 09:44

3

In Boostrap 5 pagination centering

        <ul class=" pagination justify-content-center >";

Using: https://getbootstrap.com/docs/5.0/components/pagination/ and https://getbootstrap.com/docs/5.0/utilities/flex/

answered Mar 07 '21 at 09:44

David Salcer

61
5

score 1 · Answer 12 · answered Jul 23 '17 at 01:51

1

In v4.0.0-alpha.6:

<div class="text-center text-sm-right">
    <ul class="pagination d-inline-flex">...</ul>
</div>

answered Jul 23 '17 at 01:51

Cam Tullos

2,537
1
21
18

score 1 · Answer 13 · answered Feb 07 '19 at 10:46

bootstrap 4 :

<!-- Default (left-aligned) -->
<ul class="pagination" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>

<!-- Center-aligned -->
<ul class="pagination justify-content-center" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>

<!-- Right-aligned -->
<ul class="pagination justify-content-end" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>

score 0 · Answer 14 · answered Aug 31 '17 at 19:08

0

This css works for me:

.dataTables_paginate {
   float: none !important;
   text-align: center !important;
}

answered Aug 31 '17 at 19:08

Azephiar

501
6
19

score 0 · Answer 15 · answered Jan 24 '22 at 20:33

0

if use bootstrap

in blade page

<div class="pagination justify-content-center">
   {{ $products->links() }}
     //or
   {{ $products->render() }}
</div>

answered Jan 24 '22 at 20:33

Waad Mawlood

727
6
10

score -2 · Answer 16 · answered Nov 28 '15 at 06:29

You can use the below code to center pagination

.pagination-centered {
    text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pagination-centered">
    <ul class="pagination">
      <li class="active"><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
    </ul>
</div>

No need for custom class when there are helpers in bootstrap that will solve the issue. — Cam Tullos, Jul 23 '17 at 01:52

Centering the pagination in bootstrap

16 Answers16

Bootstrap has added a new class from 3.0.

Bootstrap 4 has new class

For 2.3.2

Fiddle: http://jsfiddle.net/praveenscience/5L8fu/

Fiddle: http://jsfiddle.net/praveenscience/5L8fu/1/

Linked

Related