:: HexaBit :: Helper Class

Please wait...

###### Choose Theme

###### General Settings

- Report Panel Usag
- Email Redirect
- Notifications
- Auto Updates

###### Account Settings

- Offline
- Location Permission
- Notifications

###### Recent

- Ava Alexander Just now Lorem ipsum Veniam aliquip culpa laboris minim tempor
- Debra Stewart 38min ago Many desktop publishing packages and web page editors
- Susie Willis 2hr ago Contrary to belief, Lorem Ipsum is not simply random text
- Folisise Chosielie 2hr ago There are many of passages of available, but the majority
- Marshall Nichols 1day ago It is a long fact that a reader will be distracted

## Helper Class

Create New

## Float Classes

Class | Description
--- | ---
`.float-left` | Element to the left (float:left).
`.float-right` | Element to the right(float:right).
`.clearfix` | To Clear floats.(clreafix)

Class | Description
--- | ---
`.displayblock` | Element to Show (display: block)
`.displaynone` | Element to hide (display: none)

## Text Align You can use classes which names are `.align-left, .align-center, .align-right, .align-justify`

Align Left

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Align Center

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Align Right

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Align Justify

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

## Margin Padding Spaces You can use classes which names are `.m-t-10, .m-t--10, .m-r-5, .p-t-10, .p-b-5`

Margins

Margin Top 10px → `.m-t-10`
Margin Top 0px → `.m-t-0`
Margin Top -10px → `.m-t--10`
Margin Left 35px → `.m-l-35`
Margin Left 0px → `.m-l-0`
Margin Left -35px → `.m-l--35`
Margin Bottom 15px → `.m-b-15`
Margin Bottom 0px → `.m-b-0`
Margin Bottom -20px → `.m-b--20`
Margin Right 30px → `.m-r-30`
Margin Right 0px → `.m-r-0`
Margin Right -30px → `.m-r--30`
ALL Margin 0px → `.margin-0`

Paddings

Padding Top 10px → `.p-t-10`
Padding Top 0px → `.p-t-0`
Padding Left 35px → `.p-l-35`
Padding Left 0px → `.p-l-0`
Padding Bottom 15px → `.p-b-15`
Padding Bottom 0px → `.p-b-0`
Padding Right 30px → `.p-r-30`
Padding Right 0px → `.p-r-0`
ALL Padding 0px → `.padding-0`

## Grid options

| Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | Extra large ≥1200px
--- | --- | --- | --- | --- | ---
Max container width | None (auto) | 540px | 720px | 960px | 1140px
Class prefix | `.col-` | `.col-sm-` | `.col-md-` | `.col-lg-` | `.col-xl-`
# of columns | 12
Gutter width | 30px (15px on each side of a column)
Nestable | Yes
Column ordering | Yes

## Image Radious

    <imgsrc="..."alt="..."class="rounded">
    <imgsrc="..."alt="..."class="rounded-top">
    <imgsrc="..."alt="..."class="rounded-right">
    <imgsrc="..."alt="..."class="rounded-bottom">
    <imgsrc="..."alt="..."class="rounded-left">
    <imgsrc="..."alt="..."class="rounded-circle">
    <imgsrc="..."alt="..."class="rounded-0">

## Border Color

    <spanclass="border border-primary"></span>
    <spanclass="border border-secondary"></span>
    <spanclass="border border-success"></span>
    <spanclass="border border-danger"></span>
    <spanclass="border border-warning"></span>
    <spanclass="border border-info"></span>
    <spanclass="border border-light"></span>
    <spanclass="border border-dark"></span>
    <spanclass="border border-white"></span>