Skip to Content
Patternfly Logo

Bullseye

Use a Bullseye layout to center content, both vertically and horizontally within a container.

ExamplesDocumentationCSS Variables

Examples

Basic

content

Documentation

Overview

The bullseye layout is designed to center a single child element horizontally and vertically within its parent.

Usage

ClassApplied toOutcome
.pf-l-bullseye<div>Initializes the bullseye layout. A bullseye can only have one child.
.pf-l-bullseye__item<div>Explicitly sets the child for the bullseye. This class isn't necessary, but it is included to keep inline with BEM convention, and to provide an entity that will later be used for applying modifiers.

CSS Variables

.pf-l-bullseye--pf-l-bullseye--Paddingl_bullseye_Padding
0