Bootstrap 4 pagination indicates a series of related content exists across multiple web pages.
To create bootstrap 4 pagination follow the following steps.
.pagination
to the pagination container base class. .page-item
to the every page item or child element of parent container.
Remember:In the above example .pagination
is assigned to pagination parent container while .page-item
to the every child element of container having class .pagination
.
Pagination specifies the existence of a series of related content across multiple pages and it creates navigation between pages inside a web project.
To disable any page item, you have to add .disabled
class to any page item base class While to make any page item to active, you have to add .active
to any page item base class.
Remember:In the above example .active
is assigned to the page item base class to make page item active while .disabled
to make page item disabled.
To control the pagination size, follow the following steps.
.pagination-sm
class to the pagination container base class having .pagination
.
.pagination-lg
class to the pagination container base class having .pagination
.
Remember:In the above example .pagination-sm
is assigned to the pagination container base class to make smaller page item while .pagination-lg
to make larger pagination item.
To change pagination alignment, you have to add the flexbox utility class to the pagination parent container base class.
Pagination is aligned left by default.Therefore to align it in the center of the web page, assign .justify-content-center
to the pagination container base class having .pagination
class.
Remember:In the above example .justify-content-center
is assigned to the pagination container base class so that the pagination item aligned in the center of the web page.
Since pagination is aligned by default left direction of the web page.To align it in the right side of the web page,assign .justify-content-end
to the pagination container base class having .pagination
.
Remember:In the above example .justify-content-end is assigned to the pagination container base class so that the pagination item aligned in the right side of the web page.