Align Bootstrap paging on the right

Asked

Viewed 238 times

1

I am with a project that was developed in the version Bootstrap v4.0.0-alpha.4. In this project has a pagination that follows the standards of the framework. 

<nav aria-label="Navegação de página exemplo">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Anterior</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="#">Próximo</a></li>
  </ul>
</nav>

The problem is in the alignment, because when I use the so:

<nav aria-label="Navegação de página exemplo">
  <ul class="pagination justify-content-end">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Anterior</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="#">Próximo</a>
    </li>
  </ul>
</nav>

It doesn’t work... but if I withdraw:

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

And put:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

Works, but shits the whole layout :(

I’ve tried using the pull-right and the text-right, but it didn’t help.

Unfortunately it is the maintenance of a ready project and with this I cannot change the current structure. How can I align the pagination to the right side without impacting the layout?

twitter-bootstrap bootstrap-4
  • 1

    You already tried to put it in the hand .pagination {&#xA; justify-content: flex-end !important;&#xA; } Bootstrap has a strong hierarchy of classes and sometimes it is necessary to use the important

  • Hugo ball show. I implemented in your code display: flex; and it worked. Thank you!

  • 1

    Cool Fox.11 I’m glad it worked out! I left the most complete answer if you want to accept it and not leave your question open as Unanswered and we have already reached a solution. :)

1 answer

1


Apparently it seems that you are using a simpler version of Bootstrap that must have left out some classes of Utilities as the classes of Flex. https://getbootstrap.com/docs/4.1/utilities/flex/

Or because some class hierarchy has some other property of flex replacing her.

Anyway you can use this CSS below that will solve your problem:

.pagination {
    justify-content: flex-end !important;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<nav aria-label="Navegação de página exemplo">
    <ul class="pagination">
        <li class="page-item disabled">
        <a class="page-link" href="#" tabindex="-1">Anterior</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="#">Próximo</a>
        </li>
    </ul>
</nav>

  • Perfect Hugo. Thank you ;)

  • 1

    Thanks @Fox.11 tmj!

Browser other questions tagged twitter-bootstrap bootstrap-4

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