3F Design v1.136.3

# Utilities for layout

# Display

# How it works

Change the value of the display property (opens new window) with our responsive display utility classes. We purposely support only a subset of all possible values for display. Classes can be combined for various effects as you need.

# Notation

Display utility classes that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0; and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

As such, the classes are named using the format:

  • .d-{value} for xs
  • .d-{breakpoint}-{value} for sm, md, lg, and xl.

Where value is one of:

  • none
  • inline
  • inline-block
  • block
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

The display values can be altered by changing the $displays variable and recompiling the SCSS.

The media queries effect screen widths with the given breakpoint or larger. For example, .d-lg-none sets display: none; on both lg and xl screens.

# Examples


# Hiding elements

For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide elements responsively for each screen size.

To hide elements simply use the .d-none class or one of the .d-{sm,md,lg,xl}-none classes for any responsive screen variation.

To show an element only on a given interval of screen sizes you can combine one .d-*-none class with a .d-*-* class, for example .d-none .d-md-block .d-xl-none will hide the element for all screen sizes except on medium and large devices.

Screen Size Class
Hidden on all .d-none
Hidden only on xs .d-none .d-sm-block
Hidden only on sm .d-sm-none .d-md-block
Hidden only on md .d-md-none .d-lg-block
Hidden only on lg .d-lg-none .d-xl-block
Hidden only on xl .d-xl-none
Visible on all .d-block
Visible only on xs .d-block .d-sm-none
Visible only on sm .d-none .d-sm-block .d-md-none
Visible only on md .d-none .d-md-block .d-lg-none
Visible only on lg .d-none .d-lg-block .d-xl-none
Visible only on xl .d-none .d-xl-block

# Display in print

Change the display value of elements when printing with our print display utility classes. Includes support for the same display values as our responsive .d-* utilities.

  • .d-print-none
  • .d-print-inline
  • .d-print-inline-block
  • .d-print-block
  • .d-print-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

The print and display classes can be combined.

# Flex

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.

Bootstraps flexbox utilities are included, but we recommend using the grid for most use-cases.

# External documentation

You can read Bootstraps documentation for flexbox here (opens new window)

# Sizing

# Relative to the parent

Width and height utilities are generated from the $sizes Sass map in _variables.scss. Includes support for 25%, 50%, 75%, 100%, and auto by default. Modify those values as you need to generate different utilities here.



You can also use max-width: 100%; and max-height: 100%; utilities as needed.

# Relative to the viewport

You can also use utilities to set the width and height relative to the viewport.

# Spacing

# How it works

Assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties.

# Notation

Spacing utilities that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

Where property is one of:

  • m - for classes that set margin
  • p - for classes that set padding

Where sides is one of:

  • t - for classes that set margin-top or padding-top
  • b - for classes that set margin-bottom or padding-bottom
  • l - for classes that set margin-left or padding-left
  • r - for classes that set margin-right or padding-right
  • x - for classes that set both *-left and *-right
  • y - for classes that set both *-top and *-bottom
  • blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

  • 0 - for classes that eliminate the margin or padding by setting it to 0
  • 1 - (by default) for classes that set the margin or padding to 1 rem * .25
  • 2 - (by default) for classes that set the margin or padding to 1 rem * .5
  • 3 - (by default) for classes that set the margin or padding to 1 rem
  • 4 - (by default) for classes that set the margin or padding to 1 rem * 1.5
  • 5 - (by default) for classes that set the margin or padding to 1 rem * 3
  • auto - for classes that set the margin to auto

# Examples

Here are some representative examples of these classes:

# Horizontal centering

Additionally, Bootstrap also includes an .mx-auto class for horizontally centering fixed-width block level content—that is, content that has display: block and a width set—by setting the horizontal margins to auto.

# Text

# Text alignment

Easily realign text to components with text alignment classes.

For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.

# Text wrapping and overflow

Wrap text with a .text-wrap class.

Prevent text from wrapping with a .text-nowrap class.

For longer content, you can add a .text-truncate class to truncate the text with an ellipsis. Requires display: inline-block or display: block.

# Word break

Prevent long strings of text from breaking your components' layout by using .text-break to set overflow-wrap: break-word (and word-break: break-word for IE & Edge compatibility).

# Text transform

Transform text in components with text capitalization classes.

Note how .text-capitalize only changes the first letter of each word, leaving the case of any other letters unaffected.

# Font weight and italics

Quickly change the weight (boldness) of text or italicize text.

# Reset color

Reset a text or link's color with .text-reset, so that it inherits the color from its parent.

# Text decoration

Remove a text decoration with a .text-decoration-none class.

Non-underlined link

← Color variants →