Helper Class
Visitors
Visits
Chats
Text Align You can use classes which names are .align-left, .align-center, .align-right, .align-justify
Align Left
incididunt ut labore et dolore magna aliqua. Utonsequat. 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 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 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. aliquip excillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
| 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) |
.inlineblock |
Element to inline (display: inline-block) |
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-10Margin Top 0px →
.m-t-0Margin Top -10px →
.m-t--10Margin Left 35px →
.m-l-35Margin Left 0px →
.m-l-0Margin Left -35px →
.m-l--35Margin Bottom 15px →
.m-b-15Margin Bottom 0px →
.m-b-0Margin Bottom -20px →
.m-b--20Margin Right 30px →
.m-r-30Margin Right 0px →
.m-r-0Margin Right -30px →
.m-r--30ALL Margin 0px →
.margin-0Paddings
Padding Top 10px →
.p-t-10Padding Top 0px →
.p-t-0Padding Left 35px →
.p-l-35Padding Left 0px →
.p-l-0Padding Bottom 15px →
.p-b-15Padding Bottom 0px →
.p-b-0Padding Right 30px →
.p-r-30Padding Right 0px →
.p-r-0ALL Padding 0px →
.padding-0|
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 | ||||
<img src="..."alt="..."class="rounded">
<img src="..."alt="..."class="rounded-top">
<img src="..."alt="..."class="rounded-right">
<img src="..."alt="..."class="rounded-bottom">
<img src="..."alt="..."class="rounded-left">
<img src="..."alt="..."class="rounded-circle">
<img src="..."alt="..."class="rounded-0">
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>