Centering the pagination in bootstrap

Question

I have this code in pagination   lt div class  pagination  gt       lt ul gt           lt li gt  lt a href   p 0  data-original-title    title    gt 1 lt  a gt  lt  li gt            lt li gt  lt a href   p 1  data-original-title    title    gt 2 lt  a gt  lt  li gt        lt  ul gt   lt  div gt    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

User · Answer

You can use the below code to center pagination     x000D   x000D   pagination-centered   x000D      text-align  center  x000D    x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css  rel  stylesheet   gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div class  pagination-centered  gt  x000D       lt ul class  pagination  gt  x000D         lt li class  active  gt  lt a href     gt 1 lt  a gt  lt  li gt  x000D         lt li gt  lt a href     gt 2 lt  a gt  lt  li gt  x000D         lt li gt  lt a href     gt 3 lt  a gt  lt  li gt  x000D       lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

bootstrap 4     lt  -- Default  left-aligned  -- gt   lt ul class  pagination  style  margin 20px 0  gt     lt li class  page-item  gt     lt  li gt   lt  ul gt    lt  -- Center-aligned -- gt   lt ul class  pagination justify-content-center  style  margin 20px 0  gt     lt li class  page-item  gt     lt  li gt   lt  ul gt    lt  -- Right-aligned -- gt   lt ul class  pagination justify-content-end  style  margin 20px 0  gt     lt li class  page-item  gt     lt  li gt   lt  ul gt

User · Answer

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   lt div class  text-center  gt       lt ul class  pagination  gt           lt li gt  lt a href   p 0  data-original-title    title    gt 1 lt  a gt  lt  li gt            lt li gt  lt a href   p 1  data-original-title    title    gt 2 lt  a gt  lt  li gt        lt  ul gt   lt  div gt    http   jsfiddle net mynameiswilson eYNMu   Bootstrap 2 3 2 Example   lt div class  pagination text-center  gt       lt ul gt           lt li gt  lt a href   p 0  data-original-title    title    gt 1 lt  a gt  lt  li gt            lt li gt  lt a href   p 1  data-original-title    title    gt 2 lt  a gt  lt  li gt        lt  ul gt   lt  div gt    http   jsfiddle net mynameiswilson 84X3M

User · Answer

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  lt li gt  elements have float left  which means merely wrapping the  lt ul gt  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  lt ul gt  use display inline-block instead   Here s the code    lt div class  text-center  gt       lt ul class  pagination  style  display  inline-block  gt           lt li gt  lt a href       gt     lt  a gt  lt  li gt       lt  ul gt   lt  div gt    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    lt div class  text-center  gt       lt ul class  pagination  gt           lt li gt  lt a href       gt     lt  a gt  lt  li gt       lt  ul gt   lt  div gt

User · Answer

Bootstrap has added a new class from 3 0    lt div class  text-center  gt       lt ul class  pagination  gt           lt li gt  lt a href   p 0  data-original-title    title    gt 1 lt  a gt  lt  li gt            lt li gt  lt a href   p 1  data-original-title    title    gt 2 lt  a gt  lt  li gt        lt  ul gt   lt  div gt    Bootstrap 4 has new class   lt div class  text-xs-center  gt       lt ul class  pagination  gt           lt li gt  lt a href   p 0  data-original-title    title    gt 1 lt  a gt  lt  li gt            lt li gt  lt a href   p 1  data-original-title    title    gt 2 lt  a gt  lt  li gt        lt  ul gt   lt  div gt    For 2 3 2   lt div class  pagination text-center  gt       lt ul gt           lt li gt  lt a href   p 0  data-original-title    title    gt 1 lt  a gt  lt  li gt            lt li gt  lt a href   p 1  data-original-title    title    gt 2 lt  a gt  lt  li gt        lt  ul gt   lt  div gt      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    lt div class  pagination pagination-centered  gt       lt ul gt           lt li gt  lt a href   p 0  data-original-title    title    gt 1 lt  a gt  lt  li gt            lt li gt  lt a href   p 1  data-original-title    title    gt 2 lt  a gt  lt  li gt        lt  ul gt   lt  div gt    Fiddle  http   jsfiddle net praveenscience 5L8fu 1

