Skip to content

Commit

Permalink
docs(display): move all classes into entry table
Browse files Browse the repository at this point in the history
  • Loading branch information
johnleider committed May 13, 2024
1 parent 8ae0c8c commit 59738a0
Showing 1 changed file with 62 additions and 14 deletions.
76 changes: 62 additions & 14 deletions packages/docs/src/pages/en/styles/display.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,67 @@ The display helpers allow you to control the display of content. This includes b

<PageFeatures />

<PromotedEntry />
| Class | Properties |
| - | - |
| **d-none** | display: none; |
| **d-sm-none** | display: none; |
| **d-md-none** | display: none; |
| **d-lg-none** | display: none; |
| **d-xl-none** | display: none; |
| **d-xxl-none** | display: none; |
| **d-sm-flex** | display: flex; |
| **d-md-flex** | display: flex; |
| **d-lg-flex** | display: flex; |
| **d-xl-flex** | display: flex; |
| **d-xxl-flex** | display: flex; |
| **d-sm-inline** | display: inline; |
| **d-md-inline** | display: inline; |
| **d-lg-inline** | display: inline; |
| **d-xl-inline** | display: inline; |
| **d-xxl-inline** | display: inline; |
| **d-sm-inline-block** | display: inline-block; |
| **d-md-inline-block** | display: inline-block; |
| **d-lg-inline-block** | display: inline-block; |
| **d-xl-inline-block** | display: inline-block; |
| **d-xxl-inline-block** | display: inline-block; |
| **d-sm-table** | display: table; |
| **d-md-table** | display: table; |
| **d-lg-table** | display: table; |
| **d-xl-table** | display: table; |
| **d-xxl-table** | display: table; |
| **d-sm-table-cell** | display: table-cell; |
| **d-md-table-cell** | display: table-cell; |
| **d-lg-table-cell** | display: table-cell; |
| **d-xl-table-cell** | display: table-cell; |
| **d-xxl-table-cell** | display: table-cell; |
| **d-sm-table-row** | display: table-row; |
| **d-md-table-row** | display: table-row; |
| **d-lg-table-row** | display: table-row; |
| **d-xl-table-row** | display: table-row; |
| **d-xxl-table-row** | display: table-row; |
| **d-sm-flex** | display: flex; |
| **d-md-flex** | display: flex; |
| **d-lg-flex** | display: flex; |
| **d-xl-flex** | display: flex; |
| **d-xxl-flex** | display: flex; |
| **d-sm-inline-flex** | display: inline-flex; |
| **d-md-inline-flex** | display: inline-flex; |
| **d-lg-inline-flex** | display: inline-flex; |
| **d-xl-inline-flex** | display: inline-flex; |
| **d-xxl-inline-flex** | display: inline-flex; |
| **d-print-none** | display: none; |
| **d-print-inline** | display: inline; |
| **d-print-inline-block** | display: inline-block; |
| **d-print-block** | display: block; |
| **d-print-table** | display: table; |
| **d-print-table-cell** | display: table-cell; |
| **d-print-table-row** | display: table-row; |
| **d-print-flex** | display: flex; |
| **d-print-inline-flex** | display: inline-flex; |
| **d-sr-only** | display: none; |
| **d-sr-only-focusable** | display: none; { style="max-height: 420px;" fixed-header } |

<VoPromotionsCardVuetify />

<FeaturesBreakpointsTable />

Expand Down Expand Up @@ -87,19 +147,7 @@ It is important to note that using any of the display classes above will result

## Display in print

You can also change the display property when printing.

- `.d-print-none`
- `.d-print-inline`
- `.d-print-inline-block`
- `.d-print-block`
- `.d-print-table`
- `.d-print-table-row`
- `.d-print-table-cell`
- `.d-print-flex`
- `.d-print-inline-flex`

Print utility classes can also be combined with none print display utilities.
You can also change the display property when printing. Print utility classes can also be combined with none print display utilities.

<ExamplesExample file="display/print" />

Expand Down

0 comments on commit 59738a0

Please sign in to comment.