Bootstrap has a bit of a utility crisis right now. We've added a metric ton of new ones to v4 during our alphas, but we didn't really get back to cleaning things up that were already there. In particular, I'm looking at those .hidden-
and .visible-
classes, their documentation, and how to use them with the display utilities.
As it stands now, each of these families of utilities convolutes things a bit. Responsive visibility utilities don't actually toggle visibility
, there's overlap with the display utilities, and we've gone a bit too far into providing utilities for utilities.
This PR revamps things to hopefully clear things up and reduce some duplication in our code.
-
Drops
.hidden-*-down
. If you need to hide something on the lowest viewport and then show it at a higher one, use two utilities. Example:<div class="d-none d-md-flex"></div>
. -
Drops
.hidden-*-up
. This is the same as our responsivedisplay: none
utility. Instead of.hidden-xs-up
or.hidden-md-up
, use.d-none
and.d-md-none
. -
Relocates and renames all
.hidden-*
utilities. Instead of.visible-*
, these classes start with.d-
and now reside in the_display.scss
file alongside our otherdisplay
utilities. -
Updates the
visibility()
mixin. Previously this mixin was only for hiding content withvisibility: hidden
, but now we have two utilities—.invisible
and.visible
—that make use of this mixin with an added parameter. there is presently no default value for this mixin. Moved visibility utilities docs to new file, adding docs for newly added.visible
class. -
Revamps the display and responsive utilities docs. We've renamed
display-property.md
todisplay.md
and moved the newly renamed print utilities docs there. In addition, theresponsive-utilities.md
file is no more. Instead, we have a primer docs file that introduces folks to common layout-related utilities.
Okay, so that's a lot, but what's the savings? We drop 50 lines of code in each CSS bundle. Not a lot in the grand scheme, but this is a significant update to simplify an important area of our codebase.
Still to do:
-
Review examples to see if classes need updating -
Clean up docs CSS to remove responsive test code -
Write the new primer docs for the Utilities for layout
page -
Update migration guide
Also happens to fix #21965 (closed), and also fixes #21762 (closed).
/cc @cvrebert @bardiharborow