General
Get Started Content Security Forum Discord Chat Source Code Support Store
Theming
Introduction Theme Designer
PrimeFlex
Setup Display Elevation FlexBox Form Layout Grid System Spacing Text
PrimeIcons
Icons v4.1
Ajax Framework
Introduction Process PartialSubmit Selector Search Validation RemoteCommand ObserverNew Poll Fragment Status Lifecycle
Form
AutoComplete CascadeSelectNew Chips ColorPicker Inplace InputGroup InputMask InputNumber InputText InputTextArea KeyFilter Keyboard Knob MultiSelectListBox Password Rating SelectBooleanButton SelectBooleanCheckbox SelectOneButton SelectOneRadio SelectCheckboxMenu SelectOneMenu SelectOneListbox SelectManyButton SelectManyMenu SelectManyCheckbox Signature Slider Spinner TextEditor ToggleSwitch TriStateCheckbox
Button
Button CommandButton CommandLink Link LinkButton SplitButton
Data
Carousel ChronolineNew OrderList Organigram Mindmap PickList Repeat Ring TagCloud
Panel
Accordion CardNew Dashboard DividerNew Fieldset OutputPanel Panel PanelGrid SplitterNew ScrollPanel TabView Toolbar
Overlay
ConfirmDialog ConfirmPopupNew Dialog LightBox OverlayPanel Sidebar
Menu
Breadcrumb Dock MegaMenu Menu Menubar MenuButton PanelMenu SlideMenu Stack Steps TabMenu TieredMenu
Charts
Bar Bubble Donut Line Pie Scatter PolarArea Radar Mixed Interactive Export
Messages
Growl Messages StaticMessage
Multimedia
AudioNew Barcode Compare ContentFlow Graphic Image Galleria Media Switch VideoNew
File
Download
DragDrop
Draggable DataView DataTable Custom
Client Side Validation
Basic Bean Custom Event
Dialog Framework
Basic Data Message Nested
Misc
AvatarNew BadgeNew ChipNew ScrollTopNew SkeletonNew TagNew AutoUpdate OutputLabel BlockUI Cache Captcha Clock Context Effect ExceptionHandler FeedReader IdleMonitor ImportConstants ImportEnum Lifecycle Log Focus Hotkey Printer ProgressBar ResetInput Resizable Spotlight Sticky Watermark

Input Style

Free Themes

Built-in component themes created by the PrimeFaces Theme Designer.

Saga Saga
Vela Vela
Arya Arya

Legacy Free Themes

Luna Amber Luna Amber
Luna Blue Luna Blue
Luna Green Luna Green
Luna Pink Luna Pink
Nova Nova
Nova Nova Alt
Nova Nova Accent

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.

Grid System

Grid is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops.

Basic
1
2
3
Dynamic
1
2
3
4
5
6
Reverse Direction
1
2
3
Column Direction
1
2
3
Reverse Column Direction
1
2
3
12 Column Grid
4
1
1
1
1
1
1
1
1
2
6
4
8
2
2
MultiLine
6
6
6
6
Fixed Width Column
100px
auto
Responsive
p-col-12 p-md-6 p-lg-3
p-col-12 p-md-6 p-lg-3
p-col-12 p-md-6 p-lg-3
p-col-12 p-md-6 p-lg-3
Horizontal Alignment - Start
2
1
4
Horizontal Alignment - End
2
1
4
Horizontal Alignment - Center
2
1
4
Horizontal Alignment - Between
2
1
4
Horizontal Alignment - Around
2
1
4
Horizontal Alignment - Even
2
1
4
Vertical Alignment - Start
4
4
4
Vertical Alignment - End
4
4
4
Vertical Alignment - Center
4
4
4
Vertical Alignment - Stretch
4
4
4
Vertical Alignment - Per Column
4
4
4
Offset
6
4
4
Nested
6
6
12
4
Panels
Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Getting Started

FlexGrid is a CSS utility based on flexbox. For more information about Flex, visit A Complete Guide to Flexbox. A basic grid is defined by giving a container p-grid class and children the p-col class. Children of the grid will have the same width and scale according to the width of the parent.


<div class="p-grid">
    <div class="p-col">1</div>
    <div class="p-col">2</div>
    <div class="p-col">3</div>
</div>
1
2
3
12 Column Grid

