Align Bootstrap pagination on the right

Navigation
1

I'm with a project that was developed in Bootstrap v4.0.0-alpha.4. In this project there is 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 alignment, because when I use it this way: 

<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 does not work ... however if I remove: 

<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">

It works, but shit the whole layout: (

I have already tried to use pull-right and text-right , but it did not work.

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

    
asked by anonymous 30.09.2018 / 00:04

1 answer

1

Apparently it looks like you're using a simpler version of Bootstrap that should have left out some classes of Utilities as Flex classes. link

Or because of some class hierarchy you have some other property of flex replacing yours.

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>
    
30.09.2018 / 15:10
Popular JSON dynamically with PHP / Laravel Batch File to access multiple directories and execute python script in different command prompts