brandbrandv1.0
Utilities
Data Display
Data Entry
Feedback
Tables
Charts
Maps
Navigation
BEHAVIORAL
Layout
Explore Our Templates 🚀
New
Powerful Svelte-Bootstrap SaaS App Template
Powerful Svelte-Bootstrap SaaS App Template
Admin CRM Application Template
Admin CRM Application Template
Robust Next.js SaaS App Template
Robust Next.js SaaS App Template
Powerful React-Bootstrap SaaS App Template
Powerful React-Bootstrap SaaS App Template
Modern Remix SaaS App Template
Modern Remix SaaS App Template
VueJS-Bootstrap SaaS App Template
VueJS-Bootstrap SaaS App Template
Intuitive Nuxt-Bootstrap SaaS App Template
Intuitive Nuxt-Bootstrap SaaS App Template

Pagination

Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.

Basic example

d-inline-block Use default Bootstrap markup to display Pagination elements. See the Bootstrap documentation to change alignments & sizes.

Preview
Next
HTML
React
Remix
Vue
Nuxt
Svelte
<nav class="pagination-wrap d-inline-block" aria-label="Page navigation example">
	<ul class="pagination">
		<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 active"><a class="page-link" href="#">3</a></li>
		<li class="page-item"><a class="page-link" href="#">Next</a></li>
	</ul>
</nav>
<nav class="pagination-wrap d-inline-block" aria-label="...">
	<ul class="pagination">
		<li class="page-item disabled">
			<span class="page-link">Previous</span>
		</li>
		<li class="page-item"><a class="page-link" href="#">1</a></li>
		<li class="page-item active">
			<span class="page-link">
		2
		<span class="sr-only">(current)</span>
			</span>
		</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>
<nav class="pagination-wrap d-inline-block" aria-label="Page navigation example">
	<ul class="pagination">
		<li class="page-item">
			<a class="page-link" href="#" aria-label="Previous">
				<span aria-hidden="true">&laquo;</span>
				<span class="sr-only">Previous</span>
			</a>
		</li>
		<li class="page-item active"><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="#" aria-label="Next">
				<span aria-hidden="true">&raquo;</span>
				<span class="sr-only">Next</span>
			</a>
		</li>
	</ul>
</nav>
<template>
    <nav class="pagination-wrap d-inline-block" aria-label="Page navigation example">
        <ul class="pagination">
            <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 active"><a class="page-link" href="#">3</a></li>
            <li class="page-item"><a class="page-link" href="#">Next</a></li>
        </ul>
    </nav>
    <nav class="pagination-wrap d-inline-block" aria-label="...">
        <ul class="pagination">
            <li class="page-item disabled">
                <span class="page-link">Previous</span>
            </li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item active">
                <span class="page-link">
            2
            <span class="sr-only">(current)</span>
                </span>
            </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>
    <nav class="pagination-wrap d-inline-block" aria-label="Page navigation example">
        <ul class="pagination">
            <li class="page-item">
                <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                    <span class="sr-only">Previous</span>
                </a>
            </li>
            <li class="page-item active"><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="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                    <span class="sr-only">Next</span>
                </a>
            </li>
        </ul>
    </nav>
</template>
<template>
  <div>
    <!-- First Pagination -->
    <nav class="pagination-wrap d-inline-block" aria-label="Page navigation example">
      <BPagination v-model="page1" :total-rows="totalRows" :per-page="perPage" align="center">
        <template #prev-text>Previous</template>
        <template #page="{ page, active }">
          <span v-if="active" class="page-link">{{ page }}</span>
          <a v-else class="page-link" href="#">{{ page }}</a>
        </template>
        <template #next-text>Next</template>
      </BPagination>
    </nav>
    <!-- Second Pagination with Disabled Previous -->
    <nav class="pagination-wrap d-inline-block" aria-label="Page navigation example">
      <BPagination
        v-model="page2"
        :total-rows="totalRows"
        :per-page="perPage"
        :disabled="disabledPrev"
        align="center"
      >
        <template #prev-text>
          <span v-if="disabledPrev" class="page-link">Previous</span>
          <a v-else class="page-link" href="#">Previous</a>
        </template>
        <template #page="{ page, active }">
          <span v-if="active" class="page-link">
            {{ page }}
            <span class="sr-only">(current)</span>
          </span>
          <a v-else class="page-link" href="#">{{ page }}</a>
        </template>
        <template #next-text>Next</template>
      </BPagination>
    </nav>
    <!-- Third Pagination with Icons -->
    <nav class="pagination-wrap d-inline-block" aria-label="Page navigation example">
      <BPagination v-model="page3" :total-rows="totalRows" :per-page="perPage" align="center">
        <template #prev-text>
          <span aria-hidden="true">&laquo;</span>
          <span class="sr-only">Previous</span>
        </template>
        <template #page="{ page, active }">
          <span v-if="active" class="page-link">{{ page }}</span>
          <a v-else class="page-link" href="#">{{ page }}</a>
        </template>
        <template #next-text>
          <span aria-hidden="true">&raquo;</span>
          <span class="sr-only">Next</span>
        </template>
      </BPagination>
    </nav>
  </div>
