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.
Congratulations! You finished the "layouts" course.
Please fill out a quick survey here
Learn more about PatternFly Layouts:

Steps
Layouts
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.
You’ll love Katacoda

Guided Path
Knowing what you need to know is the hardest part. Our guided pathways help build your knowledge around real-world scenarios.

Learn By Doing
The best way to learn is by doing. All our tutorials are interactive with pre-configured live environments ready for you to use.

Stay up-to-date
It's a competitive industry. Your skills need to keep up with the latest approaches. Katacoda keeps your skills up-to-date.
You’ll love Katacoda

Guided Path
Knowing what you need to know is the hardest part. Our guided pathways help build your knowledge around real-world scenarios.

Learn By Doing
The best way to learn is by doing. All our tutorials are interactive with pre-configured live environments ready for you to use.

Stay up-to-date
It's a competitive industry. Your skills need to keep up with the latest approaches. Katacoda keeps your skills up-to-date.