Helper Classes
Float Classes
| Class | Description |
|---|---|
.float-left |
Element to the left (float:left). |
.float-end |
Element to the right(float:right). |
.float-none |
Clear float.(float-none) |
.float-*-* |
Responsive Classes float-*: * -- xl, lg, md, sm, xs float-*-*: * -- none, left, right e.g.
float-lg-right |
.clearfix |
To clear floated content within a container by adding a clearfix utility |
Text Color Classes
| Class | Description |
|---|---|
.text-muted |
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. |
.text-primary |
Nullam id dolor id nibh ultricies vehicula ut id elit. |
.text-success |
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. |
.text-info |
Nullam id dolor id nibh ultricies vehicula ut id elit. |
.text-warning |
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. |
.text-danger |
Nullam id dolor id nibh ultricies vehicula ut id elit. |
General Classes
| Class | Description |
|---|---|
.text-break |
Tobreaktextusethisclass(text:break).howtobreakthetext..howtobreakthetext.
|
.text-truncate |
To add ellipsis use this class
(text:truncate). To show
|
.text-decoration-none |
Non-underlined link (text:decoration-none).
|
Text Alignment
| Class | Description |
|---|---|
.text-left |
Element to the left (text:left). |
.text-end |
Element to the right(text:right).
|
.text-center |
Center Element (text:center).
|
.text-*-* |
Responsive Classes text-*: * -- xl, lg, md, sm, xs text-*-*: * -- none, left, right e.g.
text-lg-right |
Text Transformation
| Class | Description |
|---|---|
.text-lowercase |
To lowercase text (text:lowercase).
|
.text-uppercase |
To uppercase text (text:uppercase).
|
.text-capitalize |
To capitalize text (text:capitalize).
|
.text-*-* |
Responsive Classes text-*: * -- xl, lg, md, sm, xs text-*-*: * -- none, left, right e.g.
text-lg-right |
Font Weight
| Class | Description |
|---|---|
.font-weight-light |
Font weight will be light (300). |
.font-weight-lighter |
Font weight will be lighter (100). |
.font-weight-normal |
Font weight will be normal |
.fw-bold |
Font weight will be bold (700) |
.fw-bolder |
Font weight will be bolder (900) |
.font-italic |
To italic text |
Display Classes
| Class | Description |
|---|---|
.d-none |
To hide element (d:none)
|
.d-inline |
To inline element (d:inline) |
.d-inline-block |
To inline element (d:inline-block) |
.d-block |
To show element (d:block)
|
.d-flex |
To flex element (d:flex)
|
.d-inline-flex |
To flex element (d:inline-flex)
|
.d-table |
To create block as table (d:table) |
.d-table-cell |
To display element as cell (d:table-cell) |
.d-table-row |
To display element as row (d:table-row) |
.d-*-* |
Responsive Classes d-*: * -- xl, lg, md, sm, xs d-*-*: * -- none, block, flex, inline-flex, inline-block, inline, table, table-row, table-cell
e.g. d-lg-none |
Justify and align items Classes
| Class | Description |
|---|---|
.justify-content-start |
To left element (justify:content-start)
|
.justify-content-end |
To right element (justify:content-end)
|
.justify-content-center |
To center element (justify:content-center)
|
.justify-content-between |
To equally divide spacing
(justify:content-between)
|
.justify-content-around |
To give some spacing around element
(justify:content-around)
|
.align-items-start |
To Top element
(align:items-start)
|
.align-items-end |
To Bottom element
(align:items-end)
|
.align-items-center |
To center element
(align:items-center)
|
.align-items-between |
To equally divide
spacing (align:items-baseline)
|
.align-items-around |
To give some spacing
around element (align:items-stretch)
|
.justify-content-*-* .align-items-*-* |
Responsive Classes justify-content-*: * -- xl, lg, md, sm, xs
justify-content-*-*: * -- start, end, center, between, around
e.g. justify-content-lg-end
align-items-*-*: * -- start, end, center, baseline, stretch
e.g. align-items-lg-end
|
Padding Classes
| Class | Description |
|---|---|
1rem |
1rem = 14px. |
.p-0 |
Padding will be 0px from all side. |
.p-1 |
Padding will be 0.25rem from all side. |
.p-2 |
Padding will be 0.5rem from all side. |
.p-3 |
Padding will be 1rem from all side. |
.p-4 |
Padding will be 1.5rem from all side. |
.p-5 |
Padding will be 3rem from all side. |
.p-*-* |
Responsive Classes p-*: * -- xl, lg, md, sm, xs p-*-*: * -- 0, 1, 2, 3, 4, 5 e.g.
p-lg-4 |
Margin Classes
| Class | Description |
|---|---|
1rem |
1rem = 14px. |
.m-0 |
margin will be 0px from all side. |
.m-1 |
margin will be 0.25rem from all side. |
.m-2 |
margin will be 0.5rem from all side. |
.m-3 |
margin will be 1rem from all side. |
.m-4 |
margin will be 1.5rem from all side. |
.m-5 |
margin will be 3rem from all side. |
.m-*-* |
Responsive Classes m-*: * -- xl, lg, md, sm, xs m-*-*: * -- 0, 1, 2, 3, 4, 5 e.g.
m-lg-4 |
Vertical Align
| Class | Description |
|---|---|
.align-baseline |
Element - vertical align text at baseline. |
.align-top |
Element - vertical align text at top. |
.align-middle |
Element - vertical align text at middle. |
.align-bottom |
Element - vertical align text at bottom. |
.align-text-top |
Element - vvertical align text at text top. |
.align-text-bottom |
Element - vertical align text at text bottom. |
Border Classes
| Class | Description |
|---|---|
.border |
All side border
|
.border-* |
Border at top
|
.border-right |
Border at right
|
.border-bottom |
Border at bottom
|
.border-left |
Border at left
|
.border .border-primary |
border-* Primary, Secondary, info, warning, danger, success, light, dark
Border Primary
|
Background Colors
| Class | Description |
|---|---|
.bg-primary |
|
.bg-secondary |
|
.bg-warning |
|
.bg-info |
|
.bg-danger |
|
.bg-success |
|
.bg-light |
|
.bg-dark |
Image Radius
| Class | Description |
|---|---|
.rounded |
 |
.rounded-top |
|
.rounded-right |
|
.rounded-bottom |
|
.rounded-left |
|
.rounded-circle |
|
.rounded-0 |
|
Avatars
| Class | Description |
|---|---|
.avatar |
|
.avatar .avatar-xs, .avatar .avatar-sm,
.avatar .avatar-md, .avatar .avatar-lg,
.avatar .avatar-xl |
|
Name .avatar |
AG
|
Name .avatar .avatar-xs,
.avatar .avatar-sm, .avatar .avatar-md,
.avatar .avatar-lg, .avatar .avatar-xl |
AG
AG
AG
AG
AG
|
| Extra small devices Portrait phones (<576px) | Small devices Landscape phones (≥576px - <768px) | Medium devices Tablets (≥768px - <992px) | Large devices Desktops (≥992px - <1200px) | Extra large devices Desktops (≥1200px) | |
|---|---|---|---|---|---|
.d-xs-block .d-none |
visible | hidden | hidden | hidden | hidden |
.d-sm-block .d-none |
visible | visible | hidden | hidden | hidden |
.d-md-block .d-none |
visible | visible | visible | hidden | hidden |
.d-lg-block .d-none |
visible | visible | visible | visible | hidden |
.d-block |
visible | visible | visible | visible | visible |
