Pagination component in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of a pagination component in web design?

A pagination component helps users navigate through large sets of content by dividing it into smaller, manageable pages.

beginner

Which Bootstrap class is used to create a pagination container?

The <code>.pagination</code> class is used to create a container for pagination items in Bootstrap.

beginner

How do you mark a pagination item as active in Bootstrap?

Add the <code>.active</code> class to the <code>&lt;li&gt;</code> element to highlight the current page in Bootstrap pagination.

intermediate

What role does the aria-current="page" attribute play in pagination?

It improves accessibility by indicating which page is currently active to screen readers.

intermediate

How can you disable a pagination button in Bootstrap?

Add the <code>.disabled</code> class to the <code>&lt;li&gt;</code> element and set <code>tabindex="-1"</code> on the <code>&lt;a&gt;</code> element to prevent interaction.

Which Bootstrap class creates the pagination container?

A .pagination

B .pager

C .nav

D .page-item

The .pagination class is the container for pagination items in Bootstrap.

How do you indicate the current page in Bootstrap pagination?

A Add <code>.active</code> class

B Add <code>.selected</code> class

C Add <code>.current</code> class

D Add <code>.highlight</code> class

The .active class marks the current page in Bootstrap pagination.

What attribute improves accessibility by marking the active page?

A aria-selected="active"

B aria-checked="true"

C aria-label="current"

D aria-current="page"

The aria-current="page" attribute tells screen readers which page is active.

Which class disables a pagination button in Bootstrap?

A .inactive

B .blocked

C .disabled

D .hidden

The .disabled class disables a pagination button in Bootstrap.

What HTML element typically wraps each pagination link in Bootstrap?

A &lt;div&gt;

B &lt;li&gt;

C &lt;section&gt;

D &lt;span&gt;

Each pagination link is wrapped in a <li> element inside the .pagination container.

Explain how to build a simple pagination component using Bootstrap classes.

Think about the structure and classes Bootstrap requires.

Describe how accessibility is improved in Bootstrap pagination components.

Focus on attributes and classes that help screen readers and keyboard users.