Bootstrap - Navigation Elements: Breadcrumbs and Pagination

Breadcrumbs and pagination provide additional navigation help on large sites or multi-page documents. List groups can also be used to implement navigation devices.

Listing 12.12 - Bootstrap Breadcrumbs

Breadcrumbs show a "trail" of links that the user has followed to get to the current page of the site. This is an example of the styling for breadcrumbs:


Pagination gives links to multiple pages of content within the site.

Listing 12.13 - Standard Bootstrap Pagination

Listing 12.14 - Pager List with Links to the Side


Listing 12.15 - A List Group with Badges

  • Taraxacum albidum 14
  • Taraxacum aphrogenes 3
  • Taraxacum brevicorniculatum 5
  • Taraxacum californicum 27
  • Taraxacum centrasiaticum 0

Listing 12.16 - A Group of Links as a List Group

You can create a navigation menu by turning a group of links into a list group. The <ul> or <li> tags are not needed, but helpful for accessibility. Listing 12.16 shows how to turn a group of links into a navigation list group.


Listing 12.17 - A Fancy List Group

The book example of a fancy list groupd that describes dandelion species. This is depicting a type of photo gallery. (Note that it is not fully implemented, only shown as an example for the styling.)


(End of examples of Navigation element styles, Breadcrumbs, Pagination, List Groups.)