Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Utilities

Display

Change the display property of an element.

Display

CSS property: display

.vads-u-display--block

Sets an element’s display to block so it starts on a new line and takes the entire width.

.vads-u-display--inline

Sets an element’s display to inline where height, width, margin, and padding have no effect.

.vads-u-display--inline-block

Sets an element‘s display to inline-block, where it can be arranged beside other elements and height, width, margin, and padding are accepted.

.vads-u-display--flex

Sets an element‘s display to flex to behave as a flex container. For more related utilities, check out the flexbox utilities.

.vads-u-display--none

Sets an element‘s display to none, hiding it visually and from screen readers.

Guidance

Accessibility

  • Using code vads-u-display--none and its responsive prefix will hide that element from screen readers. Only use this property if you are choosing to hide from all users.
  • If you want to hide something visual but still make it available to screen readers, consider using the visibility utility instead.

Responsive prefixes

Add a responsive breakpoint prefix separated with a : to target a utility at a responsive breakpoint and higher, following a mobile-first methodology.

Example

<div class="vads-u-display--none large-screen:vads-u-display--block">
breakpoint-name width
xsmall-screen 320px
small-screen 481px
medium-screen 768px
small-desktop-screen 1008px
large-screen 1201px