Bootstrap 4 Center Pagination in Column

Bootstrap 4 Center Pagination in Column

I changed the column to display:flex using d-flex and now mx-auto works to center the pagination UL...

This works without extra CSS

<div class="container">
    <div class="row">
        <div class="col-lg-6 offset-lg-3 py-5 border d-flex">
            <ul class="pagination mx-auto">
                <li class="page-item disabled">
                    <a class="page-link" href="#" aria-label="Previous">
                        <span aria-hidden="true">«</span>
                        <span class="sr-only">Previous</span>
                    </a>
                </li>
                <li class="page-item active">
                    <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="#">4</a></li>
                <li class="page-item">
                    <a class="page-link" href="#" aria-label="Next">
                        <span aria-hidden="true">»</span>
                        <span class="sr-only">Next</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

http://www.codeply.com/go/JQKwUW2Tjg

Alternately, the justify-content-center class can be used in the 'pagination` UL.

Centering the pagination in bootstrap

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/

How to center Bootstrap Vue pagination under table?

You could use cols="auto" instead of cols="3", that way the column will automatically size itself after the content, instead a specific width as you have now.

https://bootstrap-vue.org/docs/components/layout#variable-width-content

<b-row align-h="center" align-content="center">
  <b-col cols="auto">
    <b-pagination></b-pagination>
  </b-col>
</b-row>

You could also use Bootstraps Flex Utilities

<div class="d-flex justify-content-center">
  <b-pagination></b-pagination>
</div>

How to center the pagination in jQuery Bootstrap DataTables plugin?

Initialize your DataTable as:

$(document).ready(function () {

    /* DataTables */
    var myTable = $("#myTable").dataTable({
        "sDom": '<"row view-filter"<"col-sm-12"<"pull-left"l><"pull-right"f><"clearfix">>>t<"row view-pager"<"col-sm-12"<"text-center"ip>>>'
    });

});

Bootstrap alignment of button and pagination

Try adding ths:-

.pagination {
margin: 0px !important;
}

Unable to center select list and paginator inside bootstrap-vue column in modal footer

I think the problem is that the ul in bootstrap-vue pagination has a margin that overrides the previous props. You could fix that by setting the pagination margin to 0 (i.e. m-0 bootstrap way) and apply the margin/padding manually to other elements to make it look good. So, something like this:

<template #modal-footer="{ ok, cancel }">
    <div class="row mx-2">
        <div class="col-9 text-right border border-primary d-flex justify-content-center py-2">
            <b-form inline>
                <b-form-select class="justify-content-end"
                               v-model="perPage"
                               :options="pagerSelectOptions"
                >
                </b-form-select>

                <b-pagination
                    class="m-0"
                    v-model="currentPage"
                    :total-rows="totalRows"
                    :per-page="perPage"
                    size="md"
                    hide-goto-end-buttons
                ></b-pagination>
            </b-form>
        </div>
        <div class="col-3 text-right border border-primary border-left-0 py-2">
            <b-button class=""
                      :disabled="restoreButtonDisabled"
                      dusk="deleted-pursuit-restore-ok-button"
                      variant="primary"
                      @click="restore"
            >
                <b-spinner
                    v-if="loading"
                    small
                    type="grow"
                >
                </b-spinner>
                {{ restoreButtonText }}
                <b-badge
                    v-if="selectedPursuits.length > 0"
                    variant="outline-primary"
                >{{ selectedPursuits.length }}
                </b-badge>
            </b-button>
            <b-button
                :disabled="loading"
                @click="cancelModal"
                dusk="deleted-pursuit-restore-cancel-button"
            >
                Cancel
            </b-button>
        </div>
    </div>
</template>

Center 1 item in a row, but float other one to the right

That's happening cause both of them are in the same document flow. Using position absolute we can remove it from the document flow. Here I have showed an example:

1. Give your <ngb-pagination> an ID for eg. my-pagination.
2. In your CSS use these properties:

#my-pagination {
                    position: absolute;
                    z-index: 2;
                    left: 50%;
                    right: 50%;
               }

Now no matter what the screen size your pagination is going to be in the center and won't be affected by margins of any other elements.

How to do pagination for bootstrap grid?

I small changed into you existing JS code so its working as you want so you can check blow snippet.

Changed css('display', 'table-row') to css('display', 'flex').

Added e in $('#nav a').bind('click', function(e) method and this line also e.preventDefault(); for prevent the hash(#) show in url.

Note: Please check on FULL Page

$(document).ready(function() {  $('.t1').after('<div id="nav" class="text-center"></div>');  var rowsShown = 3;  var rowsTotal = $('.t1 .row').length;  var numPages = rowsTotal / rowsShown;  for (i = 0; i < numPages; i++) {    var pageNum = i + 1;    $('#nav').append('<a href="#" class="btn-outline-info" rel="' + i + '"> ' + pageNum + ' </a> ');  }  $('.t1 .row').hide();  $('.t1 .row').slice(0, rowsShown).show();  $('#nav a:first').addClass('active');  $('#nav a').bind('click', function(e) {   e.preventDefault();    $('#nav a').removeClass('active');    $(this).addClass('active');    var currPage = $(this).attr('rel');    var startItem = currPage * rowsShown;    var endItem = startItem + rowsShown;    $('.t1 .row').css('opacity', '0').hide().slice(startItem, endItem).    css('display', 'flex').animate({      opacity: 1    }, 300);  });});

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css"><script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<div class="container my-2 t1">  <div class="row">    <div class="col-sm-12 col-md-4">      <div class="card">        <img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">        <div class="card-body">          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>        </div>      </div>    </div>    <div class="col-sm-12 col-md-4">      <div class="card">        <img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">        <div class="card-body">          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>        </div>      </div>    </div>    <div class="col-sm-12 col-md-4">      <div class="card">        <img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">        <div class="card-body">          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>        </div>      </div>    </div>  </div>  <div class="row">    <div class="col-sm-12 col-md-4">      <div class="card">        <img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">        <div class="card-body">          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>        </div>      </div>    </div>    <div class="col-sm-12 col-md-4">      <div class="card">        <img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">        <div class="card-body">          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>        </div>      </div>    </div>    <div class="col-sm-12 col-md-4">      <div class="card">        <img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">        <div class="card-body">          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>        </div>      </div>    </div>  </div>  <div class="row">    <div class="col-sm-12 col-md-4">      <div class="card">        <img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">        <div class="card-body">          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>        </div>      </div>    </div>    <div class="col-sm-12 col-md-4">      <div class="card">        <img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">        <div class="card-body">          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>        </div>      </div>    </div>    <div class="col-sm-12 col-md-4">      <div class="card">        <img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">        <div class="card-body">          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>        </div>      </div>    </div>  </div>  <div class="row">    <div class="col-sm-12 col-md-4">      <div class="card">        <img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">        <div class="card-body">          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>        </div>      </div>    </div>    <div class="col-sm-12 col-md-4">      <div class="card">        <img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">        <div class="card-body">          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>        </div>      </div>    </div>    <div class="col-sm-12 col-md-4">      <div class="card">        <img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">        <div class="card-body">          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>        </div>      </div>    </div>  </div></div>

---

Related Topics