package.docs.utilities.Display.examples.Display.md Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of patternfly Show documentation

Assets, source, tooling, and content for PatternFly 4

The newest version!

---
id: Display
section: utility-classes
---import './Display.css'

## Examples

### Inline

```html
.pf-v6-u-display-inline

```

### Block

```html
.pf-v6-u-display-block

```

### Inline block

```html
.pf-v6-u-display-inline-block

```

### Flex

```html
.pf-v6-u-display-flex

```

### Inline flex

```html
.pf-v6-u-display-inline-flex

```

### Grid

```html
.pf-v6-u-display-grid

```

### Inline grid

```html
.pf-v6-u-display-inline-grid

```

### Table, table row, table cell

```html

  
    table-cell
    table-cell
    table-cell
  
  
    table-cell
    table-cell
    table-cell
  


```

### None

```html
Hidden on sm breakpoint

```

## Documentation

### Overview

[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v6-u-display-inline-block-on-lg**

### Usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-u-display-inline{-on-[breakpoint]}` | `*` |  Sets display: inline |
| `.pf-v6-u-display-block{-on-[breakpoint]}` | `*` |  Sets display: block |
| `.pf-v6-u-display-inline-block{-on-[breakpoint]}` | `*` |  Sets display: inline-block |
| `.pf-v6-u-display-flex{-on-[breakpoint]}` | `*` |  Sets display: flex |
| `.pf-v6-u-display-inline-flex{-on-[breakpoint]}` | `*` |  Sets display: inline-flex |
| `.pf-v6-u-display-grid{-on-[breakpoint]}` | `*` |  Sets display: grid |
| `.pf-v6-u-display-inline-grid{-on-[breakpoint]}` | `*` |  Sets display: inline-grid |
| `.pf-v6-u-display-table{-on-[breakpoint]}` | `*` |  Sets display: table |
| `.pf-v6-u-display-table-row{-on-[breakpoint]}` | `*` |  Sets display: table-row |
| `.pf-v6-u-display-table-cell{-on-[breakpoint]}` | `*` |  Sets display: table-cell |
| `.pf-v6-u-display-none{-on-[breakpoint]}` | `*` |  Sets display: none |