Centralize paging in Bootstrap v2.1.0

Asked

Viewed 3,063 times

2

I need to centralize a result pagination using Bootstrap v2.1.0, I tried to put text-align in div but also failed. That’s the code I’m using:

<div class="row-fluid">
    <div id="div_paginacao" class="span12">
        <ul class='pagination pagination-centered'><li><!-- páginas --></li></ul>
    </div>
</div>

I have also tried to put other spans above and below the div "div_paginacao" but also did not give. Actually I did, but when resizing the page, the spacing doesn’t decrease.

twitter-bootstrap

4 answers

2

From version 2.3.0, it is already possible to use the class text-center.

If it doesn’t work, use the text-align css as in the example

  • I tried with text-align but it didn’t work either

  • bootstrap’s own text-center didn’t work ? post your css code to jsfiddle for analysis

  • So buddy, I put the wrong version, I’m actually using the 2.1.0, so I can’t put the text-center class

  • I had put it as solved, but I realized it was wrong when the pagination arrives at a certain number due to the size of the div. Has how to align a div with min-widht?

  • min-width is for when you want a fixed minimum width, depending can even help in alignment, but that’s not what it’s for

2

Problem solved. The div was like this:

<div id="div_paginacao" class="span12" style="width: 400px; margin: 0 auto; float: none;"></div>

  • As I understand it, you don’t want to centralize texts but Ivs, right ? In this case it wouldn’t be better to use the . container accompanied by . span-**-offset ?

  • I’ll try to use your alternative friend, until it didn’t work out with I put up

  • So buddy, even centralize the div using the container, span and offset, but the problem is that if I resize the window, the div does not follow?

  • put your entire page in jsfiddle with css, probably your page structure is wrong and this conflicting.

  • So friend, the problem is that even if I post the whole page, you won’t be able to see the pagination because it depends on other tools here in the system understand?

  • Ctrl+U and copy the source code

Show 1 more comment

1

Do so :

//div who has the panel.

<div class="span7 center"> box </div>

//and use this . css below to center.

.center {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

0

I don’t remember, but in case Bootstrap 2.1.0 doesn’t have the class .pagination-centered just create it. See the example:

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

<div class="pagination pagination-centered">
    <ul id="paginator_pages">
        <li class="disabled" id="paginator_previous"><a href="javascript:void(0)">«</a></li>
        <li class="active"><a href="javascript:void(0)" data-toogle="tab">1</a></li>
        <li><a href="javascript:void(0)" data-toogle="tab">2</a></li>
        <li><a href="javascript:void(0)" data-toogle="tab">3</a></li><li class="" id="paginator-next"><a href="javascript:void(0)">»</a></li></ul>
</div>

Browser other questions tagged twitter-bootstrap

You are not signed in. Login or sign up in order to post.