Display Utility

Quickly and responsively toggle the display value of components and more with our display utilities. Classes can be combined for various effects as you need.

Basic Uses

These utilities classes allow to set display property of an element.

Class ReferenceName
.d-{name}none | inline | inline-block | block | table | table-cell | table-row | flex | inline-flex
.d-{breakpoint}-{name}Use {breakpoint} as sm, md, lg, and xl to effect on screen width.
The media queries effect screen widths with the given breakpoint or larger. For example, .d-lg-none sets display: none; on both lg and xl screens.
Uses Example
<div class="d-block"> ... </div>

Hiding elements

For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device.

Class ReferenceScreen Size
.d-noneHidden on all
.d-none .d-sm-blockHidden only on xs
.d-sm-none .d-md-blockHidden only on sm
.d-md-none .d-lg-blockHidden only on md
.d-lg-none .d-xl-blockHidden only on lg
.d-xl-noneHidden only on xl
.d-blockVisible on all
.d-block .d-sm-noneVisible only on xs
.d-none .d-sm-block .d-md-noneVisible only on sm
.d-none .d-md-block .d-lg-noneVisible only on md
.d-none .d-lg-block .d-xl-noneVisible only on lg
.d-none .d-xl-blockVisible only on xl
Uses Example
<div class="d-none d-sm-block"> ... </div>
Switch Demo Layout
Use Case Concept
Preview Settings
Direction Change
LTR Mode
RTL Mode
Main UI Style
Default
Bordered
Sidebar Style
White
Dark
Theme
Primary Skin
Default
Blue Light
Egyptian
Purple
Green
Red
Skin Mode
Light Skin
Dark Skin
Looking for functional script for Investment Platform? Check out
Investorm
Looking for Advanced
Investment Platform?