Display property

Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.

On this page

Notation

As such, the classes are named using the format:

  • .display={value} for xs
  • .display="{breakpoint}-{value}" for sm, md, lg, xl, and xxl.

Where *value* is one of:

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

Examples

d-inline
d-inline
vue
<template>
  <b-div
    display="inline"
    padding="2"
    background-color="primary"
    text-color="white"
  >
    d-inline
  </b-div>
  <b-div
    display="inline"
    padding="2"
    background-color="dark"
    text-color="white"
  >
    d-inline
  </b-div>
</template>

<style lang="scss" scoped>
div {
  margin: 0.25rem;
}
</style>
d-inline d-inline
vue
<template>
  <b-span
    display="block"
    padding="2"
    background-color="primary"
    text-color="white"
  >
    d-inline
  </b-span>
  <b-span
    display="block"
    padding="2"
    background-color="dark"
    text-color="white"
  >
    d-inline
  </b-span>
</template>

<style lang="scss" scoped>
span {
  margin: 0.25rem;
}
</style>

Hiding elements

For faster mobile-friendly development, use responsive display attribute 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 display="none" class or one of the display="{sm,md,lg,xl,xxl}-none" attribute for any responsive screen variation.

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

Screen sizeClass
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 .d-xxl-block
Hidden only on xxl.d-xxl-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 .d-xxl-none
Visible only on xxl.d-none .d-xxl-block
hide on lg and wider screens
hide on screens smaller than lg
vue
<template>
  <b-div display="lg-none">
    hide on lg and wider screens
  </b-div>
  <b-div display="none lg-block">
    hide on screens smaller than lg
  </b-div>
</template>

Display in print

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

  • display="print-none"
  • display="print-inline"
  • display="print-inline-block"
  • display="print-block"
  • display="print-grid"
  • display="print-table"
  • display="print-table-row"
  • display="print-table-cell"
  • display="print-flex"
  • display="print-inline-flex"

The print and display attribute can be combined.

Screen Only (Hide on print only)
Print Only (Hide on screen only)
Hide up to large on screen, but always show on print
vue
<template>
  <b-div display="print-none">
    Screen Only (Hide on print only)
  </b-div>
  <b-div display="none print-block">
    Print Only (Hide on screen only)
  </b-div>
  <b-div display="none lg-block print-block">
    Hide up to large on screen, but always show on print
  </b-div>
</template>