For faster mobile-friendly and responsive development, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content.
Changing display
Use our display utilities for responsively toggling common values of the display
property. Mix it with our grid system, content, or components to show or hide them across specific
viewports.
Flexbox options
Bootstrap 4 is built with flexbox, but not every element’s display
has been changed to display: flex
as this would add many unnecessary overrides and unexpectedly change key browser behaviors. Most of our components are built with flexbox enabled.
Should you need to add display: flex
to an element, do so with .d-flex
or one of the responsive variants
[e.g., .d-sm-flex
]. You’ll need this class or display
value to allow the use of our extra flexbox utilities for sizing, alignment, spacing, and more.
Margin and padding
Use the margin
and padding
spacing utilities to control how elements and components are spaced and sized. Bootstrap 4 includes a
five-level scale for spacing utilities, based on a 1rem
value default $spacer
variable. Choose values for all viewports [e.g., .mr-3
for margin-right: 1rem
], or pick responsive variants to target specific viewports [e.g., .mr-md-3
for margin-right: 1rem
starting at the md
breakpoint].
Toggle visibility
When toggling display
isn’t needed, you can toggle the visibility
of an element with our
visibility utilities. Invisible elements will still affect the layout of the page, but are visually hidden from visitors.
Bootstrap provides some handful helper classes, for faster mobile-friendly development. These can be used for showing and hiding content by device via media query, combined with large, small, and medium devices.
Use these sparingly and avoid creating entirely different versions of the same site. Responsive utilities are currently only available for block and table toggling.
.visible-xs | Extra small [less than 768px] visible |
.visible-sm | Small [up to 768 px] visible |
.visible-md | Medium [768 px to 991 px] visible |
.visible-lg | Larger [992 px and above] visible |
.hidden-xs | Extra small [less than 768px] hidden |
.hidden-sm | Small [up to 768 px] hidden |
.hidden-md | Medium [768 px to 991 px] hidden |
.hidden-lg | Larger [992 px and above] hidden |
Print Classes
The following table lists the print classes. Use these for toggling the content for print.
.visible-print | Yes Visible |
.hidden-print | Visible only to browser not to print. |
Example
The following example demonstrates the use of above listed helper classes. Resize your browser or load the example on different devices to test the responsive utility classes.
Extra small ✔ Visible on x-smallSmall ✔ Visible on smallMedium ✔ Visible on mediumLarge ✔ Visible on large
Checkmarks indicates that the element is visible in your current viewport.