Utility Classes

Available classes for Padding


<!-- p indicates padding -->
<div class="p0"></div>
<div class="p5"></div>
<div class="p10"></div>
<div class="p15"></div>
<div class="p20"></div>
<div class="p25"></div>
<div class="p30"></div>

<!-- pr indicates padding-right -->
<div class="pr5"></div>
<div class="pr10"></div>
<div class="pr15"></div>
<div class="pr20"></div>
<div class="pr50"></div>

<!-- pl indicates padding-left -->
<div class="pl5"></div>
<div class="pl10"></div>
<div class="pl15"></div>
<div class="pl20"></div>
<div class="pl50"></div>

<!-- pt indicates padding-top -->
<div class="pt5"></div>
<div class="pt10"></div>
<div class="pt15"></div>
<div class="pt20"></div>
<div class="pt50"></div>

<!-- pb indicates padding-bottom -->
<div class="pb5"></div>
<div class="pb10"></div>
<div class="pb15"></div>
<div class="pb20"></div>
<div class="pb50"></div>

<div class="p0020"></div>  <!-- p0020 indicates padding-top:00px;padding-bottom:20px -->
<div class="p2000"></div>  <!-- p2000 indicates padding-top:20px;padding-bottom:00px -->
<div class="p2020"></div>  <!-- p2020 indicates padding-top:20px;padding-bottom:20px -->
<div class="p2040"></div>  <!-- p2040 indicates padding-top:20px;padding-bottom:40px -->

<div class="p0030"></div>  <!-- p0030 indicates padding-top:00px;padding-bottom:30px -->
<div class="p3000"></div>  <!-- p3000 indicates padding-top:30px;padding-bottom:00px -->
<div class="p3030"></div>  <!-- p3030 indicates padding-top:30px;padding-bottom:30px -->
<div class="p3060"></div>  <!-- p3060 indicates padding-top:30px;padding-bottom:60px -->
<div class="p3090"></div>  <!-- p3090 indicates padding-top:30px;padding-bottom:90px -->

<div class="p0040"></div>  <!-- p0040 indicates padding-top:00px;padding-bottom:40px -->
<div class="p4000"></div>  <!-- p4000 indicates padding-top:40px;padding-bottom:00px -->
<div class="p4020"></div>  <!-- p4020 indicates padding-top:40px;padding-bottom:20px -->
<div class="p4040"></div>  <!-- p4040 indicates padding-top:40px;padding-bottom:40px -->

<div class="p0060"></div>  <!-- p0060 indicates padding-top:00px;padding-bottom:60px -->
<div class="p6000"></div>  <!-- p6000 indicates padding-top:60px;padding-bottom:00px -->
<div class="p6030"></div>  <!-- p6030 indicates padding-top:60px;padding-bottom:30px -->
<div class="p6060"></div>  <!-- p6060 indicates padding-top:60px;padding-bottom:60px -->
<div class="p6090"></div>  <!-- p6090 indicates padding-top:60px;padding-bottom:90px -->

<div class="p0090"></div>  <!-- p0090 indicates padding-top:00px;padding-bottom:90px -->
<div class="p9000"></div>  <!-- p9000 indicates padding-top:90px;padding-bottom:00px -->
<div class="p9060"></div>  <!-- p9060 indicates padding-top:90px;padding-bottom:60px -->
<div class="p9090"></div>  <!-- p9090 indicates padding-top:90px;padding-bottom:90px -->


<!-- p indicates padding -->
<div class="p0"></div>
<div class="p5"></div>
<div class="p10"></div>
<div class="p15"></div>
<div class="p20"></div>
<div class="p25"></div>
<div class="p30"></div>

<!-- pr indicates padding-right -->
<div class="pr5"></div>
<div class="pr10"></div>
<div class="pr15"></div>
<div class="pr20"></div>
<div class="pr50"></div>

<!-- pl indicates padding-left -->
<div class="pl5"></div>
<div class="pl10"></div>
<div class="pl15"></div>
<div class="pl20"></div>
<div class="pl50"></div>

<!-- pt indicates padding-top -->
<div class="pt5"></div>
<div class="pt10"></div>
<div class="pt15"></div>
<div class="pt20"></div>
<div class="pt50"></div>

<!-- pb indicates padding-bottom -->
<div class="pb5"></div>
<div class="pb10"></div>
<div class="pb15"></div>
<div class="pb20"></div>
<div class="pb50"></div>

<div class="p0020"></div>  <!-- p0020 indicates padding-top:00px;padding-bottom:20px -->
<div class="p2000"></div>  <!-- p2000 indicates padding-top:20px;padding-bottom:00px -->
<div class="p2020"></div>  <!-- p2020 indicates padding-top:20px;padding-bottom:20px -->
<div class="p2040"></div>  <!-- p2040 indicates padding-top:20px;padding-bottom:40px -->

