Difficulty: beginner
Estimated Time: 25 minutes

In PatternFly, layouts are the containers that allow for organizing and grouping elements.

Use layouts instead of writing custom CSS, as they allow components to remain modularby handling the styles necessary to position components in different contexts. Note that layout styles should never be part of a component.

This module will cover PatternFly's sevel different layouts: bullseye, flex, gallery, grid, level, split and stack.


Step 1 of 7

Bullseye Layout

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

Center the modal component inside of the page.

Katacoda is setting up a new application. Begin coding once the server starts and "Welcome to PatternFly" appears on the lower pane.

1) Copy code into the index.html file.

Click the Copy to Editor button below to add a modal box component in the index.html file.

<div class="pf-c-backdrop">
  <div class="pf-c-modal-box">
    <div class="pf-c-modal-box__body">
      This is a PatternFly Modal

2) Locate the parent container for the modal component.

The parent container is the wrapper, which is one level above its child. In this case, it is the pf-c-backdrop class.

Add pf-l-bullseye to to the class pf-c-backdrop.

Note: The modal should be centered in the div on the x and y axes.