Skip to main content
adicionou 16 caracteres ao conteúdo
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

Cara tem umas coisas estranhas ai, vc parece que está usando Bootstrap, e colocando tudo dentro de um Card, mas nem vou entrar nesse assunto, pq não importa muito pro resultado final...

Repare que vc deve ter uma div com classe row, ela já é um container flex por definição do Bootstrap. Então basta adicionar nessa row a classe justify-content-end para alinha o que estiver dentro a direita. O button deve estar fora do componente de paginação e seu resultado será como abaixo

inserir a descrição da imagem aqui

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

<div class="container">
    <div class="row justify-content-end">
        <nav class="mr-auto" aria-label="Page navigation example">
            <ul class="pagination mb-0">
                <li class="page-item"><a class="page-link" href="#">Previous</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="#">Next</a></li>
            </ul>
        </nav>
        <button type="button" class="btn btn-primary btn-sm ml-2">Primary</button>
    </div>
</div>

Documentação da paginação do Bootstrap https://getbootstrap.com/docs/4.0/components/pagination/

Cara tem umas coisas estranhas ai, vc parece que está usando Bootstrap, e colocando tudo dentro de um Card, mas nem vou entrar nesse assunto, pq não importa muito pro resultado final...

Repare que vc deve ter uma div com classe row, ela já é um container flex por definição do Bootstrap. Então basta adicionar nessa row a classe justify-content-end para alinha o que estiver dentro a direita. O button deve estar fora do componente de paginação e seu resultado será como abaixo

inserir a descrição da imagem aqui

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

<div class="container">
    <div class="row justify-content-end">
        <nav aria-label="Page navigation example">
            <ul class="pagination mb-0">
                <li class="page-item"><a class="page-link" href="#">Previous</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="#">Next</a></li>
            </ul>
        </nav>
        <button type="button" class="btn btn-primary btn-sm ml-2">Primary</button>
    </div>
</div>

Documentação da paginação do Bootstrap https://getbootstrap.com/docs/4.0/components/pagination/

Cara tem umas coisas estranhas ai, vc parece que está usando Bootstrap, e colocando tudo dentro de um Card, mas nem vou entrar nesse assunto, pq não importa muito pro resultado final...

Repare que vc deve ter uma div com classe row, ela já é um container flex por definição do Bootstrap. Então basta adicionar nessa row a classe justify-content-end para alinha o que estiver dentro a direita. O button deve estar fora do componente de paginação e seu resultado será como abaixo

inserir a descrição da imagem aqui

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

<div class="container">
    <div class="row justify-content-end">
        <nav class="mr-auto" aria-label="Page navigation example">
            <ul class="pagination mb-0">
                <li class="page-item"><a class="page-link" href="#">Previous</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="#">Next</a></li>
            </ul>
        </nav>
        <button type="button" class="btn btn-primary btn-sm ml-2">Primary</button>
    </div>
</div>

Documentação da paginação do Bootstrap https://getbootstrap.com/docs/4.0/components/pagination/

Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

Cara tem umas coisas estranhas ai, vc parece que está usando Bootstrap, e colocando tudo dentro de um Card, mas nem vou entrar nesse assunto, pq não importa muito pro resultado final...

Repare que vc deve ter uma div com classe row, ela já é um container flex por definição do Bootstrap. Então basta adicionar nessa row a classe justify-content-end para alinha o que estiver dentro a direita. O button deve estar fora do componente de paginação e seu resultado será como abaixo

inserir a descrição da imagem aqui

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

<div class="container">
    <div class="row justify-content-end">
        <nav aria-label="Page navigation example">
            <ul class="pagination mb-0">
                <li class="page-item"><a class="page-link" href="#">Previous</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="#">Next</a></li>
            </ul>
        </nav>
        <button type="button" class="btn btn-primary btn-sm ml-2">Primary</button>
    </div>
</div>

Documentação da paginação do Bootstrap https://getbootstrap.com/docs/4.0/components/pagination/