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
Copy to Editor button below to add a modal box component in the
<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-l-bullseye to to the class
Note: The modal should be centered in the div on the x and y axes.