User · Answer

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   x000D   x000D   lt link href  https   stackpath bootstrapcdn com bootstrap 4 1 3 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   x000D   x000D   lt nav aria-label  Page navigation example  gt  x000D     lt ul class  pagination justify-content-center  gt  x000D       lt li class  page-item disabled  gt  x000D         lt a class  page-link  href     tabindex  -1  gt Previous lt  a gt  x000D       lt  li gt  x000D       lt li class  page-item  gt  lt a class  page-link  href     gt 1 lt  a gt  lt  li gt  x000D       lt li class  page-item  gt  lt a class  page-link  href     gt 2 lt  a gt  lt  li gt  x000D       lt li class  page-item  gt  lt a class  page-link  href     gt 3 lt  a gt  lt  li gt  x000D       lt li class  page-item  gt  x000D         lt a class  page-link  href     gt Next lt  a gt  x000D       lt  li gt  x000D     lt  ul gt  x000D   lt  nav gt  x000D   x000D   x000D

User · Answer

It works for me    lt div class  text-center  gt   lt ul class  pagination pagination-lg  gt      lt li gt     lt a href     aria-label  Previous  gt       lt span aria-hidden  true  gt  amp laquo  lt  span gt     lt  a gt   lt  li gt   lt li gt  lt a href     gt 1 lt  a gt  lt  li gt   lt li gt  lt a href     gt 2 lt  a gt  lt  li gt   lt li gt  lt a href     gt 3 lt  a gt  lt  li gt   lt li gt  lt a href     gt 4 lt  a gt  lt  li gt   lt li gt  lt a href     gt 5 lt  a gt  lt  li gt   lt li gt     lt a href     aria-label  Next  gt       lt span aria-hidden  true  gt  amp raquo  lt  span gt     lt  a gt   lt  li gt   lt  ul gt

User · Answer

This this  it worked for me   Style    pagination     display  flex    justify-content  center      pagination li     display  block       And blade    lt div class  pagination  gt                                                      myCollection- gt render       lt  div gt

User · Answer

You can add your custom Css    pagination      display table      margin 0 auto      Thank you

User · Answer

In v4 0 0-alpha 6    lt div class  text-center text-sm-right  gt       lt ul class  pagination d-inline-flex  gt     lt  ul gt   lt  div gt

User · Answer

This css works for me    dataTables paginate      float  none  important     text-align  center  important

User · Answer

To centered the pagination in BS4  should add justify-content-center in ul   x000D   x000D    lt nav aria-label  Page navigation example  gt       lt ul class  pagination justify-content-center  gt         lt li class  page-item disabled  gt           lt a class  page-link  href     tabindex  -1  gt Previous lt  a gt         lt  li gt         lt li class  page-item  gt  lt a class  page-link  href     gt 1 lt  a gt  lt  li gt         lt li class  page-item  gt  lt a class  page-link  href     gt 2 lt  a gt  lt  li gt         lt li class  page-item  gt  lt a class  page-link  href     gt 3 lt  a gt  lt  li gt         lt li class  page-item  gt           lt a class  page-link  href     gt Next lt  a gt         lt  li gt       lt  ul gt     lt  nav gt    lt link rel  stylesheet  href  https   stackpath bootstrapcdn com bootstrap 4 5 2 css bootstrap min css  integrity  sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z  crossorigin  anonymous  gt  x000D   x000D   x000D   See Pagination Bootstrap 4 for further information

User · Answer

Using laravel with bootstrap 4  the solution that worked   lt div class  quot d-flex quot  gt       lt div class  quot mx-auto quot  gt             products- gt links  quot pagination  bootstrap-4 quot          lt  div gt   lt  div gt

User · Answer

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    lt div class  text-center  gt     lt ul class  pagination  gt       lt li gt  lt a href       gt     lt  a gt  lt  li gt     lt  ul gt   lt  div gt    No other combination of display  margin or class on the wrapping div seemed to work

[html] Centering the pagination in bootstrap

Examples related to html

Examples related to twitter-bootstrap

Examples related to css