Display

Examples

Inline

.pf-v6-u-display-inline

Block

.pf-v6-u-display-block

Inline block

.pf-v6-u-display-inline-block

Flex

.pf-v6-u-display-flex

Inline flex

.pf-v6-u-display-inline-flex

Grid

.pf-v6-u-display-grid

Inline grid

.pf-v6-u-display-inline-grid

Table, table row, table cell

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-v6-u-display-inline-block-on-lg

Usage

Class
Applied to
Outcome
.pf-v6-u-display-inline{-on-[breakpoint]}
*
Sets display: inline
.pf-v6-u-display-block{-on-[breakpoint]}
*
Sets display: block
.pf-v6-u-display-inline-block{-on-[breakpoint]}
*
Sets display: inline-block
.pf-v6-u-display-flex{-on-[breakpoint]}
*
Sets display: flex
.pf-v6-u-display-inline-flex{-on-[breakpoint]}
*
Sets display: inline-flex
.pf-v6-u-display-grid{-on-[breakpoint]}
*
Sets display: grid
.pf-v6-u-display-inline-grid{-on-[breakpoint]}
*
Sets display: inline-grid
.pf-v6-u-display-table{-on-[breakpoint]}
*
Sets display: table
.pf-v6-u-display-table-row{-on-[breakpoint]}
*
Sets display: table-row
.pf-v6-u-display-table-cell{-on-[breakpoint]}
*
Sets display: table-cell
.pf-v6-u-display-none{-on-[breakpoint]}
*
Sets display: none
We use cookies on our websites to deliver our online services. Details about how we use cookies and how you may disable them are set out in our Privacy Statement. By using this website you agree to our use of cookies.