Skip to content
PatternFly logo

Display

Examples

Inline block

.pf-u-display-inline-block

Block

.pf-u-display-block

Flex

.pf-u-display-flex

Inline flex

.pf-u-display-inline-flex

Grid

.pf-u-display-grid

Inline

.pf-u-display-inline

Table

table-cell
table-cell
table-cell
table-cell
table-cell
table-cell

None

Hidden on sm breakpoint

Documentation

Overview

Breakpoint is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, and -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

View source on GitHub