Display
Apply display properties of an element
Classes
| Class | Properties |
|---|---|
| .inline | display: inline; |
| .block | display: block; |
| .inline-block | display: inline-block; |
| .grid | display: grid; |
| .inline-grid | display: inline-grid; |
| .flex | display: flex; |
| .inline-flex | display: inline-flex; |
| .table | display: table; |
| .table-row | display: table-row; |
| .table-cell | display: table-cell; |
| .table-caption | display: table-caption; |
| .table-column | display: table-column; |
| .table-column-group | display: table-column-group; |
| .table-footer-group | display: table-footer-group; |
| .table-header-group | display: table-header-group; |
| .table-row-group | display: table-row-group; |
| .display-none | display: none; |
.inline
Sets the display property to inline.
1
2
3
4
.block
Sets the display property to block.
1
2
3
4
.inline-block
Sets the display property to inline-block.
1
2
3
4
.flex
Sets the display property to flex.
1
2
3
4
.inline-flex
Sets the display property to inline-flex.
1
2
3
4
.grid
Sets the display property to grid.
1
2
3
4
5
6
.inline-grid
Sets the display property to inline-grid.
1
2
3
4
5
6
.display-none
Sets the display property to none.
1
2
3
4
Responsive
<div class="flex bp1:block bp2:inline-block bp3:grid bp4:flex ...">
<!-- ... -->
</div>1
2
3