Pagination component in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic Bootstrap pagination container.

Bootsrap

<nav aria-label="Page navigation example">
  <ul class="[1]">
  </ul>
</nav>

Drag options to blanks, or click blank then click option'

Apager

Bpagination

Cnav

Dbreadcrumb

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'nav' or 'breadcrumb' classes instead of 'pagination'.

Forgetting to add the class on the

element.

The pagination class creates the Bootstrap pagination container styling.

2fill in blank

medium

Complete the code to add a pagination item with a link labeled '1'.

Bootsrap

<li class="page-item">
  <a class="page-link" href="#">[1]</a>
</li>

Drag options to blanks, or click blank then click option'

ANext

BHome

C1

DPrevious

Attempts:

3 left

💡 Hint

Common Mistakes

Using navigation words like 'Next' or 'Previous' instead of page numbers.

Leaving the link text empty.

The link text inside the pagination item should be the page number, here '1'.

3fill in blank

hard

Fix the error in the pagination item to mark it as active.

Bootsrap

<li class="page-item [1]">
  <a class="page-link" href="#">2</a>
</li>

Drag options to blanks, or click blank then click option'

Aactive

Bdisabled

Ccurrent

Dselected

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'disabled' which greys out the item instead of marking active.

Using non-existent classes like 'current' or 'selected'.

The active class highlights the current page in Bootstrap pagination.

4fill in blank

hard

Fill both blanks to create a disabled previous button and an active page 3 button.

Bootsrap

<li class="page-item [1]">
  <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<li class="page-item [2]">
  <a class="page-link" href="#">3</a>
</li>

Drag options to blanks, or click blank then click option'

Adisabled

Bactive

Ccurrent

Dselected

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up 'disabled' and 'active' classes.

Using incorrect class names like 'current' or 'selected'.

The 'Previous' button is disabled using the disabled class, and page 3 is marked active with the active class.

5fill in blank

hard

Fill all three blanks to create a pagination with first page active, a disabled previous button, and a next button.

Bootsrap

<nav aria-label="Page navigation">
  <ul class="[1]">
    <li class="page-item [2]">
      <a class="page-link" href="#">1</a>
    </li>
    <li class="page-item [3]">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

Drag options to blanks, or click blank then click option'

Apagination

Bdisabled

Cactive

Dnav

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to add the pagination class on the <ul>.

Swapping 'active' and 'disabled' classes.

The pagination class is for the <ul>. The first page is active with active. The previous button is disabled with disabled.