HTML

Display

ExamplesDocumentation

Examples

Display inline-block

.pf-u-display-inline-block
Copied to clipboard

Display block

.pf-u-display-block
Copied to clipboard

Display flex

.pf-u-display-flex
Copied to clipboard

Display inline flex

.pf-u-display-inline-flex
Copied to clipboard

Display grid

.pf-u-display-grid
Copied to clipboard

Display inline

.pf-u-display-inline
Copied to clipboard

Display table

table-cell
table-cell
table-cell
table-cell
table-cell
table-cell
Copied to clipboard

Display none

Hidden on sm breakpoint
Copied to clipboard

Documentation

Overview

Breakpoint is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. Example .pf-u-display-inline-block-on-lg

Usage

Class Applied To Outcome
.pf-u-display-inline-block{-on-[breakpoint]} * Sets display: inline-block
.pf-u-display-block{-on-[breakpoint]} * Sets display: block
.pf-u-display-inline{-on-[breakpoint]} * Sets display: inline
.pf-u-display-flex{-on-[breakpoint]} * Sets display: flex
.pf-u-display-inline-flex{-on-[breakpoint]} * Sets display: inline-flex
.pf-u-display-table{-on-[breakpoint]} * Sets display: table
.pf-u-display-table-row{-on-[breakpoint]} * Sets display: table-row
.pf-u-display-table-cell{-on-[breakpoint]} * Sets display: table-cell
.pf-u-display-none{-on-[breakpoint]} * Sets display: none