Missing visible-** and hidden-** in Bootstrap v4

by

Update for Bootstrap 5 (2020)

Bootstrap 5 (currently alpha) has a new xxl breakpoint. Therefore display classes have a new tier to support this:

Hidden only on xxl: d-xxl-none
Visible only on xxl: d-none d-xxl-block

Bootstrap 4 (2018)

The hidden-* and visible-* classes no longer exist in Bootstrap 4. If you want to hide an element on specific tiers or breakpoints in Bootstrap 4, use the d-* display classes accordingly.

Remember that extra-small/mobile (formerly xs) is the default (implied) breakpoint, unless overridden by a larger breakpoint. Therefore, the -xs infix no longer exists in Bootstrap 4.

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

Demo of the responsive display classes in Bootstrap 4

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

More Related Contents:

  1. Five equal columns in twitter bootstrap
  2. How to extend/modify (customize) Bootstrap with SASS
  3. Center the content inside a column in Bootstrap
  4. How to make the row stretch remaining height
  5. Bootstrap Rows and Columns – Do I need to use row?
  6. Responsive website zoomed out to full width on mobile
  7. Left align and right align within div in Bootstrap
  8. Disable responsive (mobile) navbar in Bootstrap
  9. Bootstrap – row can I have columns add up to more then 12?
  10. Wrapping bootstrap columns in extra div
  11. How to create new breakpoints in bootstrap 4 using CDN?
  12. Why is the Bootstrap Navbar always collapsed? [duplicate]
  13. Bootstrap 4 Navbar align logo center and toggle icon on the left
  14. Bootstrap 4 Multiple fixed-top navbars
  15. How to left column fixed and right scrollable in Bootstrap 4, responsive?
  16. Missing visible-** and hidden-** in Bootstrap
  17. bootstrap 4 nav doesn’t display hamburger on resize
  18. How can I center an image in Bootstrap?
  19. Bootstrap 3, 4 and 5 .container-fluid with grid adding unwanted padding
  20. Using media breakpoints in Bootstrap 4-alpha
  21. Bootstrap – I don’t want columns to have the same height
  22. How can I get my Twitter Bootstrap buttons to right align?
  23. Bootstrap 4 responsive navbar vertical
  24. Unable to override $theme-color in bootstrap
  25. Twitter bootstrap modal-backdrop doesn’t disappear
  26. What is Bootstrap?
  27. Bootstrap combining rows (rowspan)
  28. Disable Bootstrap 3 navbar going 2 rows in medium viewport size
  29. Vertically align Bootstrap badge inside heading
  30. How can I change the speed of the fade for alert messages in Twitter Bootstrap?

Leave a Comment