<div class="p0030"></div>  <!-- p0030 indicates padding-top:00px;padding-bottom:30px -->
<div class="p3000"></div>  <!-- p3000 indicates padding-top:30px;padding-bottom:00px -->
<div class="p3030"></div>  <!-- p3030 indicates padding-top:30px;padding-bottom:30px -->
<div class="p3060"></div>  <!-- p3060 indicates padding-top:30px;padding-bottom:60px -->
<div class="p3090"></div>  <!-- p3090 indicates padding-top:30px;padding-bottom:90px -->

<div class="p0040"></div>  <!-- p0040 indicates padding-top:00px;padding-bottom:40px -->
<div class="p4000"></div>  <!-- p4000 indicates padding-top:40px;padding-bottom:00px -->
<div class="p4020"></div>  <!-- p4020 indicates padding-top:40px;padding-bottom:20px -->
<div class="p4040"></div>  <!-- p4040 indicates padding-top:40px;padding-bottom:40px -->

<div class="p0060"></div>  <!-- p0060 indicates padding-top:00px;padding-bottom:60px -->
<div class="p6000"></div>  <!-- p6000 indicates padding-top:60px;padding-bottom:00px -->
<div class="p6030"></div>  <!-- p6030 indicates padding-top:60px;padding-bottom:30px -->
<div class="p6060"></div>  <!-- p6060 indicates padding-top:60px;padding-bottom:60px -->
<div class="p6090"></div>  <!-- p6090 indicates padding-top:60px;padding-bottom:90px -->

<div class="p0090"></div>  <!-- p0090 indicates padding-top:00px;padding-bottom:90px -->
<div class="p9000"></div>  <!-- p9000 indicates padding-top:90px;padding-bottom:00px -->
<div class="p9060"></div>  <!-- p9060 indicates padding-top:90px;padding-bottom:60px -->
<div class="p9090"></div>  <!-- p9090 indicates padding-top:90px;padding-bottom:90px -->

Available classes for Margin


<!-- m indicates margin -->
<div class="m0"></div>
<div class="m5"></div>
<div class="m10"></div>
<div class="m15"></div>
<div class="m20"></div>
<div class="m25"></div>
<div class="m30"></div>

<!-- mr indicates margin-right -->
<div class="mr5"></div>
<div class="mr10"></div>
<div class="mr15"></div>
<div class="mr20"></div>
<div class="mr50"></div>

<!-- ml indicates margin-left -->
<div class="ml5"></div>
<div class="ml10"></div>
<div class="ml15"></div>
<div class="ml20"></div>
<div class="ml50"></div>

<!-- mt indicates margin-top -->
<div class="mt5"></div>
<div class="mt10"></div>
<div class="mt15"></div>
<div class="mt20"></div>
<div class="mt50"></div>

<!-- mb indicates margin-bottom -->
<div class="mb5"></div>
<div class="mb10"></div>
<div class="mb15"></div>
<div class="mb20"></div>
<div class="mb50"></div>

<div class="m0020"></div>  <!-- m0020 indicates margin-top:00px;margin-bottom:20px -->
<div class="m2000"></div>  <!-- m2000 indicates margin-top:20px;margin-bottom:00px -->
<div class="m2020"></div>  <!-- m2020 indicates margin-top:20px;margin-bottom:20px -->
<div class="m2040"></div>  <!-- m2040 indicates margin-top:20px;margin-bottom:40px -->

<div class="m3000"></div>  <!-- m3000 indicates margin-top:30px;margin-bottom:00px -->
<div class="m0030"></div>  <!-- m0030 indicates margin-top:00px;margin-bottom:30px -->
<div class="m3030"></div>  <!-- m3030 indicates margin-top:30px;margin-bottom:30px -->
<div class="m3060"></div>  <!-- m3060 indicates margin-top:30px;margin-bottom:60px -->

<div class="m0040"></div>  <!-- m0040 indicates margin-top:00px;margin-bottom:40px -->
<div class="m4000"></div>  <!-- m4000 indicates margin-top:40px;margin-bottom:00px -->
<div class="m4040"></div>  <!-- m4040 indicates margin-top:40px;margin-bottom:40px -->
<div class="m4020"></div>  <!-- m4020 indicates margin-top:40px;margin-bottom:20px -->

<div class="m0060"></div>  <!-- m0060 indicates margin-top:00px;margin-bottom:60px -->
<div class="m6000"></div>  <!-- m6000 indicates margin-top:60px;margin-bottom:00px -->
<div class="m6030"></div>  <!-- m6030 indicates margin-top:60px;margin-bottom:30px -->
<div class="m6060"></div>  <!-- m6060 indicates margin-top:60px;margin-bottom:60px -->


<!-- m indicates margin -->
<div class="m0"></div>
<div class="m5"></div>
<div class="m10"></div>
<div class="m15"></div>
<div class="m20"></div>
<div class="m25"></div>
<div class="m30"></div>

