Most of the classes (Fluid Classes and Single Classes not) are available for all breakpoints. Here is a small example how it looks like:
<div class="w-24/24 s:w-12/24 m:w-8/24 l:w-6/24 max:w-3/24">Oh, nice!</div>| Class | Info |
|---|---|
.section |
Just a simple div with 100% width. For creating sections one the page |
.container |
Creates a 100% div with doubled padding left and right (Grid Container) and the maxWidth is set to the Max Breakpoint. Div is centered per default. Nested containers have no padding |
.row |
Have a negative margin left and right to bring cols in the right position |
| Class | Properties |
|---|---|
.w-1/24 |
width: 4.1666666667%; |
.w-2/24 |
width: 8.3333333333%; |
.w-3/24 |
width: 12.5%; |
.w-4/24 |
width: 16.6666666667%; |
.w-5/24 |
width: 20.8333333333%; |
.w-6/24 |
width: 25%; |
.w-7/24 |
width: 29.1666666667%; |
.w-8/24 |
width: 33.3333333333%; |
.w-9/24 |
width: 37.5%; |
.w-10/24 |
width: 41.6666666667%; |
.w-11/24 |
width: 45.8333333333%; |
.w-12/24 |
width: 50%; |
.w-13/24 |
width: 54.1666666667%; |
.w-14/24 |
width: 58.3333333333%; |
.w-15/24 |
width: 62.5%; |
.w-16/24 |
width: 66.6666666667%; |
.w-17/24 |
width: 70.8333333333%; |
.w-18/24 |
width: 75%; |
.w-19/24 |
width: 79.1666666667%; |
.w-20/24 |
width: 83.3333333333%; |
.w-21/24 |
width: 87.5%; |
.w-22/24 |
width: 91.6666666667%; |
.w-23/24 |
width: 95.8333333333%; |
.w-24/24 |
width: 100%; |
| Class | Properties |
|---|---|
.offset-1/24 |
margin-left: 4.1666666667%; |
.offset-2/24 |
margin-left: 8.3333333333%; |
.offset-3/24 |
margin-left: 12.5%; |
.offset-4/24 |
margin-left: 16.6666666667%; |
.offset-5/24 |
margin-left: 20.8333333333%; |
.offset-6/24 |
margin-left: 25%; |
.offset-7/24 |
margin-left: 29.1666666667%; |
.offset-8/24 |
margin-left: 33.3333333333%; |
.offset-9/24 |
margin-left: 37.5%; |
.offset-10/24 |
margin-left: 41.6666666667%; |
.offset-11/24 |
margin-left: 45.8333333333%; |
.offset-12/24 |
margin-left: 50%; |
.offset-13/24 |
margin-left: 54.1666666667%; |
.offset-14/24 |
margin-left: 58.3333333333%; |
.offset-15/24 |
margin-left: 62.5%; |
.offset-16/24 |
margin-left: 66.6666666667%; |
.offset-17/24 |
margin-left: 70.8333333333%; |
.offset-18/24 |
margin-left: 75%; |
.offset-19/24 |
margin-left: 79.1666666667%; |
.offset-20/24 |
margin-left: 83.3333333333%; |
.offset-21/24 |
margin-left: 87.5%; |
.offset-22/24 |
margin-left: 91.6666666667%; |
.offset-23/24 |
margin-left: 95.8333333333%; |
.offset-24/24 |
margin-left: 100%; |
| Class | Properties |
|---|---|
.push-left-1/24 |
left: 4.1666666667%; |
.push-left-2/24 |
left: 8.3333333333%; |
.push-left-3/24 |
left: 12.5%; |
.push-left-4/24 |
left: 16.6666666667%; |
.push-left-5/24 |
left: 20.8333333333%; |
.push-left-6/24 |
left: 25%; |
.push-left-7/24 |
left: 29.1666666667%; |
.push-left-8/24 |
left: 33.3333333333%; |
.push-left-9/24 |
left: 37.5%; |
.push-left-10/24 |
left: 41.6666666667%; |
.push-left-11/24 |
left: 45.8333333333%; |
.push-left-12/24 |
left: 50%; |
.push-left-13/24 |
left: 54.1666666667%; |
.push-left-14/24 |
left: 58.3333333333%; |
.push-left-15/24 |
left: 62.5%; |
.push-left-16/24 |
left: 66.6666666667%; |
.push-left-17/24 |
left: 70.8333333333%; |
.push-left-18/24 |
left: 75%; |
.push-left-19/24 |
left: 79.1666666667%; |
.push-left-20/24 |
left: 83.3333333333%; |
.push-left-21/24 |
left: 87.5%; |
.push-left-22/24 |
left: 91.6666666667%; |
.push-left-23/24 |
left: 95.8333333333%; |
.push-left-24/24 |
left: 100%; |
.push-right-1/24 |
right: 4.1666666667%; |
.push-right-2/24 |
right: 8.3333333333%; |
.push-right-3/24 |
right: 12.5%; |
.push-right-4/24 |
right: 16.6666666667%; |
.push-right-5/24 |
right: 20.8333333333%; |
.push-right-6/24 |
right: 25%; |
.push-right-7/24 |
right: 29.1666666667%; |
.push-right-8/24 |
right: 33.3333333333%; |
.push-right-9/24 |
right: 37.5%; |
.push-right-10/24 |
right: 41.6666666667%; |
.push-right-11/24 |
right: 45.8333333333%; |
.push-right-12/24 |
right: 50%; |
.push-right-13/24 |
right: 54.1666666667%; |
.push-right-14/24 |
right: 58.3333333333%; |
.push-right-15/24 |
right: 62.5%; |
.push-right-16/24 |
right: 66.6666666667%; |
.push-right-17/24 |
right: 70.8333333333%; |
.push-right-18/24 |
right: 75%; |
.push-right-19/24 |
right: 79.1666666667%; |
.push-right-20/24 |
right: 83.3333333333%; |
.push-right-21/24 |
right: 87.5%; |
.push-right-22/24 |
right: 91.6666666667%; |
.push-right-23/24 |
right: 95.8333333333%; |
.push-right-24/24 |
right: 100%; |
| Class | Properties |
|---|---|
.pull-left-1/24 |
left: -4.1666666667%; |
.pull-left-2/24 |
left: -8.3333333333%; |
.pull-left-3/24 |
left: -12.5%; |
.pull-left-4/24 |
left: -16.6666666667%; |
.pull-left-5/24 |
left: -20.8333333333%; |
.pull-left-6/24 |
left: -25%; |
.pull-left-7/24 |
left: -29.1666666667%; |
.pull-left-8/24 |
left: -33.3333333333%; |
.pull-left-9/24 |
left: -37.5%; |
.pull-left-10/24 |
left: -41.6666666667%; |
.pull-left-11/24 |
left: -45.8333333333%; |
.pull-left-12/24 |
left: -50%; |
.pull-left-13/24 |
left: -54.1666666667%; |
.pull-left-14/24 |
left: -58.3333333333%; |
.pull-left-15/24 |
left: -62.5%; |
.pull-left-16/24 |
left: -66.6666666667%; |
.pull-left-17/24 |
left: -70.8333333333%; |
.pull-left-18/24 |
left: -75%; |
.pull-left-19/24 |
left: -79.1666666667%; |
.pull-left-20/24 |
left: -83.3333333333%; |
.pull-left-21/24 |
left: -87.5%; |
.pull-left-22/24 |
left: -91.6666666667%; |
.pull-left-23/24 |
left: -95.8333333333%; |
.pull-left-24/24 |
left: -100%; |
.pull-right-1/24 |
right: -4.1666666667%; |
.pull-right-2/24 |
right: -8.3333333333%; |
.pull-right-3/24 |
right: -12.5%; |
.pull-right-4/24 |
right: -16.6666666667%; |
.pull-right-5/24 |
right: -20.8333333333%; |
.pull-right-6/24 |
right: -25%; |
.pull-right-7/24 |
right: -29.1666666667%; |
.pull-right-8/24 |
right: -33.3333333333%; |
.pull-right-9/24 |
right: -37.5%; |
.pull-right-10/24 |
right: -41.6666666667%; |
.pull-right-11/24 |
right: -45.8333333333%; |
.pull-right-12/24 |
right: -50%; |
.pull-right-13/24 |
right: -54.1666666667%; |
.pull-right-14/24 |
right: -58.3333333333%; |
.pull-right-15/24 |
right: -62.5%; |
.pull-right-16/24 |
right: -66.6666666667%; |
.pull-right-17/24 |
right: -70.8333333333%; |
.pull-right-18/24 |
right: -75%; |
.pull-right-19/24 |
right: -79.1666666667%; |
.pull-right-20/24 |
right: -83.3333333333%; |
.pull-right-21/24 |
right: -87.5%; |
.pull-right-22/24 |
right: -91.6666666667%; |
.pull-right-23/24 |
right: -95.8333333333%; |
.pull-right-24/24 |
right: -100%; |
| Class | Properties |
|---|---|
.w-8px |
width: 8px; |
.w-16px |
width: 16px; |
.w-24px |
width: 24px; |
.w-32px |
width: 32px; |
.w-40px |
width: 40px; |
.w-48px |
width: 48px; |
.w-56px |
width: 56px; |
.w-64px |
width: 64px; |
.w-72px |
width: 72px; |
.w-80px |
width: 80px; |
.w-88px |
width: 88px; |
.w-96px |
width: 96px; |
.w-104px |
width: 104px; |
.w-112px |
width: 112px; |
.w-120px |
width: 120px; |
.w-128px |
width: 128px; |
.w-136px |
width: 136px; |
.w-144px |
width: 144px; |
.w-152px |
width: 152px; |
.w-160px |
width: 160px; |
.w-168px |
width: 168px; |
.w-176px |
width: 176px; |
.w-184px |
width: 184px; |
.w-192px |
width: 192px; |
.w-200px |
width: 200px; |
.w-208px |
width: 208px; |
.w-216px |
width: 216px; |
.w-224px |
width: 224px; |
.w-232px |
width: 232px; |
.w-240px |
width: 240px; |
.w-248px |
width: 248px; |
.w-256px |
width: 256px; |
| Class | Properties |
|---|---|
.w-full |
width: 100%; |
.w-screen |
width: 100vw; |
| Class | Properties |
|---|---|
.min-w-0 |
min-width: 0; |
.min-w-full |
min-width: 100%; |
| Class | Properties |
|---|---|
.container |
width: 320px; |
| Class | Properties |
|---|---|
.h-8px |
height: 8px; |
.h-16px |
height: 16px; |
.h-24px |
height: 24px; |
.h-32px |
height: 32px; |
.h-40px |
height: 40px; |
.h-48px |
height: 48px; |
.h-56px |
height: 56px; |
.h-64px |
height: 64px; |
.h-72px |
height: 72px; |
.h-80px |
height: 80px; |
.h-88px |
height: 88px; |
.h-96px |
height: 96px; |
.h-104px |
height: 104px; |
.h-112px |
height: 112px; |
.h-120px |
height: 120px; |
.h-128px |
height: 128px; |
.h-136px |
height: 136px; |
.h-144px |
height: 144px; |
.h-152px |
height: 152px; |
.h-160px |
height: 160px; |
.h-168px |
height: 168px; |
.h-176px |
height: 176px; |
.h-184px |
height: 184px; |
.h-192px |
height: 192px; |
.h-200px |
height: 200px; |
.h-208px |
height: 208px; |
.h-216px |
height: 216px; |
.h-224px |
height: 224px; |
.h-232px |
height: 232px; |
.h-240px |
height: 240px; |
.h-248px |
height: 248px; |
.h-256px |
height: 256px; |
| Class | Properties |
|---|---|
.h-full |
height: 100%; |
.h-screen |
height: 100vw; |
| Class | Properties |
|---|---|
.min-h-0 |
min-height: 0; |
.min-h-full |
min-height: 100%; |
.min-h-screen |
min-height: 100vh; |
| Class | Properties |
|---|---|
.max-h-full |
max-height: 100%; |
.max-h-screen |
max-height: 100vh; |
| Class | Properties |
|---|---|
.stack-0 |
margin-top: 0; |
.stack-0.25 |
@include spaceY(margin-top, 0.25); |
.stack-0.5 |
@include spaceY(margin-top, 0.5); |
.stack-0.75 |
@include spaceY(margin-top, 0.75); |
.stack |
@include spaceY(margin-top, 1); |
.stack-1 |
@include spaceY(margin-top, 1); |
.stack-1.5 |
@include spaceY(margin-top, 1.5); |
.stack-2 |
@include spaceY(margin-top, 2); |
.stack-2.5 |
@include spaceY(margin-top, 2.5); |
.stack-3 |
@include spaceY(margin-top, 3); |
| Class | Properties |
|---|---|
.p-0 |
padding: 0; |
.pt-0 |
padding-top: 0; |
.pb-0 |
padding-bottom: 0; |
.pl-0 |
padding-left: 0; |
.pr-0 |
padding-right: 0; |
.px-0 |
padding-left: 0; padding-right: 0 |
.py-0 |
padding-top: 0; padding-bottom: 0 |
.p-8px |
padding: 8px; |
.p-16px |
padding: 16px; |
.p-24px |
padding: 24px; |
.p-32px |
padding: 32px; |
.p-40px |
padding: 40px; |
.p-48px |
padding: 48px; |
.p-56px |
padding: 56px; |
.p-64px |
padding: 64px; |
.p-72px |
padding: 72px; |
.p-80px |
padding: 80px; |
.p-88px |
padding: 88px; |
.p-96px |
padding: 96px; |
.p-104px |
padding: 104px; |
.p-112px |
padding: 112px; |
.p-120px |
padding: 120px; |
.p-128px |
padding: 128px; |
.pl-8px |
padding-left: 8px; |
.pl-16px |
padding-left: 16px; |
.pl-24px |
padding-left: 24px; |
.pl-32px |
padding-left: 32px; |
.pl-40px |
padding-left: 40px; |
.pl-48px |
padding-left: 48px; |
.pl-56px |
padding-left: 56px; |
.pl-64px |
padding-left: 64px; |
.pl-72px |
padding-left: 72px; |
.pl-80px |
padding-left: 80px; |
.pl-88px |
padding-left: 88px; |
.pl-96px |
padding-left: 96px; |
.pl-104px |
padding-left: 104px; |
.pl-112px |
padding-left: 112px; |
.pl-120px |
padding-left: 120px; |
.pl-128px |
padding-left: 128px; |
.pr-8px |
padding-right: 8px; |
.pr-16px |
padding-right: 16px; |
.pr-24px |
padding-right: 24px; |
.pr-32px |
padding-right: 32px; |
.pr-40px |
padding-right: 40px; |
.pr-48px |
padding-right: 48px; |
.pr-56px |
padding-right: 56px; |
.pr-64px |
padding-right: 64px; |
.pr-72px |
padding-right: 72px; |
.pr-80px |
padding-right: 80px; |
.pr-88px |
padding-right: 88px; |
.pr-96px |
padding-right: 96px; |
.pr-104px |
padding-right: 104px; |
.pr-112px |
padding-right: 112px; |
.pr-120px |
padding-right: 120px; |
.pr-128px |
padding-right: 128px; |
.pt-8px |
padding-top: 8px; |
.pt-16px |
padding-top: 16px; |
.pt-24px |
padding-top: 24px; |
.pt-32px |
padding-top: 32px; |
.pt-40px |
padding-top: 40px; |
.pt-48px |
padding-top: 48px; |
.pt-56px |
padding-top: 56px; |
.pt-64px |
padding-top: 64px; |
.pt-72px |
padding-top: 72px; |
.pt-80px |
padding-top: 80px; |
.pt-88px |
padding-top: 88px; |
.pt-96px |
padding-top: 96px; |
.pt-104px |
padding-top: 104px; |
.pt-112px |
padding-top: 112px; |
.pt-120px |
padding-top: 120px; |
.pt-128px |
padding-top: 128px; |
.pb-8px |
padding-bottom: 8px; |
.pb-16px |
padding-bottom: 16px; |
.pb-24px |
padding-bottom: 24px; |
.pb-32px |
padding-bottom: 32px; |
.pb-40px |
padding-bottom: 40px; |
.pb-48px |
padding-bottom: 48px; |
.pb-56px |
padding-bottom: 56px; |
.pb-64px |
padding-bottom: 64px; |
.pb-72px |
padding-bottom: 72px; |
.pb-80px |
padding-bottom: 80px; |
.pb-88px |
padding-bottom: 88px; |
.pb-96px |
padding-bottom: 96px; |
.pb-104px |
padding-bottom: 104px; |
.pb-112px |
padding-bottom: 112px; |
.pb-120px |
padding-bottom: 120px; |
.pb-128px |
padding-bottom: 128px; |
.px-8px |
padding-left: 8px; padding-right: 8px; |
.px-16px |
padding-left: 16px; padding-right: 16px; |
.px-24px |
padding-left: 24px; padding-right: 24px; |
.px-32px |
padding-left: 32px; padding-right: 32px; |
.px-40px |
padding-left: 40px; padding-right: 40px; |
.px-48px |
padding-left: 48px; padding-right: 48px; |
.px-56px |
padding-left: 56px; padding-right: 56px; |
.px-64px |
padding-left: 64px; padding-right: 64px; |
.px-72px |
padding-left: 72px; padding-right: 72px; |
.px-80px |
padding-left: 80px; padding-right: 80px; |
.px-88px |
padding-left: 88px; padding-right: 88px; |
.px-96px |
padding-left: 96px; padding-right: 96px; |
.px-104px |
padding-left: 104px; padding-right: 104px; |
.px-112px |
padding-left: 112px; padding-right: 112px; |
.px-120px |
padding-left: 120px; padding-right: 120px; |
.px-128px |
padding-left: 128px; padding-right: 128px; |
.py-8px |
padding-top: 8px; padding-bottom: 8px; |
.py-16px |
padding-top: 16px; padding-bottom: 16px; |
.py-24px |
padding-top: 24px; padding-bottom: 24px; |
.py-32px |
padding-top: 32px; padding-bottom: 32px; |
.py-40px |
padding-top: 40px; padding-bottom: 40px; |
.py-48px |
padding-top: 48px; padding-bottom: 48px; |
.py-56px |
padding-top: 56px; padding-bottom: 56px; |
.py-64px |
padding-top: 64px; padding-bottom: 64px; |
.py-72px |
padding-top: 72px; padding-bottom: 72px; |
.py-80px |
padding-top: 80px; padding-bottom: 80px; |
.py-88px |
padding-top: 88px; padding-bottom: 88px; |
.py-96px |
padding-top: 96px; padding-bottom: 96px; |
.py-104px |
padding-top: 104px; padding-bottom: 104px; |
.py-112px |
padding-top: 112px; padding-bottom: 112px; |
.py-120px |
padding-top: 120px; padding-bottom: 120px; |
.py-128px |
padding-top: 128px; padding-bottom: 128px; |
| Class | Properties |
|---|---|
.m-0 |
margin: 0; |
.mt-0 |
margin-top: 0; |
.mb-0 |
margin-bottom: 0; |
.ml-0 |
margin-left: 0; |
.mr-0 |
margin-right: 0; |
.mx-0 |
margin-left: 0; margin-right: 0 |
.my-0 |
margin-top: 0; margin-bottom: 0 |
.mx-auto |
margin-left: auto; margin-right: auto; |
.ml-auto |
margin-left: auto; |
.mr-auto |
margin-right: auto; |
.m-8px |
margin: 8px; |
.m-16px |
margin: 16px; |
.m-24px |
margin: 24px; |
.m-32px |
margin: 32px; |
.m-40px |
margin: 40px; |
.m-48px |
margin: 48px; |
.m-56px |
margin: 56px; |
.m-64px |
margin: 64px; |
.m-72px |
margin: 72px; |
.m-80px |
margin: 80px; |
.m-88px |
margin: 88px; |
.m-96px |
margin: 96px; |
.m-104px |
margin: 104px; |
.m-112px |
margin: 112px; |
.m-120px |
margin: 120px; |
.m-128px |
margin: 128px; |
.ml-8px |
margin-left: 8px; |
.ml-16px |
margin-left: 16px; |
.ml-24px |
margin-left: 24px; |
.ml-32px |
margin-left: 32px; |
.ml-40px |
margin-left: 40px; |
.ml-48px |
margin-left: 48px; |
.ml-56px |
margin-left: 56px; |
.ml-64px |
margin-left: 64px; |
.ml-72px |
margin-left: 72px; |
.ml-80px |
margin-left: 80px; |
.ml-88px |
margin-left: 88px; |
.ml-96px |
margin-left: 96px; |
.ml-104px |
margin-left: 104px; |
.ml-112px |
margin-left: 112px; |
.ml-120px |
margin-left: 120px; |
.ml-128px |
margin-left: 128px; |
.mr-8px |
margin-right: 8px; |
.mr-16px |
margin-right: 16px; |
.mr-24px |
margin-right: 24px; |
.mr-32px |
margin-right: 32px; |
.mr-40px |
margin-right: 40px; |
.mr-48px |
margin-right: 48px; |
.mr-56px |
margin-right: 56px; |
.mr-64px |
margin-right: 64px; |
.mr-72px |
margin-right: 72px; |
.mr-80px |
margin-right: 80px; |
.mr-88px |
margin-right: 88px; |
.mr-96px |
margin-right: 96px; |
.mr-104px |
margin-right: 104px; |
.mr-112px |
margin-right: 112px; |
.mr-120px |
margin-right: 120px; |
.mr-128px |
margin-right: 128px; |
.mt-8px |
margin-top: 8px; |
.mt-16px |
margin-top: 16px; |
.mt-24px |
margin-top: 24px; |
.mt-32px |
margin-top: 32px; |
.mt-40px |
margin-top: 40px; |
.mt-48px |
margin-top: 48px; |
.mt-56px |
margin-top: 56px; |
.mt-64px |
margin-top: 64px; |
.mt-72px |
margin-top: 72px; |
.mt-80px |
margin-top: 80px; |
.mt-88px |
margin-top: 88px; |
.mt-96px |
margin-top: 96px; |
.mt-104px |
margin-top: 104px; |
.mt-112px |
margin-top: 112px; |
.mt-120px |
margin-top: 120px; |
.mt-128px |
margin-top: 128px; |
.mb-8px |
margin-bottom: 8px; |
.mb-16px |
margin-bottom: 16px; |
.mb-24px |
margin-bottom: 24px; |
.mb-32px |
margin-bottom: 32px; |
.mb-40px |
margin-bottom: 40px; |
.mb-48px |
margin-bottom: 48px; |
.mb-56px |
margin-bottom: 56px; |
.mb-64px |
margin-bottom: 64px; |
.mb-72px |
margin-bottom: 72px; |
.mb-80px |
margin-bottom: 80px; |
.mb-88px |
margin-bottom: 88px; |
.mb-96px |
margin-bottom: 96px; |
.mb-104px |
margin-bottom: 104px; |
.mb-112px |
margin-bottom: 112px; |
.mb-120px |
margin-bottom: 120px; |
.mb-128px |
margin-bottom: 128px; |
.mx-8px |
margin-left: 8px; margin-right: 8px; |
.mx-16px |
margin-left: 16px; margin-right: 16px; |
.mx-24px |
margin-left: 24px; margin-right: 24px; |
.mx-32px |
margin-left: 32px; margin-right: 32px; |
.mx-40px |
margin-left: 40px; margin-right: 40px; |
.mx-48px |
margin-left: 48px; margin-right: 48px; |
.mx-56px |
margin-left: 56px; margin-right: 56px; |
.mx-64px |
margin-left: 64px; margin-right: 64px; |
.mx-72px |
margin-left: 72px; margin-right: 72px; |
.mx-80px |
margin-left: 80px; margin-right: 80px; |
.mx-88px |
margin-left: 88px; margin-right: 88px; |
.mx-96px |
margin-left: 96px; margin-right: 96px; |
.mx-104px |
margin-left: 104px; margin-right: 104px; |
.mx-112px |
margin-left: 112px; margin-right: 112px; |
.mx-120px |
margin-left: 120px; margin-right: 120px; |
.mx-128px |
margin-left: 128px; margin-right: 128px; |
.my-8px |
margin-top: 8px; margin-bottom: 8px; |
.my-16px |
margin-top: 16px; margin-bottom: 16px; |
.my-24px |
margin-top: 24px; margin-bottom: 24px; |
.my-32px |
margin-top: 32px; margin-bottom: 32px; |
.my-40px |
margin-top: 40px; margin-bottom: 40px; |
.my-48px |
margin-top: 48px; margin-bottom: 48px; |
.my-56px |
margin-top: 56px; margin-bottom: 56px; |
.my-64px |
margin-top: 64px; margin-bottom: 64px; |
.my-72px |
margin-top: 72px; margin-bottom: 72px; |
.my-80px |
margin-top: 80px; margin-bottom: 80px; |
.my-88px |
margin-top: 88px; margin-bottom: 88px; |
.my-96px |
margin-top: 96px; margin-bottom: 96px; |
.my-104px |
margin-top: 104px; margin-bottom: 104px; |
.my-112px |
margin-top: 112px; margin-bottom: 112px; |
.my-120px |
margin-top: 120px; margin-bottom: 120px; |
.my-128px |
margin-top: 128px; margin-bottom: 128px; |
.-m-8px |
margin: -8px; |
.-m-16px |
margin: -16px; |
.-m-24px |
margin: -24px; |
.-m-32px |
margin: -32px; |
.-m-40px |
margin: -40px; |
.-m-48px |
margin: -48px; |
.-m-56px |
margin: -56px; |
.-m-64px |
margin: -64px; |
.-m-72px |
margin: -72px; |
.-m-80px |
margin: -80px; |
.-m-88px |
margin: -88px; |
.-m-96px |
margin: -96px; |
.-m-104px |
margin: -104px; |
.-m-112px |
margin: -112px; |
.-m-120px |
margin: -120px; |
.-m-128px |
margin: -128px; |
.-ml-8px |
margin-left: -8px; |
.-ml-16px |
margin-left: -16px; |
.-ml-24px |
margin-left: -24px; |
.-ml-32px |
margin-left: -32px; |
.-ml-40px |
margin-left: -40px; |
.-ml-48px |
margin-left: -48px; |
.-ml-56px |
margin-left: -56px; |
.-ml-64px |
margin-left: -64px; |
.-ml-72px |
margin-left: -72px; |
.-ml-80px |
margin-left: -80px; |
.-ml-88px |
margin-left: -88px; |
.-ml-96px |
margin-left: -96px; |
.-ml-104px |
margin-left: -104px; |
.-ml-112px |
margin-left: -112px; |
.-ml-120px |
margin-left: -120px; |
.-ml-128px |
margin-left: -128px; |
.-mr-8px |
margin-right: -8px; |
.-mr-16px |
margin-right: -16px; |
.-mr-24px |
margin-right: -24px; |
.-mr-32px |
margin-right: -32px; |
.-mr-40px |
margin-right: -40px; |
.-mr-48px |
margin-right: -48px; |
.-mr-56px |
margin-right: -56px; |
.-mr-64px |
margin-right: -64px; |
.-mr-72px |
margin-right: -72px; |
.-mr-80px |
margin-right: -80px; |
.-mr-88px |
margin-right: -88px; |
.-mr-96px |
margin-right: -96px; |
.-mr-104px |
margin-right: -104px; |
.-mr-112px |
margin-right: -112px; |
.-mr-120px |
margin-right: -120px; |
.-mr-128px |
margin-right: -128px; |
.-mt-8px |
margin-top: -8px; |
.-mt-16px |
margin-top: -16px; |
.-mt-24px |
margin-top: -24px; |
.-mt-32px |
margin-top: -32px; |
.-mt-40px |
margin-top: -40px; |
.-mt-48px |
margin-top: -48px; |
.-mt-56px |
margin-top: -56px; |
.-mt-64px |
margin-top: -64px; |
.-mt-72px |
margin-top: -72px; |
.-mt-80px |
margin-top: -80px; |
.-mt-88px |
margin-top: -88px; |
.-mt-96px |
margin-top: -96px; |
.-mt-104px |
margin-top: -104px; |
.-mt-112px |
margin-top: -112px; |
.-mt-120px |
margin-top: -120px; |
.-mt-128px |
margin-top: -128px; |
.-mb-8px |
margin-bottom: -8px; |
.-mb-16px |
margin-bottom: -16px; |
.-mb-24px |
margin-bottom: -24px; |
.-mb-32px |
margin-bottom: -32px; |
.-mb-40px |
margin-bottom: -40px; |
.-mb-48px |
margin-bottom: -48px; |
.-mb-56px |
margin-bottom: -56px; |
.-mb-64px |
margin-bottom: -64px; |
.-mb-72px |
margin-bottom: -72px; |
.-mb-80px |
margin-bottom: -80px; |
.-mb-88px |
margin-bottom: -88px; |
.-mb-96px |
margin-bottom: -96px; |
.-mb-104px |
margin-bottom: -104px; |
.-mb-112px |
margin-bottom: -112px; |
.-mb-120px |
margin-bottom: -120px; |
.-mb-128px |
margin-bottom: -128px; |
.-mx-8px |
margin-left: -8px; margin-right: -8px; |
.-mx-16px |
margin-left: -16px; margin-right: -16px; |
.-mx-24px |
margin-left: -24px; margin-right: -24px; |
.-mx-32px |
margin-left: -32px; margin-right: -32px; |
.-mx-40px |
margin-left: -40px; margin-right: -40px; |
.-mx-48px |
margin-left: -48px; margin-right: -48px; |
.-mx-56px |
margin-left: -56px; margin-right: -56px; |
.-mx-64px |
margin-left: -64px; margin-right: -64px; |
.-mx-72px |
margin-left: -72px; margin-right: -72px; |
.-mx-80px |
margin-left: -80px; margin-right: -80px; |
.-mx-88px |
margin-left: -88px; margin-right: -88px; |
.-mx-96px |
margin-left: -96px; margin-right: -96px; |
.-mx-104px |
margin-left: -104px; margin-right: -104px; |
.-mx-112px |
margin-left: -112px; margin-right: -112px; |
.-mx-120px |
margin-left: -120px; margin-right: -120px; |
.-mx-128px |
margin-left: -128px; margin-right: -128px; |
.-my-8px |
margin-top: -8px; margin-bottom: -8px; |
.-my-16px |
margin-top: -16px; margin-bottom: -16px; |
.-my-24px |
margin-top: -24px; margin-bottom: -24px; |
.-my-32px |
margin-top: -32px; margin-bottom: -32px; |
.-my-40px |
margin-top: -40px; margin-bottom: -40px; |
.-my-48px |
margin-top: -48px; margin-bottom: -48px; |
.-my-56px |
margin-top: -56px; margin-bottom: -56px; |
.-my-64px |
margin-top: -64px; margin-bottom: -64px; |
.-my-72px |
margin-top: -72px; margin-bottom: -72px; |
.-my-80px |
margin-top: -80px; margin-bottom: -80px; |
.-my-88px |
margin-top: -88px; margin-bottom: -88px; |
.-my-96px |
margin-top: -96px; margin-bottom: -96px; |
.-my-104px |
margin-top: -104px; margin-bottom: -104px; |
.-my-112px |
margin-top: -112px; margin-bottom: -112px; |
.-my-120px |
margin-top: -120px; margin-bottom: -120px; |
.-my-128px |
margin-top: -128px; margin-bottom: -128px; |
| Class | Properties |
|---|---|
.block |
display: block; |
.inline-block |
display: inline-block; |
.inline |
display: inline; |
.flex |
display: flex; |
.inline-flex |
display: inline-flex; |
.table |
display: table; |
.table-ror |
display: table-ror; |
.table-cell |
display: table-cell; |
.hidden |
display: none; |
| Class | Properties |
|---|---|
.float-left |
float: left; |
.float-right |
float: right; |
.float-none |
float: none; |
.clearfix |
::after { content: ''; display: table; clear: both; } |
| Class | Properties |
|---|---|
.object-contain |
object-fit: contain; |
.object-cover |
object-fit: cover; |
.object-fill |
object-fit: fill; |
.object-none |
object-fit: none; |
.object-scale-down |
object-fit: scale-down; |
| Class | Properties |
|---|---|
.object-bottom |
object-position: bottom; |
.object-center |
object-position: center; |
.object-left |
object-position: left; |
.object-left-bottom |
object-position: left bottom; |
.object-left-top |
object-position: left top; |
.object-right |
object-position: right; |
.object-right-bottom |
object-position: right bottom; |
.object-right-top |
object-position: right top; |
.object-top |
object-position: top; |
| Class | Properties |
|---|---|
.overflow-auto |
overflow: auto; |
.overflow-hidden |
overflow: hidden; |
.overflow-visible |
overflow: visible; |
.overflow-scroll |
overflow: scroll; |
.overflow-x-auto |
overflow-x: auto; |
.overflow-y-auto |
overflow-y: auto; |
.overflow-x-hidden |
overflow-x: hidden; |
.overflow-y-hidden |
overflow-y: hidden; |
.overflow-x-visible |
overflow-x: visible; |
.overflow-y-visible |
overflow-y: visible; |
.overflow-x-scroll |
overflow-x: scroll; |
.overflow-y-scroll |
overflow-y: scroll; |
.scrolling-touch |
-webkit-overflow-scrolling: touch; |
.scrolling-auto |
-webkit-overflow-scrolling: auto; |
| Class | Properties |
|---|---|
.position-static |
position: static; |
.position-fixed |
position: fixed; |
.position-absolute |
position: absolute; |
.position-relative |
position: relative; |
.position-sticky |
position: sticky; |
| Class | Properties |
|---|---|
.inset-0 |
top: 0; right: 0; bottom: 0; left: 0; |
.inset-x-0 |
left: 0; right: 0; |
.inset-y-0 |
top: 0; bottom: 0; |
.top-0 |
top: 0; |
.right-0 |
right: 0; |
.bottom-0 |
bottom: 0; |
.left-0 |
left: 0; |
.inset-auto |
top: auto; right: auto; bottom: auto; left: auto; |
.inset-x-auto |
left: auto; right: auto; |
.inset-y-auto |
top: auto; bottom: auto; |
.top-auto |
top: auto; |
.right-auto |
right: auto; |
.bottom-auto |
bottom: auto; |
.left-auto |
left: auto; |
| Class | Properties |
|---|---|
.visible |
visibility: visible; |
.invisible |
visibility: hidden; |
| Class | Properties |
|---|---|
.z-0 |
z-index: 0; |
.z-10 |
z-index: 10; |
.z-20 |
z-index: 20; |
.z-30 |
z-index: 30; |
.z-40 |
z-index: 40; |
.z-50 |
z-index: 50; |
.z-auto |
z-index: auto; |
| Class | Properties |
|---|---|
.flex-row |
flex-direction: row; |
.flex-row-reverse |
flex-direction: row-reverse; |
.flex-col |
flex-direction: col; |
.flex-col-reverse |
flex-direction: col-reverse; |
.flex-no-wrap |
flex-wrap: nowrap; |
.flex-wrap |
flex-wrap: wrap; |
.items-stretch |
align-items: stretch; |
.items-start |
align-items: flex-start; |
.items-end |
align-items: flex-end; |
.items-center |
align-items: center; |
.items-baseline |
align-items: baseline; |
.content-start |
align-content: flex-start; |
.content-end |
align-content: flex-end; |
.content-center |
align-content: center; |
.content-between |
align-content: space-between; |
.content-around |
align-content: space-around; |
.self-auto |
align-self: auto; |
.self-start |
align-self: flex-start; |
.self-end |
align-self: flex-end; |
.self-center |
align-self: center; |
.self-stretch |
align-self: stretch; |
.justify-start |
justify-content: flex-start; |
.justify-end |
justify-content: flex-end; |
.justify-center |
justify-content: center; |
.justify-between |
justify-content: space-between; |
.justify-around |
justify-content: space-around; |
.flex-initial |
flex: 0 1 auto; |
.flex-1 |
flex: 1 1 0%; |
.flex-auto |
flex: 1 1 auto; |
.flex-none |
flex: none; |
.flex-grow |
flex-grow: 1; |
.flex-grow-0 |
flex-grow: 0; |
.flex-shrink |
flex-shrink: 1; |
.flex-shrink-0 |
flex-shrink: 0; |
| Class | Properties |
|---|---|
.order-first |
order: -9999; |
.order-last |
order: 9999; |
.order-1 |
order: 1; |
.order-2 |
order: 2; |
.order-3 |
order: 3; |
.order-4 |
order: 4; |
.order-5 |
order: 5; |
.order-6 |
order: 6; |
.order-7 |
order: 7; |
.order-8 |
order: 8; |
.order-9 |
order: 9; |
.order-10 |
order: 10; |
.order-11 |
order: 11; |
.order-12 |
order: 12; |
| Class | Properties |
|---|---|
.table-auto |
table-layout: auto; |
.table-fixed |
table-layout: fixed; |
| Class | Properties |
|---|---|
.text-left |
text-align: left; |
.text-center |
text-align: center; |
.text-right |
text-align: right; |
.text-justify |
text-align: justify; |
| Class | Properties |
|---|---|
.whitespace-normal |
white-space: normal; |
.whitespace-nowrap |
white-space: nowrap; |
.whitespace-pre |
white-space: pre; |
.whitespace-pre-line |
white-space: pre-line; |
.whitespace-pre-wrap |
white-space: pre-wrap; |
| Class | Properties |
|---|---|
.break-normal |
word-break: normal; overflow-wrap: normal; |
.break-words |
overflow-wrap: break-word; |
.break-all |
word-break: break-all; |
.truncate |
overflow: hidden; text-overflow: ellipsis; white-space: nowrap |
Half numbers are also possible like .p-0.5--fluid
| Class | Properties |
|---|---|
.p-0--fluid … .p-10--fluid |
magic calc |
.pl-0--fluid … .pl-10--fluid |
magic calc |
.pr-0--fluid … .pr-10--fluid |
magic calc |
.pt-0--fluid … .pt-10--fluid |
magic calc |
.pb-0--fluid … .pb-10--fluid |
magic calc |
.px-0--fluid … .px-10--fluid |
magic calc |
.py-0--fluid … .py-10--fluid |
magic calc |
.m-0--fluid … .m-10--fluid |
magic calc |
.ml-0--fluid … .ml-10--fluid |
magic calc |
.mr-0--fluid … .mr-10--fluid |
magic calc |
.mt-0--fluid … .mt-10--fluid |
magic calc |
.mb-0--fluid … .mb-10--fluid |
magic calc |
.mx-0--fluid … .mx-10--fluid |
magic calc |
.my-0--fluid … .my-10--fluid |
magic calc |
.-m-0--fluid … .-m-10--fluid |
magic calc |
.-ml-0--fluid … .-ml-10--fluid |
magic calc |
.-mr-0--fluid … .-mr-10--fluid |
magic calc |
.-mt-0--fluid … .-mt-10--fluid |
magic calc |
.-mb-0--fluid … .-mb-10--fluid |
magic calc |
.-mx-0--fluid … .-mx-10--fluid |
magic calc |
.-my-0--fluid … .-my-10--fluid |
magic calc |