Display

Usage

The display property classes allows you to switch the css display property at each breakpoint, allowing you to hide and show elements in the DOM responsively.

Notation:

You can target the display class by using d-{breakpoint}-{property}. The breakpoint being optional and one of our five breakpoints and the properties are outlined below.
These classes affect the breakpoint and upwards, for example - d-tab-flex will make the element's display 'flex' on tablet, desktop & HD screens.

Properties:

Class	Properties
.d-none	display: none;
.d-inline	display: inline;
.d-inline-block	display: inline-block;
.d-flex	display: flex;
.d-inline-flex	display: inline-flex;
.d-table	display: table;
.d-table-row	display: table-row;
.d-table-cell	display: table-cell;

Hiding/showing

Its common to hide elements in the DOM on mobile to create a faster user experience for mobiles and tablets. You can hide elements at various sizes with the display class using .d-none.
Use the table below to help you with hiding and showing elements at various screen sizes. {type} can be any of the properties listed above.

Breakpoint	Class
Hidden on all	.d-none
Hidden on extra small only	.d-mob-none .d-tab-{type}
Hidden on tablet only	.d-tab-none .d-desk-{type}
Hidden on desktop only	.d-desk-none .d-hd-{type}
Hidden on HD screens only	.d-hd-none
Visible on all	.d-{type}
Visible on extra small only	.d-none .d-mob-{type} .d-tab-none
Visible on tablet only	.d-none .d-tab-{type} .d-desk-none
Visible on desktop only	.d-none .d-desk-{type} .d-hd-none
Visible on HD screens only	.d-none .d-hd-{type}

Examples

Hiding elements:

Using our table above, we can apply the theory to something practical. Here the third element will only be visible on desktop screens.

element

<div class="element">element</div>
<div class="element">element</div>
<div class="d-none d-desk-block">third-child</div>

Changing properties:

A common practice is to make containers/parents have a display: flex; attached to them on larger screens. Below, we are doing exactly that. The items are set to block from mobile up until tablet, when they become flex items, aligning horizontally.

1

2

3

4

5

<div class="d-block d-desk-flex justify-content-between">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
</div>

Variations

<!-- Default -->
<div class="d-none"></div>
<div class="d-inline"></div>
<div class="d-inline-block"></div>
<div class="d-block"></div>
<div class="d-flex"></div>
<div class="d-inline-flex"></div>
<div class="d-table"></div>
<div class="d-table-row"></div>
<div class="d-table-cell"></div>
<!-- Mobile -->
<div class="d-mob-none"></div>
<div class="d-mob-inline"></div>
<div class="d-mob-inline-block"></div>
<div class="d-mob-block"></div>
<div class="d-mob-flex"></div>
<div class="d-mob-inline-flex"></div>
<div class="d-mob-table"></div>
<div class="d-mob-table-row"></div>
<div class="d-mob-table-cell"></div>
<!-- Tablet -->
<div class="d-tab-none"></div>
<div class="d-tab-inline"></div>
<div class="d-tab-inline-block"></div>
<div class="d-tab-block"></div>
<div class="d-tab-flex"></div>
<div class="d-tab-inline-flex"></div>
<div class="d-tab-table"></div>
<div class="d-tab-table-row"></div>
<div class="d-tab-table-cell"></div>
<!-- Desktop -->
<div class="d-desk-none"></div>
<div class="d-desk-inline"></div>
<div class="d-desk-inline-block"></div>
<div class="d-desk-block"></div>
<div class="d-desk-flex"></div>
<div class="d-desk-inline-flex"></div>
<div class="d-desk-table"></div>
<div class="d-desk-table-row"></div>
<div class="d-desk-table-cell"></div>
<!-- HD -->
<div class="d-hd-none"></div>
<div class="d-hd-inline"></div>
<div class="d-hd-inline-block"></div>
<div class="d-hd-block"></div>
<div class="d-hd-flex"></div>
<div class="d-hd-inline-flex"></div>
<div class="d-hd-table"></div>
<div class="d-hd-table-row"></div>
<div class="d-hd-table-cell"></div>

Variables

With the display-properties map you can include only the displays you need.

Variable	Value	Description
`$display-properties: ( none, inline, inline-block, block, flex, inline-flex, table, table-row, table-cell ) !default;`	Map(string)	Enter or delete a CSS display property in the map. The display utility will loop over this map and use the proeprty as a class name. Note: Do not use an invalid CSS display property, an error will occur.