Pagination component in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual output of this Bootstrap pagination code?

Look at the following Bootstrap pagination HTML snippet. What will you see rendered in the browser?

Bootsrap

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

A A horizontal list of page numbers 1, 2, 3 with '2' highlighted as active, and 'Previous' and 'Next' links on sides.

B A vertical list of page numbers 1, 2, 3 with '2' highlighted as active, and 'Previous' and 'Next' links on top and bottom.

C A horizontal list of page numbers 1, 2, 3 with no highlight, and 'Previous' and 'Next' links disabled.

D A horizontal list of page numbers 1, 2, 3 with '3' highlighted as active, and 'Previous' and 'Next' links on sides.

💡 Hint

Bootstrap pagination uses horizontal layout by default and highlights the active page with a special style.

The 'pagination' class creates a horizontal list. The 'active' class on the second page item highlights page 2. 'Previous' and 'Next' are normal links on the sides.

❓ accessibility

intermediate

Which attribute improves accessibility in this pagination component?

In the Bootstrap pagination example, which attribute helps screen readers understand the current page?

Bootsrap

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

A class="active" on the active page item

B aria-current="page" on the active page item

C href="#" on all links

D aria-label="Page navigation example" on the nav element

💡 Hint

Screen readers use specific ARIA attributes to identify the current page.

The attribute aria-current="page" explicitly tells assistive technologies which page is active. The class 'active' is for styling only. The href attribute is for links. The aria-label on nav describes the navigation region but does not mark the current page.

📝 Syntax

advanced

What error occurs with this incorrect Bootstrap pagination HTML?

This snippet has a mistake. What happens when you try to render it in a browser?

Bootsrap

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

A The first <li> is not closed, causing invalid HTML but browser renders with missing closing tag.

B SyntaxError: Missing closing tag for <ul>

C TypeError: Cannot read property 'classList' of undefined

D The page numbers do not appear because of missing CSS classes

💡 Hint

Browsers try to fix missing closing tags but the HTML is invalid.

The first

tag is missing its closing

. Browsers will still render but the HTML is invalid and may cause layout issues. There is no JavaScript error here. CSS classes are present so styling applies.

❓ layout

advanced

How to center the Bootstrap pagination horizontally on the page?

Given this pagination, which CSS class or style centers it horizontally?

Bootsrap

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

A Add style "margin-left: auto; margin-right: auto;" to the <ul> element

B Add style "text-align: center;" to the <nav> element

C Add class "mx-auto" to the <nav> element

D Add class "justify-content-center" to the <ul> element

💡 Hint

Bootstrap uses flexbox utilities to align pagination items.

The class "justify-content-center" on the

with class "pagination" centers the pagination horizontally using flexbox. Text-align center on nav won't center flex items. mx-auto on nav won't center the inner flex container. Margin auto on
won't center flex items inside it.

🧠 Conceptual

expert

What is the effect of adding 'disabled' class to a Bootstrap pagination item?

Consider this pagination item:

Previous

. What does the 'disabled' class do?

Bootsrap

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

A It adds a tooltip explaining the item is disabled.

B It only changes the color but the link remains clickable.

C It visually styles the item as disabled and prevents clicking by disabling pointer events.

D It removes the link from the DOM so it cannot be clicked.

💡 Hint

Bootstrap disables pointer events and changes style for disabled pagination items.

The 'disabled' class applies styles that gray out the item and disables pointer events so the link cannot be clicked. The link remains in the DOM but is not interactive. No tooltip is added automatically.