Display

HTML

Display class define display class of elements.

SCSS recall display with display({key}) function

HTML apply display to elements with .d-{key} class

SCSS
    $displays: (
  'block': block,
  'inline-block': inline-block,
  'inline': inline,
  'flex': flex,
  'inline-flex': inline-flex,
  'table': table,
  'table-cell': table-cell,
  'grid': grid,
  'none': none
) !default;
  

Block

1
2
3
HTML
    <div class="d-block p-4 bg-primary text-center color-white mb-3">1</div>
<div class="d-block p-4 bg-primary text-center color-white mb-3">2</div>
<div class="d-block p-4 bg-primary text-center color-white mb-3">3</div>
  

Inline Block

1
2
3
HTML
    <div class="d-inline-block p-4 bg-primary text-center color-white mb-3">1</div>
<div class="d-inline-block p-4 bg-primary text-center color-white mb-3">2</div>
<div class="d-inline-block p-4 bg-primary text-center color-white mb-3">3</div>
  

Inline

1
2
3
HTML
    <div class="d-inline p-4 bg-primary text-center color-white">1</div>
<div class="d-inline p-4 bg-primary text-center color-white">2</div>
<div class="d-inline p-4 bg-primary text-center color-white">3</div>
  

Flex

1
2
3
HTML
    <div class="d-flex p-4 bg-primary text-center color-white mb-3">1</div>
<div class="d-flex p-4 bg-primary text-center color-white mb-3">2</div>
<div class="d-flex p-4 bg-primary text-center color-white mb-3">3</div>
  

Inline Flex

1
2
3
HTML
    <div class="d-inline-flex p-4 bg-primary text-center color-white mb-3">1</div>
<div class="d-inline-flex p-4 bg-primary text-center color-white mb-3">2</div>
<div class="d-inline-flex p-4 bg-primary text-center color-white mb-3">3</div>
  

Table

Use the .d-table, .d-table-row, and .d-table-cell to create elements that behave like a table, tr, or td element.

Table cell 1
2
3
5
Table cell 4
Table cell 6
HTML
    <div class="d-table">
  <div class="d-table-row">
    <div class="d-table-cell p-4 bg-primary text-center color-white mb-3">1</div>
    <div class="d-table-cell p-4 bg-primary-dark text-center color-white mb-3">2</div>
    <div class="d-table-cell p-4 bg-primary text-center color-white mb-3">3</div>
  </div>
  <div class="d-table-row">
    <div class="d-table-cell p-4 bg-primary-dark text-center color-white mb-3">1</div>
    <div class="d-table-cell p-4 bg-primary text-center color-white mb-3">2</div>
    <div class="d-table-cell p-4 bg-primary-dark text-center color-white mb-3">3</div>
  </div>
</div>
  

None / Hidden

1
2
3
HTML
    <div class="d-inline-block p-4 bg-primary text-center color-white mb-3">1</div>
<div class="d-inline-block p-4 bg-primary text-center color-white mb-3">2</div>
<div class="d-none p-4 bg-primary text-center color-white mb-3">3</div>
  

Responsive

Apply responsive display to elements .{breakpoint}:d-{key} class

Class prefix
Default
> 0px
d-
Extra extra small
> 320px
xxs:d-{key}
Extra small
> 480px
xs:d-{key}
Small
> 640px
sm:d-{key}
Medium
> 768px
md:d-{key}
Large
> 991px
lg:d-{key}
Extra large
> 1200px
xl:d-{key}
Extra extra large
> 1440px
xxl:d-{key}
1
2
3
HTML
    <div class="d-block md:d-inline-block lg:d-inline-flex p-4 bg-primary text-center color-white mb-3">1</div>
<div class="d-block md:d-inline-block lg:d-inline-flex p-4 bg-primary text-center color-white mb-3">2</div>
<div class="d-block md:d-inline-block lg:d-inline-flex p-4 bg-primary text-center color-white mb-3">3</div>