How to center Bootstrap Vue pagination under table?

Question

I have a Bootstrap Vue table with a pagination component underneath it. I've currently got it in a separate row in a single column but whilst it looks "fairly" centred, it's actually not centred in the column and there is uneven padding/margin on the right side. Looking like it's from the tag (per image).

How can I horizontally centre the pagination pls?

</b-table>

<b-row align-h="center" align-content="center">
  <b-col cols="3">

    <b-pagination
      v-model="currentPage"
      :total-rows="totalRows"
      :per-page="perPage"
      aria-controls="my-table"
      
    ></b-pagination>

  </b-col>
</b-row>

try adding justify-content: center; to your .pagination class — Xavier B.
– Xavier B., Commented Jan 31, 2022 at 15:34
That worked! Thank you - can you put it as an answer and I will mark as correct for you! Cheers :-) — Johnny John Boy
– Johnny John Boy, Commented Jan 31, 2022 at 16:06

Hiws · Accepted Answer · 2022-01-31 16:21:56Z

1

You could use cols="auto" instead of cols="3", that way the column will automatically size itself after the content, instead a specific width as you have now.

https://bootstrap-vue.org/docs/components/layout#variable-width-content

<b-row align-h="center" align-content="center">
  <b-col cols="auto">
    <b-pagination></b-pagination>
  </b-col>
</b-row>

You could also use Bootstraps Flex Utilities

<div class="d-flex justify-content-center">
  <b-pagination></b-pagination>
</div>

answered Jan 31, 2022 at 16:21

Hiws

10.7k2 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Xavier B. · Accepted Answer · 2022-01-31 16:09:32Z

1

try adding justify-content: center; to your .pagination class

answered Jan 31, 2022 at 16:09

Xavier B.

5433 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to center Bootstrap Vue pagination under table?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related