Lorem ipsum
dolor sit amet
dolor sit amet
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vitae diam non enim vestibulum interdum.
Utility třídy
UTILITY TŘÍDY (PDF, 1.03 MB) přehled používaných tříd.
Text
Font size 1 (.fz-1)
Font size 2 (.fz-2)
Font size 3 (.fz-3)
Font size 4 (.fz-4)
Font size 5 (.fz-5)
Font size 6 (.fz-6)
Bold text (.fw-b)
Relative bolder weight text (.fw-br)
Light weight text (.fw-l)
Relative lighter weight text (.fw-lr).
Italic text (.fs-i)
Text align left (.tal-l)
Text align center (.tal-c)
Text align right (.tal-r)
Text decoration underline (.td-u)
Uppercased text (.tt-u)
Lowercased text (.tt-l)
Capitalized text (.tt-c)
Display
.d-b
.d-ib
.d-i
Flexbox
A
B
C
A
B
C
A
B
C
A
B
C
A
B
C
.w-15 .w-30-md .w-100-sm
.w-25 .w-30-md .w-100-sm
.fxg-1 .w-100-sm
.as-fs
.as-fe
.as-c
.as-b
.as-s
A
B
C
D
A
B
C
A
B
Grid
column 1
column 2
column 3
Float
.fl-l
.fl-r
.fl-n
Width
%
.w-10
.w-25
.w-50
.w-75
.w-100
Height
%
.h-10
.h-25
.h-50
.h-75
.h-100
Padding
.p-1
.p-2
.p-3
.p-4
.p-5
.px-1
.px-2
.px-3
.px-4
.px-5
.py-1
.py-2
.py-3
.py-4
.py-5
.pt-1
.pr-2
.pb-3
.pl-4
Margin
.m-1
.m-2
.m-3
.m-4
.m-5
.mx-1
.mx-2
.mx-3
.mx-4
.mx-5
.my-1
.my-2
.my-3
.my-4
.my-5
.mt-1
.mr-2
.mb-3
.ml-4
Borders
.b-a
.b-a .bs-ds
.bl
.b-r .bw-2
.b-t .bw-3
.b-b
.b-a .br-pill
.b-a .br-100
.b-a .btw-0 .brw-0 .blw-0
Opacity
.o-1
.o-5
.o-7
.o-10
Position
.pos-r
.pos-a .top-50 .left-50
.pos-r
.pos-a .top-0 .left-100
Vertical Align
| .va-bl baseline |
.va-t top |
.va-m middle |
.va-b bottom |
.va-tt text-top |
.va-tb text-bottom |
Overflow
.ov-h
Hidden loremipsumdolorsitamet
Hidden loremipsumdolorsitamet
.ov-s
Scroll
Scroll
.ov-a
Auto
Auto
.ov-v
Visible loremipsumdolorsitamet
Visible loremipsumdolorsitamet
Ratio
.ratio-1x1
.ratio-4x3
.ratio-3x2
.ratio-16x9
.ratio-21x9
Rotation
.rotate-45
.rotate-90
.rotate-180
Stretched link
Title
Lorem ipsum...
Stretched link