In this article, we will look at the process of creating such a web interface element as a navigation block for pagination. In Bootstrap 3 and 4, this UI element is implemented using the Pagination component.

What is pagination?

Pagination is a pagination of data. Those. this is the conclusion when data is output not all at once, but small parts (pages).

To navigate through these parts (pages), the navigation block is used.

The Pagination component of the Bootstrap framework is just intended to create this interface element, i.e. navigation block.

Creating a navigation block for pagination

In Bootstrap 3, the navigation box has the following structure:

The nav element in this snippet acts as a wrapping container. It is necessary in this structure only for assistive technologies perceived this piece of HTML code as navigation.

In addition, it is desirable for assistive technologies to also clarify what kind of navigation block it is. This action is performed through the aria-label attribute.

The nav block markup for pagination in Bootstrap is done with bulleted list... Each nav link in this block is an a element wrapped in an li and placed in a ul.

The visual design of the nav box in Bootstrap is done using the pagination class, which must be added to the ul.

Navigation block structure in Bootstrap 4:

Note that in Bootstrap 4, you need to add classes to the li and a elements. Li is the page-item class, and a is the page-link. These classes set CSS styles for the elements and are necessary for the correct display of the navigation block.

Using icons or icons instead of text labels

An example of a pagination navigation bar that uses icons as content for some links:

Changing the state of a navigation link

Changing the state of links in the navbar is done using the disabled and active classes. The first class (disabled) is used to create an inactive (non-clickable) link. The second class (active) is needed to highlight (indicate) current page... You need to add the active and disabled classes not to the link itself, but to the li element.

The disabled class sets the CSS links declaration pointer-events: none. This announcement is intended to disable the functionality of the link. But it does not disable keyboard navigation. Therefore, if you want to completely disable the functionality of such links in your project, then using JavaScript, you must additionally track them and add the tabindex \u003d "- 1" attribute to them.

Another way to disable link functionality is do not use element a.

Resizing the navigation box

In Bootstrap 3 and 4, you can resize the navigation box using the pagination-lg and pagination-sm classes. This is accomplished by adding one of these classes to the pagination class.

The first class (pagination-lg) is used when it is necessary to increase the size of the navigation, and the second (pagination-sm) when it is necessary to reduce it.

Aligning the navigation box

In Bootstrap 3, navbar alignment for pagination is done with classes for text alignment.

In Bootstrap 4, navbar alignment for pagination is done using flex classes.

Pager Component (Bootstrap 3)

Pager is a Bootstrap 3 component that is designed to create simple navigation through pages or other site content. This component consists of 2 buttons (links).

One of the most common uses for this navigation is to do it so that the first button navigated to a newer entry on the site, and the second to an older one.

Pager component syntax:

Changing the button layout

By default, pager buttons center aligned... But besides this option, Bootstrap 3 also allows them to be aligned on different edges. This is done by adding the class previous to the first button, and next to the second. The previous class aligns the link to the left, and next to the right.

Disable button functionality

Making a button disabled is done by adding the disabled class to it.

C ollection of free HTML and CSS pagination code examples: responsive, simple, material design, navigation dots, etc. Update of June 2018 collection. 5 new items.

Related Articles

About the code

Responsive pagination / pager in HTML and CSS. Resize your browser to show interesting effect.

Responsive: yes

Dependencies: bootstrap.css

About the code

Line follow pagination

CSS line follow pagination.

Responsive: yes

Dependencies: -

About the code

Pagination buttons

Pure CSS pagination buttons.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Line Pagination with Hover

Pure CSS line pagination with hover effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Pacman pagination

Pagination animation with HTML, CSS and JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Simple CSS.

About the code

Pure CSS Pac-Man pagination with animation on hover.

About the code

Simple responsive pagination.

About the code

HTML and CSS pagination.

About the code

Pagination example that allows you to navigate between different pages. This example would have to have href attributes in order to work with an actual application that requires pagination.

About the code

Pagination with CSS custom properties.

Pagination options and designs.
Made by MojoM
May 25, 2017

Demo GIF: SVG Page Hopper

