Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap alignment of button and pagination

I am using Twitter Bootstrap 3 to build my new website. I want to place a button on the left side and a pagination on the right side.

<button type="button" class="btn btn-default pull-left">Default</button>

<ul class="pagination pull-right">
    <li><a href="#">&laquo;</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="#">&raquo;</a></li>
 </ul>

My problem is that I am unable to align the both elements properly:

http://bootply.com/91723

The pagination has a small offset.

What can i do to remove that offset?

like image 689
Marcello90 Avatar asked Nov 04 '13 13:11

Marcello90


People also ask

Which class is used to align pagination right?

Aligning pagination using Bootstrap Classes: The pagination can be aligned on the web page using the flexbox-utilities classes in Bootstrap.

How do I center my bootstrap 4 pagination?

“pagination align center in bootstrap 4” Code AnswerUse the class . justify-content-center on the . pagination ul.

How do I disable next button in pagination?

Check if the current page is less than or equal to 1. If then add a disabled class to the anchor tag. And by using CSS you can disable an anchor tag.


4 Answers

Wrap a semantic descriptive class around your button and pagination, such as .navigation-bar and use this to target the margin on the .pagination:

.navigation-bar .pagination {
      margin-top: 0;
    }

http://bootply.com/91736

You should never override a framework class directly, as it would apply across your entire code base. The alternative is to simply extend the .pagination class:

<ul class="pagination no-margin pull-right"> 
like image 193
Matthew Trow Avatar answered Oct 31 '22 17:10

Matthew Trow


Try adding ths:-

.pagination {
margin: 0px !important;
}
like image 24
Sujata Chanda Avatar answered Oct 31 '22 17:10

Sujata Chanda


I would go for:

<div class="btn-toolbar" role="toolbar" style="margin: 0;">
      <div class="btn-group">
        <button type="button" class="btn btn-default">1</button>
        <button type="button" class="btn btn-default">2</button>
      </div>

      <div class="btn-group pull-right">
                <ul class="pagination" style="margin: 0;">
                <li><a href="#">«</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="#">»</a></li>
            </ul>
      </div>
    </div>

http://www.bootply.com/116457

if you replace the <ul><li.... with buttons , you not need to use style="margin: 0;

Example here: http://getbootstrap.com/components/#btn-groups-toolbar

like image 44
HenryW Avatar answered Oct 31 '22 19:10

HenryW


Put the below styling in the ul element:

<ul style="margin-top:0;" class="pagination pull-right">
like image 37
Ricky Stam Avatar answered Oct 31 '22 18:10

Ricky Stam