Bootstrap 5 Learning Kit – Reference

Fixed top

<button type="button" class="btn btn-primary fixed-top">Position to top</button>

<button type="button" class="btn btn-primary fixed-top">Position to top</button>

Fixed bottom

<button type="button" class="btn btn-primary fixed-bottom">Position to bottom</button>

<button type="button" class="btn btn-primary fixed-bottom">Position to bottom</button>

Sticky top

<button type="button" class="btn btn-primary sticky-top">Sticky top</button>
<div style="height: 150vh;"></div>

<button type="button" class="btn btn-primary sticky-top">Sticky top</button> <div style="height: 150vh;"></div>

Responsive sticky top

Sticky top for SM

Sticky top for MD

Sticky top for LG

Sticky top for XL

<div>
  <h4 class="h5 text-muted mt-3">Sticky top for SM</h4>
  <button type="button" class="btn btn-primary sticky-sm-top">Sticky top for SM</button>
  <div style="height: 150vh;"></div>
</div>
<div>
  <h4 class="h5 text-muted mt-3">Sticky top for MD</h4>
  <button type="button" class="btn btn-primary sticky-md-top">Sticky top for MD</button>
  <div style="height: 150vh;"></div>
</div>
<div>
  <h4 class="h5 text-muted mt-3">Sticky top for LG</h4>
  <button type="button" class="btn btn-primary sticky-lg-top">Sticky top for LG</button>
  <div style="height: 150vh;"></div>
</div>
<div>
  <h4 class="h5 text-muted mt-3">Sticky top for XL</h4>
  <button type="button" class="btn btn-primary sticky-xl-top">Sticky top for XL</button>
  <div style="height: 150vh;"></div>
</div>

<div> <h4 class="h5 text-muted mt-3">Sticky top for SM</h4> <button type="button" class="btn btn-primary sticky-sm-top">Sticky top for SM</button> <div style="height: 150vh;"></div> </div> <div> <h4 class="h5 text-muted mt-3">Sticky top for MD</h4> <button type="button" class="btn btn-primary sticky-md-top">Sticky top for MD</button> <div style="height: 150vh;"></div> </div> <div> <h4 class="h5 text-muted mt-3">Sticky top for LG</h4> <button type="button" class="btn btn-primary sticky-lg-top">Sticky top for LG</button> <div style="height: 150vh;"></div> </div> <div> <h4 class="h5 text-muted mt-3">Sticky top for XL</h4> <button type="button" class="btn btn-primary sticky-xl-top">Sticky top for XL</button> <div style="height: 150vh;"></div> </div>

Page Navigation:

Position