Helper Classes
Text Style You can use classes which names are .fw-bold, .font-italic, .font-underline, .font-line-through, .font-overline
Normal
Default text
Text pink color
Text cyan color
Text teal color
Text orange color
Text blue grey color
Bold
Default text
Text pink color
Text cyan color
Text teal color
Text orange color
Text blue grey color
Italic
Default text
Text pink color
Text cyan color
Text teal color
Text orange color
Text blue grey color
Underline
Default text
Text pink color
Text cyan color
Text teal color
Text orange color
Text blue grey color
Line Through
Default text
Text pink color
Text cyan color
Text teal color
Text orange color
Text blue grey color
Overline
Default text
Text pink color
Text cyan color
Text teal color
Text orange color
Text blue grey color
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.
Margins
Margin Top 10px →
.mt-2 Margin Top 0px →
.mt-0 Margin Left 0px →
.ms-0 Margin Bottom 0px →
.mb-0 Margin Right 30px →
.me-4 Margin Right 0px →
.me-0 ALL Margin 0px →
.m-0 Paddings
Padding Top 10px →
.pt-2 Padding Top 0px →
.pt-0 Padding Left 0px →
.ps-0 Padding Bottom 15px →
.pb-2 Padding Bottom 0px →
.pb-0 Padding Right 30px →
.pe-4 Padding Right 0px →
.pe-0 ALL Padding 0px →
.p-0 |
Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra large ≥1200px |
Extra to large ≥1200px |
|
|---|---|---|---|---|---|---|
| Max container width | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| # of columns | 12 | |||||
| Gutter width | 1.5rem (.75rem on left and right) | |||||
| Custom gutters | Yes | |||||
| Nestable | Yes | |||||
| Column ordering | Yes | |||||
<img src="..." 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">
<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>