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.

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
  • inline-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 sizeDisplay value
Hidden on allnone
Hidden only on xsnone sm-block
Hidden only on smsm-none md-block
Hidden only on mdmd-none lg-block
Hidden only on lglg-none xl-block
Hidden only on xlxl-none xxl-block
Hidden only on xxlxxl-none
Visible on allblock
Visible only on xsblock sm-none
Visible only on smnone sm-block md-none
Visible only on mdnone md-block lg-none
Visible only on lgnone lg-block xl-none
Visible only on xlnone xl-block xxl-none
Visible only on xxlnone 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-inline-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>

See Also