</template>
<script setup lang="ts">
import { BPagination } from 'bootstrap-vue-next'
import { ref } from 'vue'
// State for pagination
const page1 = ref(3) // Active page for first pagination
const page2 = ref(2) // Active page for second pagination
const page3 = ref(1) // Active page for third pagination
const totalRows = ref(30) // Total rows for pagination (arbitrary for demo)
const perPage = ref(10) // Rows per page
const disabledPrev = ref(true) // Disable Previous button for second pagination
</script>
<nav class="pagination-wrap d-inline-block" aria-label="Page navigation example">
	<ul class="pagination">
		<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 active"><a class="page-link" href="#">3</a></li>
		<li class="page-item"><a class="page-link" href="#">Next</a></li>
	</ul>
</nav>
<nav class="pagination-wrap d-inline-block" aria-label="...">
	<ul class="pagination">
		<li class="page-item disabled">
			<span class="page-link">Previous</span>
		</li>
		<li class="page-item"><a class="page-link" href="#">1</a></li>
		<li class="page-item active">
			<span class="page-link">
		2
		<span class="sr-only">(current)</span>
			</span>
		</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>
<nav class="pagination-wrap d-inline-block" aria-label="Page navigation example">
	<ul class="pagination">
		<li class="page-item">
			<a class="page-link" href="#" aria-label="Previous">
				<span aria-hidden="true">&laquo;</span>
				<span class="sr-only">Previous</span>
			</a>
		</li>
		<li class="page-item active"><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="#" aria-label="Next">
				<span aria-hidden="true">&raquo;</span>
				<span class="sr-only">Next</span>
			</a>
		</li>
	</ul>
</nav>
Custom pagination

Create fancy pagination using .custom-pagination modifier class.

Preview
Next
HTML
React
Remix
Vue
Nuxt
Svelte
<nav class="pagination-wrap d-inline-block" aria-label="Page navigation example">
	<ul class="pagination custom-pagination">
		<li class="page-item"><a class="page-link" href="#">Previous</a></li>
		<li class="page-item active"><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="#">...</a></li>
		<li class="page-item"><a class="page-link" href="#">15</a></li>
		<li class="page-item"><a class="page-link" href="#">Next</a></li>
	</ul>
</nav>
<template>
    <nav class="pagination-wrap d-inline-block" aria-label="Page navigation example">
        <ul class="pagination custom-pagination">
            <li class="page-item"><a class="page-link" href="#">Previous</a></li>
            <li class="page-item active"><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="#">...</a></li>
            <li class="page-item"><a class="page-link" href="#">15</a></li>
            <li class="page-item"><a class="page-link" href="#">Next</a></li>
        </ul>
    </nav>
</template>
<template>
  <div>
    <nav class="pagination-wrap d-inline-block" aria-label="Page navigation example">
      <BPagination
        v-model="currentPage"
        :total-rows="totalRows"
        :per-page="perPage"
        :limit="limit"
        align="center"
        ellipsis-text="..."
        ellipsis-class="page-link"
        class="custom-pagination"
      >
        <template #prev-text>Previous</template>
        <template #page="{ page, active }">
          <span v-if="active" class="page-link">{{ page }}</span>
          <a v-else class="page-link" href="#">{{ page }}</a>
        </template>
        <template #next-text>Next</template>
      </BPagination>
    </nav>
  </div>
