Pagination

Overview

• Wrapping parent (for accessibility) nav Attribute
  • Accessibility attribute aria-label="Pagination example"
  • Pagination ul.pagination
    • Item(s) li.page-item
      • Link a Attribute
        • Attribute href="..."
        • Text Previous , 1 , 2 , ... , Next

Working with icons

Example: using Unicode symbol characters

• First item li.page-item
  • Text «
  • For accessibility span Attribute
    • Attribute area-hidden="true"
    • Text Previous
• Last item li.page-item
  • Text »
  • For accessibility span Attribute
    • Attribute area-hidden="true"
    • Text Next

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.

• The current page item is displayed as active, but its link is disabled.
• On showing the first page, Previous item is disabled for display(grayed) and link
• On showing the last page, Next item is disabled for display(grayed) and link

Setting disabled states

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

• li.page-item
  • Set class .disabled to disabled items
  • Link a
    • Set attribute tabindex="-1" to disabled links (to remove from tabstops)
    • Text (e.g. Previous ) (displays grayed automatically)
    • For accessiblity, use span.sr-only to the current item
      • Text (current)

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 (li.page-item.active.disabled does not work).

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

• Active or disabled items li.page-item.(active|disabled)
  • span.page-link (from a.page-link )

Sizing

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

.ul.pagination.pagination-lg

.ul.pagination (default)

.ul.pagination.pagination-sm

Alignment

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

ul-pagination.justify-content-start

ul-pagination.justify-content-center

ul-pagination.justify-content-end

Popovers

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

Initialization

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

$('[data-toggle="popover"]').popover();

How to use it

• Available for any elements with setting following attributes
• data-toggle="popover"
• title="{title-text}"
• data-content="{content-text}"
• One of title or data-content is required. It does not show if both values are empty.

Example (Click to show, click again to hide)

Click to toggle popover

Directions

• Add an following attribute ( "right" as default)
  • data-placement=("top"|"right"|"bottom"|"left")

Example

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.

• Always use a for the target element (some browsers may not work with button )
• Set attribute data-trigger="focus"
• Set attribute tabindex="0"

Example

Dismissible popover

Using popovers for disabled elements

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

• button.btn.btn-primary Attributes
  • Attribute type="button"
  • Attribute data-toggle="popover"
  • Attribute title="Disabled popover"
  • Attribute disabled (also disables a popover)
  • Text Disabled button

Example (does not popover on click)

Disabled button

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

• Wrapping parent span Attributes
  • Utility class .d-inline-block (set to the same display setting as button )
  • Attribute data-toggle="popover"
  • Attribute title="Disabled popover"
  • Target element button.btn.btn-primary Attributes
    • Attribute type="button"
    • Attribute style="pointer-events: none;" (to prevent receiving pointer events)
    • Attribute disabled
    • Text Disabled button

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

Disabled button

Progress

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

• Progress bar (base) div.progress
  • Indicator bar(s) div.progress-bar (stacked from left to right) Attributes
    • Width (required) (e.g.) style="width: 50%"
    • Accessibility attribute role="progressbar"
    • Accessibility attribute aria-valuenow="50"
    • Accessibility attribute aria-valuemin="0"
    • Accessibility attribute aria-valuemax="100"

Width

(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)

.w-25

.w-50

.w-75

.w-100

Labels

Set inner text of div.progress-bar

Height

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 ).

.bg-success

.bg-info

.bg-warning

.bg-danger

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