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.

Practice

1. What is the main purpose of the Bootstrap pagination component?

easy

A. To create dropdown menus

B. To style buttons with different colors

C. To divide content into multiple pages for easier navigation

D. To add animations to images

Solution

1. Step 1: Understand pagination concept

   Pagination is used to split large content into smaller pages for better user experience.

2. Step 2: Recognize Bootstrap pagination role

   Bootstrap's pagination component helps create navigation links for these pages.

3. Final Answer:

   To divide content into multiple pages for easier navigation -> Option C

4. Quick Check:

   Pagination = divide content into pages [OK]

Hint: Pagination breaks content into pages for easy reading [OK]

Common Mistakes:

• Confusing pagination with dropdown menus
• Thinking pagination styles buttons only
• Assuming pagination adds animations

2. Which of the following is the correct Bootstrap class to create a pagination list container?

easy

A. pagination-list

B. pagination

C. page-container

D. page-list

Solution

1. Step 1: Identify Bootstrap pagination container class

   The main container for pagination uses the class pagination.

2. Step 2: Verify other options

   Classes like pagination-list, page-container, and page-list are not valid Bootstrap classes.

3. Final Answer:

   pagination -> Option B

4. Quick Check:

   Pagination container class = pagination [OK]

Hint: Use class 'pagination' for the pagination container [OK]

Common Mistakes:

• Using non-existent classes like pagination-list
• Confusing container class with item classes
• Misspelling the class name

3. Given the following Bootstrap pagination HTML, what will be the visual output in the browser?

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">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>

medium

A. A pagination bar with no active page highlighted

B. A pagination bar with all pages disabled

C. A pagination bar with 'Next' disabled and page 1 highlighted

D. A pagination bar with 'Previous' disabled, page 2 highlighted, and clickable pages 1, 3, and Next

Solution

1. Step 1: Analyze disabled and active classes

   The Previous button has disabled class, so it is not clickable. The page 2 has active class, so it is highlighted.

2. Step 2: Check other page items

   Pages 1, 3, and Next have no disabled class, so they are clickable links.

3. Final Answer:

   A pagination bar with 'Previous' disabled, page 2 highlighted, and clickable pages 1, 3, and Next -> Option D

4. Quick Check:

   Disabled = Previous, Active = 2, Others clickable [OK]

Hint: Disabled = no click, active = highlight current page [OK]

Common Mistakes:

• Confusing disabled with active styling
• Assuming all pages are clickable
• Ignoring aria attributes for accessibility

4. Identify the error in this Bootstrap pagination snippet:

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-link active"><a href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>

medium

A. The 'active' class is incorrectly placed on 'page-link' instead of 'page-item'

B. Missing href attribute on the anchor tags

C. The <ul> tag should have class 'page-list' instead of 'pagination'

D. The list items should not contain anchor tags

Solution

1. Step 1: Check class placement for active page

   Bootstrap requires the active class on the page-item <li>, not on the page-link.

2. Step 2: Verify other attributes

   All anchor tags have href attributes, the <ul> has correct class pagination, and anchors are required inside list items.

3. Final Answer:

   The 'active' class is incorrectly placed on 'page-link' instead of 'page-item' -> Option A

4. Quick Check:

   Active class belongs on page-item [OK]

Hint: Put 'active' on

, not on <a> [OK]

Common Mistakes:

• Placing active class on anchor instead of list item
• Removing href attribute from links
• Using wrong class names on <ul>

5. You want to create a pagination component with 5 pages, where page 3 is active, and the 'Previous' button is disabled on page 1 only. Which Bootstrap structure correctly implements this behavior?

hard

A.

Previous
1
2
3
4
5
Next

B.

Previous
1
2
3
4
5
Next

C.

Previous
3
1
2
4
5
Next

D.

Previous
1
3
2
4
5
Next

Solution

1. Step 1: Check 'Previous' button disabled only on page 1

   • Previous
   • 1
   • 2
   • 3
   • 4
   • 5
   • Next
   correctly disables the 'Previous' button with disabled class on the first page.

2. Step 2: Verify active page and order

   Page 3 is marked active with active class and aria-current="page". Pages are in correct order 1 to 5.

3. Step 3: Confirm other buttons are enabled

   Other page items and 'Next' button are enabled and clickable.

4. Final Answer:

   Option A correctly implements the required pagination structure -> Option A

5. Quick Check:

   Disabled Previous on page 1, active page 3, correct order [OK]

Hint: Disable 'Previous' only on first page, active class on current page [OK]

Common Mistakes:

• Disabling wrong buttons
• Incorrect order of page numbers
• Placing active class on wrong page or element