Helper Classes of this template
There are some helper classes included in this template.
| Class | Descriptions |
|---|---|
| Images | |
.img-fluid |
Responsive image |
.img-thumbnail |
Thumbnail image |
| Border | |
.border |
Apply border around element |
.border-*(top, right, etc...) |
Apply border particular side on element. like: top, right, bottom, and left |
.border-0 |
Remove border around element |
.border-*(top, right, etc...)-0 |
Remove border particular side on element. like: top, right, bottom, and left |
.border-*(primary, secondary, etc..) |
Apply border color |
| Border Radius | |
.rounded |
Apply border radius on element |
.rounded-*(top, right, etc...) |
Apply border radius particular side on element. like: top, right, bottom, and left |
.rounded-circle |
This class make circle on any element |
.rounded-pill |
Apply border radius pill on element |
.rounded-0 |
Remove border radius on element |
.rounded-sm |
Apply small border radius on element |
.rounded-lg |
Apply large border radius on element |
| Display Property | |
.d-*(none, inline, etc...) |
Display classes are available in all the display properties like: none, inline, inline-block, block, table, table-cell, table-row, flex, and inline-flex. These Classes are available in break point also like: sm, md, lg, and xl for example .d-{breakopint}-{value} |
| Embeds | |
.embed-responsive |
Using this class rules are directly applied to <iframe>, <object>, <embed>, and <video> |
.embed-responsive-*(21by9, 16by9, etc...) |
Set aspect ratios using these classes like: 21by9, 16by9, 4by3, and 1by1 |
| Flex | |
.flex-*(row, column, etc...) |
Flex classes are available in all the flex properties like: row, row-reverse, column, column-reverse, fill, nowrap, wrap, and wrap-reverse. These Classes are available in break point also like: sm, md, lg, and xl for example .flex-{breakopint}-{value} |
.flex-*(grow, shrink) |
Using these classes set flex property to element like: grow and row-shrink. Two variety of these classes are 0 and 1 These Classes are available in break point also like: sm, md, lg, and xl for example .flex-{grow|shrink}-{0|1} |
.justify-content-*(start, end, etc...) |
Using these classes justify content of flex element like: start, end, center, between, and around. These Classes are available in break point also like: sm, md, lg, and xl for example .justify-content-{breakopint}-{value} |
.align-content-*(start, end, etc...) |
Using these classes align content of flex element like: start, end, center, between, and around. These Classes are available in break point also like: sm, md, lg, and xl for example .align-content-{breakopint}-{value} |
.align-items-*(start, end, etc...) |
Using these classes set align items of flex element like: start, end, center, baseline, and stretch. These Classes are available in break point also like: sm, md, lg, and xl for example .align-items-{breakopint}-{value} |
.align-self-*(start, end, etc...) |
Using these classes set align self of flex element like: start, end, center, baseline, and stretch. These Classes are available in break point also like: sm, md, lg, and xl for example .align-self-{breakopint}-{value} |
.order-*(0, 1, etc...) |
Using these classes set order of flex element, classes are available 0 to 12. These Classes are available in break point also like: sm, md, lg, and xl for example .order-{breakopint}-{value} |
| Float | |
.float-*(left, right, etc...) |
Using these classes you can set float properties like: left, right, and none. These Classes are available in break point also like: sm, md, lg, and xl for example .float-{breakopint}-{value} |
| Position Property | |
.position-*(sticky, relative, etc...) |
Position classes are available in all the Position properties like: static, relative, absolute, fixed, and sticky. |
| Shadows | |
.shadow |
Using this class you can set shadow on element. |
.shadow-*(none, sm, etc...) |
Using these classes you can set shadow on element like: none, sm, and lg. |
| Sizing | |
.w-*(25, 50, etc...) |
Using these classes you can set width to element like: 25, 50, 75, 100, and auto. |
.h-*(25, 50, etc...) |
Using these classes you can set height to element like: 25, 50, 75, 100, and auto. |