Bootstrap 5 Learning Kit

XSXSSMSMMDMDLGLGXLXLXXLXXL
Extra small: <576pxSmall: ≥576pxMedium: ≥768pxLarge: ≥992pxExtra large: ≥1200pxExtra extra large: ≥1400px
Page Navigation:
Numbers and textNumbers and iconsActive and disabled itemsActive and disabled items without anchorsSizingAlignment

Pagination

Numbers and text

<nav>
  <ul>
    <li><a href="#">Previous</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>
<nav> <ul> <li><a href="#">Previous</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">Next</a></li> </ul> </nav>

Numbers and icons

<nav>
  <ul>
    <li>
      <a href="#">
        <span></span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li>
      <a href="#">
        <span></span>
      </a>
    </li>
  </ul>
</nav>
<nav> <ul> <li> <a href="#"> <span></span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li> <a href="#"> <span></span> </a> </li> </ul> </nav>

Active and disabled items

<nav>
  <ul>
    <li><a href="#">Previous</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li>
      <a href="#">
        3 <span>(current)</span>
      </a>
    </li>
    <li>
      <a href="#">Next</a>
    </li>
  </ul>
</nav>
<nav> <ul> <li><a href="#">Previous</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li> <a href="#"> 3 <span>(current)</span> </a> </li> <li> <a href="#">Next</a> </li> </ul> </nav>

Active and disabled items without anchors

<span> elements for active and disabled page links:

<p><code><span></code> elements for active and disabled page links:</p>
<nav>
  <ul>
    <li><a href="#">Previous</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li>
      <span>
        3 <span>(current)</span>
      </span>
    </li>
    <li>
      <span>Next</span>
    </li>
  </ul>
</nav>
<p><code><span></code> elements for active and disabled page links:</p> <nav> <ul> <li><a href="#">Previous</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li> <span> 3 <span>(current)</span> </span> </li> <li> <span>Next</span> </li> </ul> </nav>

Sizing

<nav>
  <ul>
    <li><a href="#">Previous</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>
<nav>
  <ul>
    <li><a href="#">Previous</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>
<nav>
  <ul>
    <li><a href="#">Previous</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>
<nav> <ul> <li><a href="#">Previous</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">Next</a></li> </ul> </nav> <nav> <ul> <li><a href="#">Previous</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">Next</a></li> </ul> </nav> <nav> <ul> <li><a href="#">Previous</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">Next</a></li> </ul> </nav>

Alignment

<nav>
  <ul>
    <li><a href="#">Previous</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>
<nav>
  <ul>
    <li><a href="#">Previous</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>
<nav> <ul> <li><a href="#">Previous</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">Next</a></li> </ul> </nav> <nav> <ul> <li><a href="#">Previous</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">Next</a></li> </ul> </nav>