Bootstrap 4 tutorial

Components (11): Pagination / Popovers / Progress



Working with icons

Example: using Unicode symbol characters

Using icons is the same way: example using Open Iconic (see source for detail)

Disabled and active states

Pagination items should be disabled or activated with various situations. The most common conditions are as follows.

Setting disabled states

Add .page-item to li . Its descendant link a is disabled automatically.

Example: on showing page 1 (Previous and 1 are disabled)

Setting an active state

Setting .active to li.list-item displays an item as active state (displayed as primary context). But it does not disable an inner link. Furthermore, it cannot be used with .disabled ( does not work).

This problem can be resolved by changing inner elements from a to span for all disabled items.


Add .pagination-(lg|sm) to ul.pagenation


.ul.pagination (default)



Use .justify-content-* (see Flex utilities - Arrangement with .justify-content-* )





Popover is a popup component like those found in iOS. It utilizes Popper.js for implementation.


Popovers are inactivated as defaut. JavaScript is required to activate them. Below is a simple code to activate all popovers.


How to use it

Example (Click to show, click again to hide)



Dismiss on next click

As default, a popover shows on click and hides on the next click on the same element. This specification enables showing multiple popovers at the same time (can be demonstrated by the Directions example above).

However, it is possible to dismiss a popover by clicking another element (more precisely, showing/hiding by focus events) with the following settings.


Dismissible popover

Using popovers for disabled elements

If the attribute disabled is set to the element, it also disables a popover (example below).

Example (does not popover on click)

To enable a popover for a disabled element, add a wrapping parent and set popover to it.

Example (the button is disabled but popovers on click by the parent)


The progress component is a Bootstrap alternative of progress elements. It has extra features as multiple indicator bars, animated stripes and so on.

Basic structure


(1) Set style="width: {width}%”

style="width: 0%;"

style="width: 25%;"

style="width: 50%;"

style="width: 75%;"

style="width: 100%;"

(2) Set .w-(25|75|100) (see Sizing , 25% steps)






Set inner text of div.progress-bar



Set style (e.g. style="height: 10px;" ) to div.progress

style="height: 5px;"

style="height: 10px;"

style="height: 15px;"

style="height: 20px;"

Indicator colors

Add .bg-{context} to div.progress-bar (see Colors - Background ).





Multiple indicators

Use mutiple div.progress-bar's you need (stacked from left to right).

Striped bars

Add .progress-bar-striped to bars.

Animated stripes

Add .progress-bar-animated .

Example: div.progress-bar.progress-bar-striped.progress-bar-animated