HTML, CSS and SVG page hopper.
Made by Chris Gannon
May 14, 2017

Demo GIF: Infinite Pagination

Infinite pagination in HTML and CSS.
Made by Mariusz Dabrowski
April 27, 2017

About the code

CSS Components:.

12 ideas for website pagination with HTML and CSS.
Made by rosa
November 3, 2016

Demo GIF: Pagination

Pagination with HTML / CSS / JavaScript.
Made by JP Nothard
October 9, 2016

Demo GIF: Pagination Hover Animation

HTML and CSS pagination hover animation.
Made by Elena Nazarova
September 12, 2016

Pagination with a hover effect.
Made by Andre Wichert
August 27, 2016

Pagination indicators with HTML, CSS and JavaScript.
Made by Moses Holmström
August 19, 2016

Made by Brendan Mullins
August 16, 2016

Responsive Magic Line Pagination

Create a magic line for your pagination. It looks awesome.
Made by Ryan Yu
February 18, 2015

Responsive, accessible, alternate pagination experiment.
Made by Simon Goellner
November 11, 2014

Demo GIF: Pagination Arrows

Flexing pagination arrows.
Made by Hakim El Hattab
October 18, 2013

Sites usually contain several pages. They can contain as many as 3-5 pages, for example, on a landing-page, or maybe more, much more.

Every good site should contain navigation, which will allow the user to navigate and navigate correctly between the pages of the site. You can create such a pagination using JavaScript. In this article, we'll talk about how to create such a navigation.

One more thing, besides the usual JavaScript, the example uses Bootstrap 4. Its bootstrap pagination component is combined with the JQuery library, namely the special Buzina Pagination plugin. It allows you to split all information into several pages with the creation of navigation between them.

Connecting the required frameworks

To work with Bootstrap and JQuery, you need to connect them. This can be done in your HTML document using tags

If you already have jQuery enabled on your site and is working with might and main, you can safely skip all the gestures described above, the main thing is to make sure that the jQuery version is not too dense. In WordPress, by the way, this is fine.
Next, we connect our workhorse plugin jquery.simplePagination.js:

You don't have to fence in the garden, but simply choose the style you want, light, dark or compact, and paste the set of rules into the stylesheet .css file of your template. Write your own styles or use Bootstrap, also an option, in terms of originality and development of site building skills, is even more preferable.

Step 3. HTML

To display the pagination bar on the pages of the site, where you plan to place it, it is more logical and most often, it is at the bottom of the main content, you should write the following:
For a light background:

Compact theme:

$ (function () ($ (# light-pagination) .pagination ((items: 100, itemsOnPage: 10, cssStyle: "light-theme"));));

In the example I used initialization to paginate the light theme # light-pagination, you can change the selector to something else, for a compact one it is # compact-pagination, or for a dark style # dark-pagination. In this case, do not forget to change the class in the function. cssStyle.
Kai I already wrote above, the plugin is very flexible in settings, the following options are available to change:

• items - The total number of elements to be used to calculate the pages. Default: 1 .
• itemsOnPage - The number of items displayed on each page. Default: 1 .
• pages - Optional. If specified, the items and itemsOnPage options are ignored. Sets the number of pages in the list.
• displayedPages - How many page numbers should be visible during navigation. Minimum allowed value: 3 , default: 5 .
• edges - How many page numbers are visible at the beginning and end of the numbering. Default value: 2 .
• currentPage - Which page will be selected immediately after launch. Logically, the default is: 1 .
• hrefTextPrefix - The string used in the HREF attribute is added before the page number. Default: "# page-".
• hrefTextSuffix - The string used in the HREF attribute is inserted after the page number. Empty string by default.
• prevText - Button text to previous page. Default: "Prev".
• nextText - Button text for next page. Default: "Next"
• cssStyle - Determine the CSS style. Default: "Light-theme"
• selectOnClick - Selecting a page after clicking, by default - enabled ( true), why I did not understand why to disable it, but there is such a possibility, value: "false".

We have covered the most basic settings. You can learn about additional functions and available methods of using this plugin by studying the documentation directly on the developer's page.

All I can do is wish you good luck and success in working on your new projects.