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

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2022 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines