-
Notifications
You must be signed in to change notification settings - Fork 187
PrimeFlex v2
PrimeFlex v3 has replaced v2 with a brand new api, as a result v2 is not maintained anymore. Migration to v3 is highly recommended to benefit from integration with Prime UI libraries with CSS variables, ability to use PrimeBlocks along with the various new utilities.
PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more. Although it is not required, it is highly recommended to add PrimeFlex as it is likely to need such utilities when developing applications with PrimeFaces, PrimeNG, PrimeReact and PrimeVue.
PrimeFlex is available at npm, if you have an existing application begin with the installation first.
npm install primeflex@2.0.0 --save
Next step is adding the primeflex.css to your application to include all utilities. This step depends on your development environment, it can either be included with a link tag or if your project supports bundling css from node_modules, the library can be included with an import statement as well e.g.
CDN
<link rel="stylesheet" href="https://unpkg.com/primeflex@2.0.0/primeflex.css">Bundler
import 'primeflex/primeflex.css';Sass variables are used to customize the certain values like breakpoints. Note that, the library needs to be cloned from GitHub and build from source to be able to utilize the new variables.
| Variable | Description | Default |
|---|---|---|
| $sm | Breakpoint of screens such as phones. | 576px |
| $md | Breakpoint of screens such as tablets. | 768px |
| $lg | Breakpoint of screens such as notebook monitors. | 992px |
| $xl | Breakpoint of smaller screens such as desktop monitors. | 1200px |
| $gutter | Padding of a grid column. | .5rem |
| $fieldMargin | Spacing of a field. Can be vertical of horizontal depending on form layout. | .5rem |
| $fieldLabelMargin | Spacing of a field label. Can be vertical of horizontal depending on form layout. | .5rem |
| $helperTextMargin | Top spacing of a helper text. | .5rem |
| $spacer | Base value to use in spacing utilities, view spacing documentation for details. | .5rem |
The display classes use the p-d-{value} format and p-d-{breakpoint}-{value} format for responsive design.
Value field can be one of the following options.
- none
- inline
- inline-block
- block
- flex
- inline-flex
Breakpoints define how the display property should be defined depending on the screen size. Design is mobile first so smaller values can also apply to larger values e.g. md also applies to lg or xl if they are not explicitly defined.
- sm: small screens e.g. phones
- md: medium screens e.g. tablets
- lg: large screens e.g. notebooks
- xl: larger screens .e.g monitors
<div class="p-d-inline">Displayed as inline.</div>
<div class="p-d-flex">Displayed as a flexbox container.</div>
<div class="p-d-block p-d-lg-inline">Inline for larger screens and block for others.</div>
<div class="p-d-md-none">Visible on a Small Screen</div>
<div class="p-d-none p-d-md-inline-flex">Hidden on a Small Screen</div>
<div class="p-d-none p-d-print-block">Only visible when printed.</div>
<div class="p-d-block p-d-print-none">Not available for printing.</div>A custom build with different values can be obtained from PrimeFlex using the _variables.scss file.
Elevation is added to an element using the .p-shadow-{level} class.
<div class="p-shadow-1" />There are 24 depths available varying from 1 to 24.
<div class="p-shadow-1" />
<div class="p-shadow-24" />Easily manage the layout of your components with the responsive FlexBox utilities.
An element can configured as a flexbox container using the p-d-flex or p-d-inline-flex classes.
<div class="p-d-flex">Flex Container</div>
<div class="p-d-inline-flex">Inline Flex Container</div>Default is applied using the p-flex-{direction} class where direction can be either of the following.
- row (default)
- row-reverse
- column
- column-reverse
<div class="p-d-flex">
<div class="p-mr-2">Item 1</div>
<div class="p-mr-2">Item 2</div>
<div>Item 3</div>
</div><div class="p-d-flex p-flex-column">
<div class="p-mb-2">Item 1</div>
<div class="p-mb-2">Item 2</div>
<div>Item 3</div>
</div>Row direction for larger screens and column for smaller.
<div class="p-d-flex p-flex-column p-flex-md-row">
<div class="p-mb-2 p-mr-2">Item 1</div>
<div class="p-mb-2 p-mr-2">Item 2</div>
<div class="p-mb-2 p-mr-2">Item 3</div>
</div>- p-flex-row
- p-flex-row-reverse
- p-flex-column
- p-flex-column-reverse
- p-flex-sm-row
- p-flex-sm-row-reverse
- p-flex-sm-column
- p-flex-sm-column-reverse
- p-flex-md-row
- p-flex-md-row-reverse
- p-flex-md-column
- p-flex-md-column-reverse
- p-flex-lg-row
- p-flex-lg-row-reverse
- p-flex-lg-column
- p-flex-lg-column-reverse
- p-flex-xl-row
- p-flex-xl-row-reverse
- p-flex-xl-column
- p-flex-xl-column-reverse
Order configures the way in which they appear in the flex container. p-order-{value} format is used where value can be a number from 0 to 6.
<div class="p-d-flex">
<div class="p-mr-2 p-order-3">Item 1</div>
<div class="p-mr-2 p-order-1">Item 2</div>
<div class="p-mr-2 p-order-2">Item 3</div>
</div>Orders change depending on the screen size.
<div class="p-d-flex">
<div class="p-mr-2 p-order-3 p-order-md-2">Item 1</div>
<div class="p-mr-2 p-order-1 p-order-md-3">Item 2</div>
<div class="p-mr-2 p-order-2 p-order-md-1">Item 3</div>
</div>
- p-order-0
- p-order-1
- p-order-2
- p-order-3
- p-order-4
- p-order-5
- p-order-6
- p-order-sm-0
- p-order-sm-1
- p-order-sm-2
- p-order-sm-3
- p-order-sm-4
- p-order-sm-5
- p-order-sm-6
- p-order-md-0
- p-order-md-1
- p-order-md-2
- p-order-md-3
- p-order-md-4
- p-order-md-5
- p-order-md-6
- p-order-lg-0
- p-order-lg-1
- p-order-lg-2
- p-order-lg-3
- p-order-lg-4
- p-order-lg-5
- p-order-lg-6
- p-order-xl-0
- p-order-xl-1
- p-order-xl-2
- p-order-xl-3
- p-order-xl-4
- p-order-xl-5
- p-order-xl-6
Flex wrap defines the wrap behavior when there is not enough space in the container. The format of the class is p-flex-{value} and the value field can be either of the listed alternatives.
- nowrap (default)
- wrap
- wrap-reverse
<div class="p-d-flex">
<div class="p-mr-2 p-mb-2">Item 1</div>
<div class="p-mr-2 p-mb-2">Item 2</div>
<div class="p-mr-2 p-mb-2">Item 3</div>
<div class="p-mr-2 p-mb-2">Item 4</div>
<div class="p-mr-2 p-mb-2">Item 5</div>
<div class="p-mr-2 p-mb-2">Item 6</div>
</div><div class="p-d-flex p-flex-wrap">
<div class="p-mr-2 p-mb-2">Item 1</div>
<div class="p-mr-2 p-mb-2">Item 2</div>
<div class="p-mr-2 p-mb-2">Item 3</div>
<div class="p-mr-2 p-mb-2">Item 4</div>
<div class="p-mr-2 p-mb-2">Item 5</div>
<div class="p-mr-2 p-mb-2">Item 6</div>
</div><div class="p-d-flex p-flex-wrap-reverse">
<div class="p-mr-2 p-mb-2">Item 1</div>
<div class="p-mr-2 p-mb-2">Item 2</div>
<div class="p-mr-2 p-mb-2">Item 3</div>
<div class="p-mr-2 p-mb-2">Item 4</div>
<div class="p-mr-2 p-mb-2">Item 5</div>
<div class="p-mr-2 p-mb-2">Item 6</div>
</div>- p-flex-nowrap
- p-flex-wrap
- p-flex-wrap-reverse
- p-flex-sm-nowrap
- p-flex-sm-wrap
- p-flex-sm-wrap-reverse
- p-flex-md-nowrap
- p-flex-md-wrap
- p-flex-md-wrap-reverse
- p-flex-lg-nowrap
- p-flex-lg-wrap
- p-flex-lg-wrap-reverse
- p-flex-xl-nowrap
- p-flex-xl-wrap
- p-flex-xl-wrap-reverse
Justify content is the alignment along the main axis and defined using the p-jc-{value} format with responsive alternatives. Value field accepts the options below.
- start
- end
- center
- between
- around
- evenly
<div class="p-d-flex p-jc-between">
<div>Item 1</div>
<div>Item 2</div>
</div><div class="p-d-flex p-jc-center">
<div class="p-mr-2">Item 1</div>
<div>Item 2</div>
</div>- p-jc-start
- p-jc-end
- p-jc-center
- p-jc-between
- p-jc-around
- p-jc-evenly
- p-jc-sm-start
- p-jc-sm-end
- p-jc-sm-center
- p-jc-sm-between
- p-jc-sm-around
- p-jc-sm-evenly
- p-jc-md-start
- p-jc-md-end
- p-jc-md-center
- p-jc-md-between
- p-jc-md-around
- p-jc-md-evenly
- p-jc-lg-start
- p-jc-lg-end
- p-jc-lg-center
- p-jc-lg-between
- p-jc-lg-around
- p-jc-lg-evenly
- p-jc-xl-start
- p-jc-xl-end
- p-jc-xl-center
- p-jc-xl-between
- p-jc-xl-around
- p-jc-xl-evenly
Align Items configuration is the alignment along the cross axis and defined using the p-ai-{value} format with responsive alternatives. Value field accepts the options below.
- start
- end
- center
- baseline
- stretch (default)
<div class="p-d-flex p-ai-start">
<div class="p-mr-2" style="height:100px">Item 1</div>
<div style="height:50px">Item 2</div>
</div><div class="p-d-flex p-ai-center">
<div class="p-mr-2" style="height:100px">Item 1</div>
<div style="height:50px">Item 2</div>
</div>- p-ai-start
- p-ai-end
- p-ai-center
- p-ai-baseline
- p-ai-strech
- p-ai-sm-start
- p-ai-sm-end
- p-ai-sm-center
- p-ai-sm-baseline
- p-ai-sm-strech
- p-ai-md-start
- p-ai-md-end
- p-ai-md-center
- p-ai-md-baseline
- p-ai-md-strech
- p-ai-lg-start
- p-ai-lg-end
- p-ai-lg-center
- p-ai-lg-baseline
- p-ai-lg-strech
- p-ai-xl-start
- p-ai-xl-end
- p-ai-xl-center
- p-ai-xl-baseline
- p-ai-xl-strech
Align self configuration is the alignment along the cross axis for a particular element and defined using the p-as-{value} format with responsive alternatives. Value field accepts the options below.
- start
- end
- center
- baseline
- stretch (default)
<div class="p-d-flex" style="height: 150px;">
<div class="p-mr-2 p-as-start">Start</div>
<div class="p-mr-2 p-as-center">Center</div>
<div class="p-mr-2 p-as-end">End</div>
<div class="p-mr-2 p-as-stretch">Stretch</div>
</div>- p-as-start
- p-as-end
- p-as-center
- p-as-baseline
- p-as-strech
- p-as-sm-start
- p-as-sm-end
- p-as-sm-center
- p-as-sm-baseline
- p-as-sm-strech
- p-as-md-start
- p-as-md-end
- p-as-md-center
- p-as-md-baseline
- p-as-md-strech
- p-as-lg-start
- p-as-lg-end
- p-as-lg-center
- p-as-lg-baseline
- p-as-lg-strech
- p-as-xl-start
- p-as-xl-end
- p-as-xl-center
- p-as-xl-baseline
- p-as-xl-strech
Align content is the alignment along the cross axis and defined using the p-ac-{value} format with responsive alternatives. Value field accepts the options below.
- start
- end
- center
- around
- stretch
- between
- p-ac-start
- p-ac-end
- p-ac-center
- p-ac-around
- p-ac-stretch
- p-ac-between
- p-ac-sm-start
- p-ac-sm-end
- p-ac-sm-center
- p-ac-sm-around
- p-ac-sm-stretch
- p-ac-sm-between
- p-ac-md-start
- p-ac-md-end
- p-ac-md-center
- p-ac-md-around
- p-ac-md-stretch
- p-ac-md-between
- p-ac-lg-start
- p-ac-lg-end
- p-ac-lg-center
- p-ac-lg-around
- p-ac-lg-stretch
- p-ac-lg-between
- p-ac-xl-start
- p-ac-xl-end
- p-ac-xl-center
- p-ac-xl-around
- p-ac-xl-stretch
- p-ac-xl-between
When combined with spacing utilities, flexbox offers endless possibilities.
<div class="p-d-flex p-p-3 card">
<button pButton pRipple type="button" icon="pi pi-check" class="p-mr-2"></button>
<button pButton pRipple type="button" icon="pi pi-trash" class="p-button-danger"></button>
<button pButton pRipple type="button" icon="pi pi-search" class="p-ml-auto p-button-help"></button>
</div><div class="p-d-flex p-flex-column" style="height:150px">
<div>Item 1</div>
<div class="p-mt-auto">Item 2</div>
</div>Core member of the FormLayout is the .p-field class that wraps the input field and the associated label.
<div class="p-field">
<label for="fieldId">Label</label>
<input id="fieldId" type="text" pInputText>
</div>In its simplest form, a vertical layout is created when used within .p-fluid that makes the components use all available width.
<div class="p-fluid">
<div class="p-field">
<label for="firstname1">Firstname</label>
<input id="firstname1" type="text" pInputText>
</div>
<div class="p-field">
<label for="lastname1">Lastname</label>
<input id="lastname1" type="text" pInputText>
</div>
</div>This is where FormLayout actually hooks-in to PrimeFlex with the help of .p-formgrid class to optimize the content for form design. Example below arranges two fields to be displayed next two each other.
<div class="p-fluid p-formgrid p-grid">
<div class="p-field p-col">
<label for="firstname1">Firstname</label>
<input id="firstname1" type="text" pInputText>
</div>
<div class="p-field p-col">
<label for="lastname1">Lastname</label>
<input id="lastname1" type="text" pInputText>
</div>
</div>In horizontal form, label of the field is displayed on the same row of the input as opposed to the vertical alternative. In this example, label has a fixed width where container of the inputs gets the remaining space.
<div class="p-field p-grid">
<label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label>
<div class="p-col">
<input id="firstname3" type="text" pInputText>
</div>
</div>
<div class="p-field p-grid">
<label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label>
<div class="p-col">
<input id="lastname3" type="text" pInputText>
</div>
</div>Wrapping the form in the previous example with .p-fluid and removing the fixed width results in a fluid layout.
<div class="p-fluid">
<div class="p-field p-grid">
<label for="firstname" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Firstname</label>
<div class="p-col-12 p-md-10">
<input id="firstname" type="text" pInputText>
</div>
</div>
<div class="p-field p-grid">
<label for="lastname" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Lastname</label>
<div class="p-col-12 p-md-10">
<input id="lastname" type="text" pInputText>
</div>
</div>
</div>Inline forms are used to display the content on the same row and can simply be implemented by adding .p-formgroup-inline to the form container. Note that per design requirements, if labels are not visually hidden, it is suggested to use .p-sr-only to still support screen readers.
<div class="p-formgroup-inline">
<div class="p-field">
<label for="firstname" class="p-sr-only">Firstname</label>
<input id="firstname" type="text" pInputText placeholder="Firstname">
</div>
<div class="p-field">
<label for="lastname" class="p-sr-only">Lastname</label>
<input id="lastname" type="text" pInputText placeholder="Lastname">
</div>
<button pButton type="button" label="Submit"></button>
</div>Checkbox and RadioButton have exclusive layout support via .p-field-checkbox and .p-field-radiobutton classes respectively. Examples here demonstrates vertical and horizontal layout alternatives.
<h3>Vertical Checkbox</h3>
<div class="p-field-checkbox">
<p-checkbox name="city1" value="Chicago" [(ngModel)]="cities1" inputId="city1"></p-checkbox>
<label for="city1">Chicago</label>
</div>
<div class="p-field-checkbox">
<p-checkbox name="city2" value="Los Angeles" [(ngModel)]="cities1" inputId="city2"></p-checkbox>
<label for="city2">Los Angeles</label>
</div>
<h3>Horizontal Checkbox</h3>
<div class="p-formgroup-inline">
<div class="p-field-checkbox">
<p-checkbox name="city3" value="Chicago" [(ngModel)]="cities2" inputId="city3"></p-checkbox>
<label for="city3">Chicago</label>
</div>
<div class="p-field-checkbox">
<p-checkbox name="city4" value="Los Angeles" [(ngModel)]="cities2" inputId="city4"></p-checkbox>
<label for="city4">Los Angeles</label>
</div>
</div><h3>Vertical RadioButton</h3>
<div class="p-field-radiobutton">
<p-radioButton name="city5" value="Chicago" [(ngModel)]="city1" inputId="city5"></p-radioButton>
<label for="city5">Chicago</label>
</div>
<div class="p-field-radiobutton">
<p-radioButton name="city6" value="Los Angeles" [(ngModel)]="city1" inputId="city6"></p-radioButton>
<label for="city6">Los Angeles</label>
</div>
<h3>Horizontal RadioButton</h3>
<div class="p-formgroup-inline">
<div class="p-field-checkbox">
<p-radioButton name="city7" value="Chicago" [(ngModel)]="city2" inputId="city7"></p-radioButton>
<label for="city7">Chicago</label>
</div>
<div class="p-field-checkbox">
<p-radioButton name="city8" value="Los Angeles" [(ngModel)]="city2" inputId="city8"></p-radioButton>
<label for="city8">Los Angeles</label>
</div>
</div>Helper text is an optional element defined with the small tag to display additional information about the input field.
<div class="p-field p-fluid">
<label for="username">Username</label>
<input id="username" type="username" pInputText aria-describedby="username-help">
<small id="username-help">Enter your username to reset your password.</small>
</div>A responsive form with various input fields can easily be implemented using a combination of .p-field, .p-formgrid and .p-fluid.
<div class="p-fluid p-formgrid p-grid">
<div class="p-field p-col-12 p-md-6">
<label for="firstname">Firstname</label>
<input id="firstname" type="text" pInputText>
</div>
<div class="p-field p-col-12 p-md-6">
<label for="lastname">Lastname</label>
<input id="lastname" type="text" pInputText>
</div>
<div class="p-field p-col-12">
<label for="address">Address</label>
<textarea id="address" type="text" rows="4" pInputTextarea></textarea>
</div>
<div class="p-field p-col-12 p-md-6">
<label for="city">City</label>
<input id="city" type="text" pInputText>
</div>
<div class="p-field p-col-12 p-md-3">
<label for="state">State</label>
<p-dropdown inputId="state" [options]="states" [(ngModel)]="selectedState" placeholder="Select" optionLabel="name"></p-dropdown>
</div>
<div class="p-field p-col-12 p-md-3">
<label for="zip">Zip</label>
<input id="zip" type="text" pInputText>
</div>
</div>FormLayout comes with sensible defaults, in case these values need to be customized suggested way is building primeflex.scss with your on variables.
| Variable | Default |
|---|---|
| $fieldMargin | 1em |
| $fieldLabelMargin | .5em |
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>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>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>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>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, p-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>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>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 |
Columns can be nested to create more complex layouts.
<div class="p-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>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>The spacing classes use the p-{property}{position}-{value} syntax whereas for responsive values p-{property}{position}-{breakpoint}-{value} format is used.
Property can either be a margin or a padding.
- m: margin
- p: padding
Position are available for the individual sides, the x-y axis or blank for the shortand of all sides.
- t: top
- b: bottom
- l: left
- r: right
- x: left and right
- y: top and bottom
- blank: all sides
Value field varies from 0 to 6 where default value of the $spacer is 1rem. The special auto value is available to margins only and used to center elements.
- 0: $spacer * 0
- 1: $spacer * .25
- 2: $spacer * .5
- 3: $spacer * 1
- 4: $spacer * 1.5
- 5: $spacer * 2
- 6: $spacer * 3
- auto: auto margin
Breakpoints define how the spacing should be defined depending on the screen size. Design is mobile first so smaller values can also apply to larger values e.g. md also applies to lg or xl if they are not explicitly defined.
- sm: small screens e.g. phones
- md: medium screens e.g. tablets
- lg: large screens e.g. notebooks
- xl: larger screens .e.g monitors
<div class="p-mb-2">Margin bottom with level 2</div>
<div class="p-mt-4">Margin top with level 4</div>
<div class="p-m-2">Margin for all sides with level 2</div>
<div class="p-mx-auto">Auto margins for left and right side</div>
<div class="p-pb-4">Padding bottom with level 4</div>
<div class="p-p-1">Padding for all sides with level 1</div>
<div class="p-m-1 p-p-1 p-m-lg-3 p-b-lg-3">Level 3 spacing for lg screens and level 1 for smaller screens (xs).</div>The text classes use the p-text-{value} syntax.
Four options are available for alignment.
- left
- center
- right
- justify
<div class="p-text-left">Left</div>
<div class="p-text-center">Center</div>
<div class="p-text-right">Right</div>
<div class="p-text-justify">Justify</div>Text wrapping defines how the text would be displayed when it exceeds the size of its container.
- nowrap
- wrap
- truncate
<div style="width: 10rem">Long text wraps and does not overlow.</div>
<div class="p-text-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
<div class="p-text-nowrap p-text-truncate" style="width: 10rem">Long text does not wrap and overflows the parent.</div>Transform property changes the case of the text.
- lowercase
- uppercase
- capitalize
<div class="p-text-lowercase">LOWERCASE</div>
<div class="p-text-uppercase">uppercase</div>
<div class="p-text-capitalize">capitalize</div>Text styling applies to font weight and style.
- bold
- normal
- light
- italic
<div class="p-text-bold">Bold</div>
<div class="p-text-normal">Normal</div>
<div class="p-text-light">Light</div>
<div class="p-text-italic">Italic</div>