File: Alignment.md

package info (click to toggle)
cockpit 354-1
  • links: PTS, VCS
  • area: main
  • in suites: forky, sid
  • size: 308,956 kB
  • sloc: javascript: 775,606; python: 40,351; ansic: 35,655; cpp: 11,117; sh: 3,511; makefile: 580; xml: 261
file content (35 lines) | stat: -rw-r--r-- 1,126 bytes parent folder | download | duplicates (4)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
---
id: Alignment
section: utility-classes
---import './Alignment.css'

## Examples

### Basic

```html
<div class="pf-v6-u-text-align-start">Text start</div>
<div class="pf-v6-u-text-align-center">Text center</div>
<div class="pf-v6-u-text-align-end">Text end</div>
<div class="pf-v6-u-text-align-justify">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris.
</div>

```

## Documentation

### Overview

[Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-text-align-start-on-lg`

### Usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-u-text-align-start{-on-[breakpoint]}` | `*` |  Aligns text start |
| `.pf-v6-u-text-align-center{-on-[breakpoint]}` | `*` |  Aligns text center |
| `.pf-v6-u-text-align-end{-on-[breakpoint]}` | `*` |  Aligns text end |
| `.pf-v6-u-text-align-justify{-on-[breakpoint]}` | `*` |  Aligns text justify |