Locale

Change the locale of the datepicker, schedule and client side validation messages.

Input Style

Free Themes

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

PrimeOne Design

Saga Saga
Vela Vela
Arya Arya

Premium Themes

Premium themes are only available exclusively for PrimeFaces Theme Designer subscribers and therefore not included in PrimeFaces core.

bootstrap4-blue-light Bootstrap Blue
bootstrap4-purple-light Bootstrap Purple
bootstrap4-blue-dark Bootstrap Blue
bootstrap4-purple-dark Bootstrap Purple

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>