Класс .pagination в Bootstrap делает именно то, что обещает его название — он выполняет пагинацию.
Пагинация обычно используется для навигации по нескольким страницам в серии. Например, в результатах поиска, которые выдают много страниц, есть пагинация, которая позволяет пользователю перейти на следующую страницу или даже перескочить на несколько страниц вперёд.
Пагинация по умолчанию
Чтобы создать нумерацию страниц по умолчанию, добавьте класс .pagination к элементу <ul>, который содержит список страниц.
Также добавьте .page-item к каждому элементу <li> и .page-link к каждому элементу <a>.
Кроме того, во имя семантического HTML, всё это должно быть заключено в элемент <nav> с атрибутом aria-label, отражающим его назначение.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<nav aria-label="Навигация по страницам">
<ul class="pagination">
<li class="page-item">
<a href="#" class="page-link" aria-label="Предыдущая">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">5</a></li>
<li class="page-item"><a href="#" class="page-link">6</a></li>
<li class="page-item"><a href="#" class="page-link">7</a></li>
<li class="page-item">
<a href="#" class="page-link" aria-label="Следующая">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
Активное состояние текущей страницы
Добавьте класс .active к элементу <li>, который показывает текущую страницу (страницу, на которой в данный момент находится пользователь).
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<nav aria-label="Навигация по страницам">
<ul class="pagination">
<li class="page-item">
<a href="#" class="page-link" aria-label="Предыдущая">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item active"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">5</a></li>
<li class="page-item"><a href="#" class="page-link">6</a></li>
<li class="page-item"><a href="#" class="page-link">7</a></li>
<li class="page-item">
<a href="#" class="page-link" aria-label="Следующая">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
Отключение пункта
Добавьте класс .disabled в элемент <li>, чтобы отключить данный пункт.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<nav aria-label="Навигация по страницам">
<ul class="pagination">
<li class="page-item">
<a href="#" class="page-link" aria-label="Предыдущая">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item disabled"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">5</a></li>
<li class="page-item"><a href="#" class="page-link">6</a></li>
<li class="page-item"><a href="#" class="page-link">7</a></li>
<li class="page-item">
<a href="#" class="page-link" aria-label="Следующая">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
Размер пагинации
Добавьте .pagination-lg или .pagination-sm к элементу <ul>, чтобы увеличить или уменьшить размер элементов управления нумерацией страниц.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<nav aria-label="Навигация по страницам">
<ul class="pagination pagination-lg">
<li class="page-item">
<a href="#" class="page-link" aria-label="Предыдущая">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">5</a></li>
<li class="page-item"><a href="#" class="page-link">6</a></li>
<li class="page-item"><a href="#" class="page-link">7</a></li>
<li class="page-item">
<a href="#" class="page-link" aria-label="Следующая">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<nav aria-label="Навигация по страницам">
<ul class="pagination">
<li class="page-item">
<a href="#" class="page-link" aria-label="Предыдущая">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">5</a></li>
<li class="page-item"><a href="#" class="page-link">6</a></li>
<li class="page-item"><a href="#" class="page-link">7</a></li>
<li class="page-item">
<a href="#" class="page-link" aria-label="Следующая">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<nav aria-label="Навигация по страницамn">
<ul class="pagination pagination-sm">
<li class="page-item">
<a href="#" class="page-link" aria-label="Предыдущая">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">5</a></li>
<li class="page-item"><a href="#" class="page-link">6</a></li>
<li class="page-item"><a href="#" class="page-link">7</a></li>
<li class="page-item">
<a href="#" class="page-link" aria-label="Следующая">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>