Search within TutorialsPark

Twitter Bootstrap Pagination


To add a Pagination Bar inorder to Navigate in a Sequential Order


Twitter Bootstrap: Default Pagination

1. You can create a multipage pagination component providing links to other pages using using the class .pagination for the parent element containing the links.

Example: Twitter Bootstrap Default Pagination

Give it a TRY! »

Twitter Bootstrap: Pagination with Active and Disabled States

1. Different states can be denoted on links, use class .disabled to denote unclickable links, and class .active to denote current page.

Example:Twitter Bootstrap Pagination with Active and Disabled States

Give it a TRY! »

Twitter Bootstrap: Pagination of Various Sizes

1. The size of the pagination toolbar can be altered by adding class :

.pagination-lg to create a larger pagination bar.

.pagination-sm to create a smaller pagination bar compared to the normal.

Example:Twitter Bootstrap Sizing of Paginations

Give it a TRY! »

Twitter Bootstrap: Pagers

1. A pager is used to navigate quickly to the next and the previous links on a website.

2. To create a pager use class .pager within the parent element containing the links

Example:Twitter Bootstrap Pagers

Give it a TRY! »

Twitter Bootstrap: Alignment of Pagers

1.The element <blockquote> is to denote quotes from an outside source .

2.The source is specified using <small> element and the name of the source is specified using <cite> element.

Example:Twitter Bootstrap Navigation Pills with Drop Downs

Give it a TRY! »

Twitter Bootstrap: Disabled Pagers

1.The element <blockquote> is to denote quotes from an outside source .

2.The source is specified using <small> element and the name of the source is specified using <cite> element.

Example:Twitter Bootstrap Disabled Pagers

Give it a TRY! »