How to center Bootstrap Vue pagination under table?-CodePudding

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>

CodePudding user response：

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 >
  <b-pagination></b-pagination>
</div>

CodePudding user response：

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