<!-- mr indicates margin-right -->
<div class="mr5"></div>
<div class="mr10"></div>
<div class="mr15"></div>
<div class="mr20"></div>
<div class="mr50"></div>

<!-- ml indicates margin-left -->
<div class="ml5"></div>
<div class="ml10"></div>
<div class="ml15"></div>
<div class="ml20"></div>
<div class="ml50"></div>

<!-- mt indicates margin-top -->
<div class="mt5"></div>
<div class="mt10"></div>
<div class="mt15"></div>
<div class="mt20"></div>
<div class="mt50"></div>

<!-- mb indicates margin-bottom -->
<div class="mb5"></div>
<div class="mb10"></div>
<div class="mb15"></div>
<div class="mb20"></div>
<div class="mb50"></div>

<div class="m0020"></div>  <!-- m0020 indicates margin-top:00px;margin-bottom:20px -->
<div class="m2000"></div>  <!-- m2000 indicates margin-top:20px;margin-bottom:00px -->
<div class="m2020"></div>  <!-- m2020 indicates margin-top:20px;margin-bottom:20px -->
<div class="m2040"></div>  <!-- m2040 indicates margin-top:20px;margin-bottom:40px -->

<div class="m3000"></div>  <!-- m3000 indicates margin-top:30px;margin-bottom:00px -->
<div class="m0030"></div>  <!-- m0030 indicates margin-top:00px;margin-bottom:30px -->
<div class="m3030"></div>  <!-- m3030 indicates margin-top:30px;margin-bottom:30px -->
<div class="m3060"></div>  <!-- m3060 indicates margin-top:30px;margin-bottom:60px -->

<div class="m0040"></div>  <!-- m0040 indicates margin-top:00px;margin-bottom:40px -->
<div class="m4000"></div>  <!-- m4000 indicates margin-top:40px;margin-bottom:00px -->
<div class="m4040"></div>  <!-- m4040 indicates margin-top:40px;margin-bottom:40px -->
<div class="m4020"></div>  <!-- m4020 indicates margin-top:40px;margin-bottom:20px -->

<div class="m0060"></div>  <!-- m0060 indicates margin-top:00px;margin-bottom:60px -->
<div class="m6000"></div>  <!-- m6000 indicates margin-top:60px;margin-bottom:00px -->
<div class="m6030"></div>  <!-- m6030 indicates margin-top:60px;margin-bottom:30px -->
<div class="m6060"></div>  <!-- m6060 indicates margin-top:60px;margin-bottom:60px -->

Flex Justify Content Between


<div class="flex flexJustifyBetween">
    <button class="btn primary">Button 1</button>
    <button class="btn primary">Button 2</button>
</div>

Flex Justify Content Around


<div class="flex flexJustifyAround">
    <button class="btn primary">Button 1</button>
    <button class="btn primary">Button 2</button>
</div>

Flex Justify Content Start


<div class="flex flexJustifyStart">
    <button class="btn primary">Button 1</button>
    <button class="btn primary">Button 2</button>
</div>

Flex Justify Content End


<div class="flex flexJustifyEnd">
    <button class="btn primary">Button 1</button>
    <button class="btn primary">Button 2</button>
</div>

Flex Justify Content Center


<div class="flex flexJustifyCenter">
    <button class="btn primary">Button 1</button>
    <button class="btn primary">Button 2</button>
</div>

Flex Align Items Center

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.

Flex 1


<div class="flex flexAlignItemsCenter">
    <div class="flex1">
        <p>...</p>
    </div>
    <div class="flex1">Flex 1</div>
</div>

Flex Align Items Baseline

Flex 1


<div class="flex flexAlignItemsBaseline">
    <div class="flex1">
        <p>...</p>
    </div>
    <div class="flex1">Flex 1</div>
</div>

Flex Align Items Start

Flex 1


<div class="flex flexAlignItemsStart">
    <div class="flex1">
        <p>...</p>
    </div>
    <div class="flex1">Flex 1</div>
</div>

Flex Align Items End

Flex 1


<div class="flex flexAlignItemsEnd">
    <div class="flex1">
        <p>...</p>
    </div>
    <div class="flex1">Flex 1</div>
</div>

Flex Align Items Strecth

Flex 1


<div class="flex flexAlignItemsEnd">
    <div class="flex1">
        <p>...</p>
    </div>
    <div class="flex1">Flex 1</div>
</div>

FlexWrap

Flex 1


<div class="flex flexWrap">
    <div class="flex1">Flex 1</div>
    <div class="flex1">Flex 1</div>
    <div class="flex1">Flex 1</div>
    <div class="flex1">Flex 1</div>
    <div class="flex1">Flex 1</div>
    <div class="flex1">Flex 1</div>
    <div class="flex1">Flex 1</div>
    <div class="flex1">Flex 1</div>
    <div class="flex1">Flex 1</div>
    <div class="flex1">Flex 1</div>
    <div class="flex1">Flex 1</div>
    <div class="flex1">Flex 1</div>
</div>