Missing visible- and hidden- in Bootstrap

Bootstrap, a popular front-end framework, offers powerful tools for creating responsive web designs. Among these are the visibility classes, .visible- and .hidden-, which allow developers to control the display of elements based on screen size. However, these classes were removed in Bootstrap 4 and replaced with a more flexible and mobile-first approach using display utilities. Many developers migrating from Bootstrap 3 still search for these classes, encountering unexpected behavior. This article explores the reasons behind their removal, the alternatives available in Bootstrap 4 and 5, and best practices for managing element visibility in modern responsive design.

Understanding the Deprecated Visibility Classes

In Bootstrap 3, .visible- and .hidden- classes provided a quick way to show or hide elements at specific breakpoints (e.g., .visible-md for medium screens, .hidden-xs to hide on extra small screens). These classes relied on adding or removing the .hidden class and manipulating the display property inline. This approach, while seemingly convenient, often led to specificity issues and conflicts with other CSS rules.

Furthermore, the breakpoint-specific approach wasn’t truly mobile-first. It required thinking about hiding elements at larger breakpoints rather than starting with a base style for smaller screens and progressively enhancing for larger ones.

“Mobile-first design isn’t a trend, it’s a necessity in today’s web landscape,” says Ethan Marcotte, a prominent advocate for responsive web design. His emphasis on mobile-first underscores the shift in user behavior and the importance of prioritizing the mobile experience.

Display Utilities: The Modern Approach

Bootstrap 4 introduced display utilities, a more robust and flexible system for managing visibility. These utilities use the d- class prefix (e.g., .d-none, .d-block, .d-md-block) to control the display property. They follow a mobile-first methodology, meaning elements are hidden by default at smaller breakpoints and then shown as the screen size increases.

For instance, .d-none hides an element at all breakpoints, while .d-md-block displays it as a block-level element starting from the medium breakpoint. This granular control allows for more precise styling and eliminates the specificity issues that plagued the older visibility classes.

Here’s a practical example:

<div class="d-none d-md-block">This content is visible only on medium screens and larger.</div>
<div class="d-lg-none">This content is hidden on large screens and larger.</div>

Implementing Display Utilities Effectively

Transitioning from the older visibility classes to display utilities is straightforward. Simply replace instances of .visible- and .hidden- with the appropriate d- classes. Remember to think mobile-first: start by defining the base style for smaller screens and then use breakpoint-specific classes to adjust the display as the viewport expands.

Here’s a simple process:

Identify the element you want to control.
Determine the desired visibility behavior at different breakpoints.
Apply the corresponding d- classes.

For example, to replicate the behavior of .visible-lg, use .d-none d-lg-block.

Best Practices for Responsive Visibility

Beyond simply replacing the old classes, consider these best practices for managing responsive visibility:

Use semantic HTML where appropriate. If an element is inherently meant to be hidden initially, consider using the <details> and <summary> tags instead of relying solely on CSS.

Test thoroughly across different devices and browsers. Responsive design is all about ensuring a consistent experience across various viewports. Thorough testing is crucial to catch any unexpected behavior.

Leverage print styles. Don’t forget about print media. Use print-specific CSS rules to control the visibility of elements in printed documents.

Explore further customization with utility classes. Bootstrap offers a wide range of utility classes that complement the display utilities. These include margin, padding, and alignment classes, allowing for fine-grained control over the layout.

Consider the user experience. While controlling visibility is important, prioritize user experience. Avoid hiding crucial information or functionality based solely on screen size. Focus on providing a seamless and intuitive experience regardless of the device.

Frequently Asked Questions

Q: What are some common use cases for display utilities?

A: Display utilities are ideal for creating responsive navigation menus, showing/hiding content based on screen size (like sidebars or ads), and optimizing layouts for different devices. They enable you to tailor the user experience for each screen size, maximizing usability.

[Infographic Placeholder: Illustrating the difference between Bootstrap 3 visibility classes and Bootstrap 4/5 display utilities]

Successfully managing responsive visibility is crucial for creating a seamless user experience across devices. While the removal of .visible- and .hidden- in Bootstrap 4 might initially seem like a hurdle, the display utilities offer a more robust and flexible solution. By embracing this mobile-first approach and following best practices, you can create truly responsive designs that adapt gracefully to any screen size. Explore the Bootstrap documentation and start building more dynamic and user-friendly web experiences. Learn more about responsive design principles from authoritative sources like Smashing Magazine, A List Apart, and CSS-Tricks. Remember, a well-executed responsive design is key to engaging users and ensuring your website’s success in today’s multi-device world. Consider this your starting point to mastering responsive visibility and building truly adaptive web experiences.

Question & Answer :
In Bootstrap v3 I often use the hidden-** classes combined with clearfix to control multi column layouts at different screen widths. For example,

I could combine multiple hidden-** in one DIV to make my multi columns appear correctly at different screen widths.

As an example if I wanted to display rows of product photos, 4 per row on larger screen sizes, 3 on smaller screens, then 2 on very small screens. The product photos might be different heights so I need the clearfix to ensure the row breaks properly.

Here’s an example in v3…

http://jsbin.com/tosebayode/edit?html,css,output

Now that v4 has done away with these classes, and replaced them with the visible/hidden-**-up/down classes I seem to have to do the same thing with multiple DIVs instead.

Here’s a similar example in v4…

http://jsbin.com/sagowihowa/edit?html,css,output

So I’ve gone from single DIVs to having to add multiple DIVs with lots of up/down classes to achieve the same thing.

From…

<div class="clearfix visible-xs-block visible-sm-block"></div>

to…

<div class="clearfix hidden-sm-up"></div> <div class="clearfix hidden-md-up hidden-xs-down"></div> <div class="clearfix hidden-md-down"></div>

Is there a better way of doing this in v4 that I have overlooked?

Update for Bootstrap 5 (2021)

Bootstrap 5 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