Centering the pagination in bootstrap

HtmlTwitter BootstrapCss

Html Problem Overview

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.

Html Solutions

Solution 1 - Html

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/</strike>

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/</strike>

Solution 2 - Html

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][1], [Bootstrap 2.3.2][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/

[1]: http://getbootstrap.com/components/#pagination "3.0" [2]: http://getbootstrap.com/2.3.2/components.html#pagination "Boostrap 2.3.2"

Solution 3 - Html

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.

Solution 4 - Html

Using laravel with bootstrap 4, the solution that worked:

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

Solution 5 - Html

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>

Solution 6 - Html

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>

Solution 7 - Html

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>

Solution 8 - Html

You can add your custom Css:

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

Thank you

Solution 9 - Html

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>

Solution 10 - Html

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.

Solution 11 - Html

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/

Solution 12 - Html

In v4.0.0-alpha.6:

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

Solution 13 - Html

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>

Solution 14 - Html

This css works for me:

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

Solution 15 - Html

if use bootstrap

in blade page

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

Solution 16 - Html

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>

Categories
Recommended Html Solutions
Recommended Twitter Bootstrap Solutions
Recommended Css Solutions

Previous Solution:

An async/await example that causes a deadlock

C#Task Parallel-LibraryDeadlockAsync AwaitC# 5.0

Next Solution:

Difference between casting and using the Convert.To() method

C#Casting

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser192362127View Question on Stackoverflow
Solution 1 - HtmlPraveen Kumar PurushothamanView Answer on Stackoverflow
Solution 2 - HtmlBenView Answer on Stackoverflow
Solution 3 - HtmlNoobTWView Answer on Stackoverflow
Solution 4 - HtmlmanelseoView Answer on Stackoverflow
Solution 5 - Htmlcore114View Answer on Stackoverflow
Solution 6 - HtmlcurtisdfView Answer on Stackoverflow
Solution 7 - HtmlAndrewView Answer on Stackoverflow
Solution 8 - HtmlFerhat KOÇERView Answer on Stackoverflow
Solution 9 - HtmlnatyView Answer on Stackoverflow
Solution 10 - HtmlEmma BurrowsView Answer on Stackoverflow
Solution 11 - HtmlDavid SalcerView Answer on Stackoverflow
Solution 12 - HtmlCam TullosView Answer on Stackoverflow
Solution 13 - HtmlEassa NassarView Answer on Stackoverflow
Solution 14 - HtmlAzephiarView Answer on Stackoverflow
Solution 15 - HtmlWaad MawloodView Answer on Stackoverflow
Solution 16 - HtmlParth PatelView Answer on Stackoverflow