[Vuejs]-How to center a pagination bar created with vue?

by

2👍

✅

Using flexbox, add this style to your ‘.pagination‘ class:

.pagination {
  display: flex;
  justify-content: center;
}
👤Sackey

1👍

<!doctype html>
<html lang="en">
<head>
    <title>vue-plain-pagination</title>
    <link href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' rel="stylesheet">
</head>
<body>

<div id="app" class="container my-4">
    <div class="row text-center">
      <div class="col">
        <h1 class="mb-4">vue-plain-pagination</h1>
        <p class="text-success">Current page: <strong>{{ currentPage }}</strong></p>

        <nav class="mb-4 d-flex justify-content-center">
          <v-pagination
                        v-model="currentPage"
                        :page-count="totalPageCount"
                        :classes="bootstrapPaginationClasses"
                        :labels="customLabels"
                        ></v-pagination>
        </nav>

        <nav class="mb-4 d-flex justify-content-center">
          <v-pagination
                        v-model="currentPage"
                        :page-count="totalPageCount"
                        :classes="bootstrapPaginationClasses"
                        ></v-pagination>
        </nav>

        <nav class="mb-4 d-flex justify-content-center">
          <v-pagination
                        v-model="currentPage"
                        :page-count="totalPageCount"
                        :classes="bootstrapPaginationClasses"
                        :labels="{first: false, prev: false, next: false, last: false}"
                        ></v-pagination>
        </nav>
      </div>
    </div>
</div>

<script src='https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js'></script>
<script src='https://unpkg.com/vue-plain-pagination@0.2.1/dist/vue-plain-pagination.umd.min.js'></script>
<script>
    new Vue({
        components: {
        vPagination: window['vue-plain-pagination']
        },
        data: {
        currentPage: 5,
        totalPageCount: 9,
        bootstrapPaginationClasses: { // http://getbootstrap.com/docs/4.1/components/pagination/
          ul: 'pagination',
          li: 'page-item',
          liActive: 'active',
          liDisable: 'disabled',
          button: 'page-link'
        },
        customLabels: {
          first: false,
          prev: 'Previous',
          next: 'Next',
          last: false
        }
        }
    }).$mount('#app')
</script>


</body>
</html>

Wrap your main div within .container > .row > .col

  • Containers provide a means to center and horizontally pad your site’s
    contents. Use .container for a responsive pixel width or
    .container-fluid for width: 100% across all viewport and device
    sizes.
  • Rows are wrappers for columns. Each column has horizontal padding
    (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
  • In a grid layout, content must be placed within columns and only
    columns may be immediate children of rows.

Bootstrap has also some builtin classes to make the div centered horizontally and vertically. I have used .d-flex .justify-content-center to the div that I wanted to be centered aligned. Also, I have used .text-center on row to center the texts.

hope it’ll help

-Flex https://getbootstrap.com/docs/4.3/utilities/flex/

👤nazifa rashid

Leave a comment