0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-05 17:24:20 +01:00
Bootstrap/site/content/docs/4.3/layout/utilities-for-layout.md
XhmikosR 5d6e896ebb Add a docsref shortcode.
This allows for the build to fail if a reference isn't found.
2019-03-13 19:22:59 +02:00

1.8 KiB

layout title description group toc
docs Utilities for layout For faster mobile-friendly and responsive development, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content. layout true

Changing display

Use our [display utilities]({{< docsref "/utilities/display" >}}) 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]({{< docsref "/components/alerts" >}}) 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]({{< docsref "/utilities/flex" >}}) for sizing, alignment, spacing, and more.

Margin and padding

Use the margin and padding [spacing utilities]({{< docsref "/utilities/spacing" >}}) 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]({{< docsref "/utilities/visibility" >}}). Invisible elements will still affect the layout of the page, but are visually hidden from visitors.