Difficulty: beginner
Estimated Time: 20 minutes

Module 4: Using PatternFly Layouts

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

You should use layouts over writing custom CSS, as layouts allow components to remain modular, as the layouts handle the styles necessary to position components in different contexts. Layout styles should never be part of a component.

We will go over our 7 different layouts: bullseye, flex, gallery, grid, level, split and stack.

PatternFly 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.

Task: Center the modal component inside of the page

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) Add pf-l-bullseye to the modal's parent container with the class pf-c-backdrop.

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

index.html
myapp.scss