| Class | Description |
|---|---|
.bg-primary
|
Background color brand-primary. |
.bg-success
|
Background color brand-success. |
.bg-info
|
Background color brand-info. |
.bg-warning
|
Background color brand-warning. |
.bg-danger
|
Background color brand-danger. |
.bg-secondary
|
Background color brand secondary. |
.bg-inverse
|
Background color dark gray and text color white. |
.bg-light
|
Background color light gray. |
.bg-reverse
|
Background color white and text color gray. |
| 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. |
| Class | Description |
|---|---|
.base-lighter
|
Gray lighter color text. |
.base-light
|
Gray light color text. |
.gray
|
Gray color text. |
.base-dark
|
Gray dark color text. |
.white-text
|
White color text. |
.base-reverse-all
|
Change text color to white for all elements inside. |
.base-secondary
|
Brand secondary color text. |
.golden
|
Golden color text. |
.pink-text
|
Pink color text. |
.purple-text
|
Purple color text. |
.yellow-text
|
Yellow color text. |
.black-text
|
Black color text. |
| Class | Description |
|---|---|
.border-all
|
1px gray light border from all sides. |
.border-l
|
1px gray light border from left. |
.border-r
|
1px gray light border from right. |
.border-t
|
1px gray light border from top. |
.border-b
|
1px gray light border from bottom. |
.no-radius
|
Border radius 0px. |
.border-rad-xs
|
Border radius 5px. |
.border-rad-sm
|
Border radius 10px. |
.circle
|
Border radius 100%. |
| Class | Description |
|---|---|
.display-b
|
Display block. |
.display-ib
|
Display inline-block. |
.hide
|
Hide element (display:none). |
.hide-lg
|
Hide element on large devices. |
.hide-md
|
Hide element on medium devices. |
.hide-sm
|
Hide element on small devices. |
.hide-xs
|
Hide element below 568px. |
| Class | Description |
|---|---|
.pos-relative
|
Position relative. |
.pos-absolute
|
Position absolute |
.pos-fixed
|
Position fixed. |
.top-0
|
Top position 0px. |
.bottom-0
|
Bottom position 0px. |
.left-0
|
Left position 0px. |
.right-0
|
Right position 0px. |
| Class | Description |
|---|---|
.pull-left
|
Element to the left (float:left). |
.pull-right
|
Element to the right(float:right). |
.clearfix
|
To Clear floats.(clreafix) |
| Class | Description |
|---|---|
.show
|
Element to Show (display: block) |
.hidden
|
Element to hide (display: none) |
| Class | Description |
|---|---|
.align-baseline
|
Vertical align baseline. |
.align-top
|
Vertical align top. |
.align-middle
|
Vertical align middle. |
.align-bottom
|
Vertical align bottom. |
.align-text-top
|
Vertical align text top. |
.align-text-bottom
|
Vertical align text bottom. |
| Class | Description |
|---|---|
.font-xs
|
Font size $font-size-xs (set value of $font-size-xs variable in bootstrap variables). |
.font-sm
|
Font size $font-size-sm (set value of $font-size-sm variable in bootstrap variables). |
.font-md
|
Font size $font-size-base (set value of $font-size-base variable in bootstrap variables). |
.font-lg
|
Font size $font-size-lg (set value of $font-size-lg variable in bootstrap variables). |
.font-xl
|
Font size $font-size-lg + 0.13rem. |
.font-2x
|
Font size 2rem. |
.font-3x
|
Font size 3rem. |
.font-4x
|
Font size 4rem. |
.font-5x
|
Font size 5rem. |
| Class | Description |
|---|---|
.fw-bold
|
Font weight 700. |
.fw-light
|
Font weight 300. |
.fw-normal
|
Font weight 400. |
.fw-medium
|
Font weight 500. |
.fw-semibold
|
Font weight 600. |
| Class | Description |
|---|---|
.pad-all-none
|
Padding will be 0px from all side. |
.pad-all-xs
|
Padding will be 10px from all side. |
.pad-all-sm
|
Padding will be 15px from all side. |
.pad-all-md
|
Padding will be 20px from all side. |
.pad-all-md
|
Padding will be 30px from all side. |
| Class | Description |
|---|---|
.mrgn-all-none
|
Margin will be 0px from all side. |
.mrgn-all-xs
|
Margin will be 10px from all side. |
.mrgn-all-sm
|
Margin will be 15px from all side. |
.mrgn-all-md
|
Margin will be 20px from all side. |
.mrgn-all-md
|
Margin will be 30px from all side. |
| Class | Description |
|---|---|
.pad-l-none
|
Padding Left will be 0px. |
.pad-l-xs
|
Padding Left will be 10px. |
.pad-l-sm
|
Padding Left will be 15px. |
.pad-l-md
|
Padding Left will be 20px. |
.pad-l-lg
|
Padding Left will be 30px. |
| Class | Description |
|---|---|
.pad-r-none
|
Padding right will be 0px. |
.pad-r-xs
|
Padding right will be 10px. |
.pad-r-sm
|
Padding right will be 15px. |
.pad-r-md
|
Padding right will be 20px. |
.pad-r-lg
|
Padding right will be 30px. |
| Class | Description |
|---|---|
.pad-t-none
|
Padding top will be 0px. |
.pad-t-xs
|
Padding top will be 10px. |
.pad-t-sm
|
Padding top will be 15px. |
.pad-t-md
|
Padding top will be 20px. |
.pad-t-lg
|
Padding top will be 30px. |
| Class | Description |
|---|---|
.pad-b-none
|
Padding bottom will be 0px. |
.pad-b-xs
|
Padding bottom will be 10px. |
.pad-b-sm
|
Padding bottom will be 15px. |
.pad-b-md
|
Padding bottom will be 20px. |
.pad-b-lg
|
Padding bottom will be 30px. |
| Class | Description |
|---|---|
.mrgn-l-none
|
Margin Left will be 0px. |
.mrgn-l-xs
|
Margin Left will be 10px. |
.mrgn-l-sm
|
Margin Left will be 15px. |
.mrgn-l-md
|
Margin Left will be 20px. |
.mar-l-lg
|
Margin Left will be 30px. |
| Class | Description |
|---|---|
.mrgn-r-none
|
Margin right will be 0px. |
.mrgn-r-xs
|
Margin right will be 10px. |
.mrgn-r-sm
|
Margin right will be 15px. |
.mrgn-r-md
|
Margin right will be 20px. |
.mrgn-r-lg
|
Margin right will be 30px. |
| Class | Description |
|---|---|
.mrgn-t-none
|
Margin top will be 0px. |
.mrgn-t-xs
|
Margin top will be 10px. |
.mrgn-t-sm
|
Margin top will be 15px. |
.mrgn-t-md
|
Margin top will be 20px. |
.mrgn-t-lg
|
Margin top will be 30px. |
| Class | Description |
|---|---|
.mrgn-b-none
|
Margin bottom will be 0px. |
.mrgn-b-xs
|
Margin bottom will be 10px. |
.mrgn-b-sm
|
Margin bottom will be 15px. |
.mrgn-b-md
|
Margin bottom will be 20px. |
.mrgn-b-lg
|
Margin bottom will be 30px. |
| Class | Description |
|---|---|
.square-85
|
Block with width 85px and height 85px. |
.square-50
|
Block with width 50px and height 50px. |