Bootstrap breakpoint show / hide cheatsheet

Gunnard/ June 11, 2021/ css, Development/ 0 comments

I have been working on a project for a little while now and I have kept a tab open to this list the ENTIRE time. This has helped with every situation I have come across when it involves Bootstrap 5 breakpoints and how to show or hide elements easily. This list shows how to hide elements at a certain point “and down” i.e. show at large but hide at anything medium and down. Also the reverse is listed — show from extra small to medium and then hide.

Show/hide for breakpoint and down:

  • hidden-xs-down (hidden-xs) = d-none d-sm-block
  • hidden-sm-down (hidden-sm hidden-xs) = d-none d-md-block
  • hidden-md-down (hidden-md hidden-sm hidden-xs) = d-none d-lg-block
  • hidden-lg-down = d-none d-xl-block
  • hidden-xl-down (n/a 3.x) = d-none (same as hidden)

Show/hide for breakpoint and up:

  • hidden-xs-up = d-none (same as hidden)
  • hidden-sm-up = d-sm-none
  • hidden-md-up = d-md-none
  • hidden-lg-up = d-lg-none
  • hidden-xl-up (n/a 3.x) = d-xl-none

Show/hide only for a single breakpoint:

  • hidden-xs (only) = d-none d-sm-block (same as hidden-xs-down)
  • hidden-sm (only) = d-block d-sm-none d-md-block
  • hidden-md (only) = d-block d-md-none d-lg-block
  • hidden-lg (only) = d-block d-lg-none d-xl-block
  • hidden-xl (n/a 3.x) = d-block d-xl-none
  • visible-xs (only) = d-block d-sm-none
  • visible-sm (only) = d-none d-sm-block d-md-none
  • visible-md (only) = d-none d-md-block d-lg-none
  • visible-lg (only) = d-none d-lg-block d-xl-none
  • visible-xl (n/a 3.x) = d-none d-xl-block

Also, note that d-*-block can be replaced with d-*-inlined-*-flexd-*-table-celld-*-table etc.. depending on the display type of the element. Read more on the display classes

Share this Post

Leave a Comment

Your email address will not be published. Required fields are marked *

*
*