</template>
<script setup lang="ts">
import { BPagination } from 'bootstrap-vue-next'
import { ref } from 'vue'
// State for pagination
const currentPage = ref(1) // Active page
const totalRows = ref(150) // Total rows for 15 pages (15 pages * 10 rows per page)
const perPage = ref(10) // Rows per page
const limit = ref(5) // Maximum number of page buttons to show (3 pages + ellipsis + last page)
</script>
<nav class="pagination-wrap d-inline-block" aria-label="Page navigation example">
	<ul class="pagination custom-pagination">
		<li class="page-item"><a class="page-link" href="#">Previous</a></li>
		<li class="page-item active"><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="#">...</a></li>
		<li class="page-item"><a class="page-link" href="#">15</a></li>
		<li class="page-item"><a class="page-link" href="#">Next</a></li>
	</ul>
</nav>
Rounded pagination

Use the .pagination-rounded modifier class to make custom pagination more rounded.

Preview
Next
HTML
React
Remix
Vue
Nuxt
Svelte
<nav class="pagination-wrap d-inline-block" aria-label="Page navigation example">
	<ul class="pagination custom-pagination pagination-rounded">
		<li class="page-item"><a class="page-link" href="#">Previous</a></li>
		<li class="page-item active"><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="#">...</a></li>
		<li class="page-item"><a class="page-link" href="#">15</a></li>
		<li class="page-item"><a class="page-link" href="#">Next</a></li>
	</ul>
</nav>
<template>
    <nav class="pagination-wrap d-inline-block" aria-label="Page navigation example">
        <ul class="pagination custom-pagination pagination-rounded">
            <li class="page-item"><a class="page-link" href="#">Previous</a></li>
            <li class="page-item active"><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="#">...</a></li>
            <li class="page-item"><a class="page-link" href="#">15</a></li>
            <li class="page-item"><a class="page-link" href="#">Next</a></li>
        </ul>
    </nav>
</template>
<template>
  <div>
    <nav class="pagination-wrap d-inline-block" aria-label="Page navigation example">
      <BPagination
        v-model="currentPage"
        :total-rows="totalRows"
        :per-page="perPage"
        :limit="limit"
        align="center"
        ellipsis-text="..."
        ellipsis-class="page-link"
        class="custom-pagination pagination-rounded"
      >
        <template #prev-text>Previous</template>
        <template #page="{ page, active }">
          <span v-if="active" class="page-link">{{ page }}</span>
          <a v-else class="page-link" href="#">{{ page }}</a>
        </template>
        <template #next-text>Next</template>
      </BPagination>
    </nav>
  </div>
</template>
<script setup lang="ts">
import { BPagination } from 'bootstrap-vue-next'
import { ref } from 'vue'
// State for pagination
const currentPage = ref(1) // Active page
const totalRows = ref(150) // Total rows for 15 pages (15 pages * 10 rows per page)
const perPage = ref(10) // Rows per page
const limit = ref(5) // Maximum number of page buttons to show (3 pages + ellipsis + last page)
</script>
<nav class="pagination-wrap d-inline-block" aria-label="Page navigation example">
	<ul class="pagination custom-pagination pagination-rounded">
		<li class="page-item"><a class="page-link" href="#">Previous</a></li>
		<li class="page-item active"><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="#">...</a></li>
		<li class="page-item"><a class="page-link" href="#">15</a></li>
		<li class="page-item"><a class="page-link" href="#">Next</a></li>
	</ul>
</nav>
Filled pagination

Use the .pagination-filled modifier class to make filled pagination.

Preview
Next
HTML
React
Remix
Vue
Nuxt
Svelte
<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>
<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>
<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>
<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>
Simple pagination

Fancy minimal simple style pagination? Create using .pagination-simple modifier class.

Preview
Next
HTML
React
Remix
Vue
Nuxt
Svelte
<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>
<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>
<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>
<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>
Working with icons

Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with aria attributes and the .sr-only utility.

Preview
Next
HTML
React
Remix
Vue
Nuxt
Svelte
<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>
<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>
<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>
<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>
Alignment

Use justify-content utility classes to align pagination - center, right & full justified.

Preview
Next
HTML
React
Remix
Vue
Nuxt
Svelte
<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>
<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>
<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>
<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>
Pagination sm

Use default Bootstrap markup to display Pagination elements. See the Bootstrap documentation to change alignments & sizes.

Preview
Next
HTML
React
Remix
Vue
Nuxt
Svelte
<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>
<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>
<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>
<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>
Jump to