Display

Utility classes to control the display properties of an element

Class reference

Class
Output
.d-block
display: block;
.d-inline-block
display: inline-block;
.d-inline
display: inline;
.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;
.d-none
display: none;
.d-unset
display: unset;

Block

.d-block creates block level elements.

This takes up all the available space
<div class="d-block">...</div>

Inline Block

.d-inline-block creates inline elements which behave as blocks.

This only
takes as much space
as it needs
<div class="d-block">...</div>

Inline

.d-inline creates inline elements.

this is an inline element
<div class="d-block">...</div>

Flex

.d-flex creates a top level flex element.

1
2
3
<div class="d-flex">...</div>

Table

Using d-table, d-table-row, d-table-cell it is possibl e to emulate a table built with <table>, <tr> and <td> respectively.

Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
<div class="d-block">...</div>

None

Using d-none. Hides the element from the browser but also removes it from the dom

lorem

<div class="d-none">...</div>
Back to: Cursor
See next: Flexbox

CONTENTS