FlexGrid includes a 12 column based layout utility where width of a column is defined with the p-col-{number} style class. Columns with prefined widths can be used with columns with auto width (p-col) as well.

In the first example below, first column covers the 4 units out of 12 and the rest of the columns share the remaining space whereas in the second example, all three columns have explicit units.


<div class="p-grid">
    <div class="p-col-4">4</div>
    <div class="p-col">1</div>
    <div class="p-col">1</div>
    <div class="p-col">1</div>
    <div class="p-col">1</div>
    <div class="p-col">1</div>
    <div class="p-col">1</div>
    <div class="p-col">1</div>
    <div class="p-col">1</div>
</div>

<div class="p-grid">
    <div class="p-col-2">2</div>
    <div class="p-col-6">6</div>
    <div class="p-col-4">4</div>
</div>
4
1
1
1
1
1
1
1
1
2
6
4
MultiLine

When the number of columns exceed 12, columns wrap to a new line.


<div class="p-grid">
    <div class="p-col-6">6</div>
    <div class="p-col-6">6</div>
    <div class="p-col-6">6</div>
    <div class="p-col-6">6</div>
</div>
6
6
6
6
Fixed Width Column

A column can have a fixed width while siblings having auto width. Apply p-col-fixed class to fix a column width.


<div class="p-grid">
    <div class="p-col-fixed" style="width:100px">Fixed</div>
    <div class="p-col">Auto</div>
</div>
100px
auto
Responsive

Responsive layout is achieved by applying breakpoint specific classes to the columns whereas p-col-* define the default behavior for mobile devices with small screens. Four screen sizes are supported with different breakpoints.

Prefix Devices Media Query Example
p-sm-* Small devices min-width: 576px p-sm-6, p-sm-4
p-md-* Medium sized devices such as tablets min-width: 768px p-md-2, p-md-8
p-lg-* Devices with large screen like desktops min-width: 992px p-lg-6, p-lg-12
p-xl-* Big screen monitors min-width: 1200px p-xl-2, ui-xl-10

In example below, large screens display 4 columns, medium screens display 2 columns in 2 rows and finally on small devices, columns are stacked.


<div class="p-grid">
    <div class="p-col-12 p-md-6 p-lg-3">A</div>
    <div class="p-col-12 p-md-6 p-lg-3">B</div>
    <div class="p-col-12 p-md-6 p-lg-3">C</div>
    <div class="p-col-12 p-md-6 p-lg-3">D</div>
</div>
A
B
C
D
Offset

Offset classes allow defining a left margin on a column to avoid adding empty columns for spacing.


<div class="p-grid">
    <div class="p-col-6 p-offset-3">6</div>
</div>

<div class="p-grid">
    <div class="p-col-4">4</div>
    <div class="p-col-4 p-offset-4">4</div>
</div>
6
4
4

The list of offset classes varying within a range of 1 to 12.

Prefix Devices Media Query Example
p-col-offset-* All devices All screens p-col-offset-6, p-col-offset-4
p-sm-offset-* Small devices min-width: 576px p-sm-offset-6, p-sm-offset-4
p-md-offset-* Medium sized devices such as tablets min-width: 768px p-md-offset-6, p-md-offset-4
p-lg-offset-* Devices with large screen like desktops min-width: 992px p-lg-offset-6, p-lg-offset-4
p-xl-offset-* Big screen monitors min-width: 1200px p-xl-offset-6, p-xl-offset-4
Nested

Columns can be nested to create more complex layouts.


<div class="p-grid nested-grid">
    <div class="p-col-8">
        <div class="p-grid">
            <div class="p-col-6">
                6
            </div>
            <div class="p-col-6">
                6
            </div>
            <div class="p-col-12">
                12
            </div>
        </div>
    </div>
    <div class="p-col-4">
        4
    </div>
</div>
6
6
12
4
Gutter

A .5rem padding is applied to each column along with negative margins on the container element, in case you'd like to remove these gutters, apply p-nogutter class to the container. Gutters can also be removed on an ndividual columns with the same class name. 


<div class="p-grid p-nogutter">
    <div class="p-col">1</div>
    <div class="p-col p-nogutter">2</div>
    <div class="p-col">3</div>
</div>
PrimeFaces 10.0.0 by PrimeTek