Difficulty: beginner
Estimated Time: 25 minutes

In PatternFly, layouts are the containers that allow for organizing and grouping elements. Instead of writing CSS, use layouts. They allow components to remain modular by handling the styles necessary to position components in different contexts. Note that layout styles should never be part of a component.

This module covers PatternFly's several different layouts: bullseye, flex, gallery, grid, level, split, and stack.

Layouts

Step 1 of 7

Bullseye Layout

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

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

Center the modal component inside of the page.

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
    </div>
  </div>
</div>

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.

myapp.scss