Borders

Basic border

.border , .border border-0, .border border-top-0, .border border-right-0, .border border-bottom-0, .border border-left-0


.border-top, .border-right, .border-bottom, .border-left

Border colors

.border border-primary, .border border-secondary, border border-success, .border border-danger, .border border-warning, .border border-info, .border border-light, .border border-dark, .border border-white

Float

.float-left, float-right, .float-none

Float left on all viewport sizes

Float right on all viewport sizes

Don't float on all viewport sizes
Position

Bootstrap Position

  • .position-static
  • .position-relative
  • .position-absolute
  • .position-fixed
  • .position-sticky
  • .fixed-top
  • .fixed-bottom

Custom Position

.absolute-top-left, .absolute-top-right, .absolute-bottom-left, .absolute-bottom-right

for use this class, the parent class must be have .position-relative

top-left
top-right
bottom-left
bottom-right
Sizing

.w-25, .w-50, .w-75, .w-100

Width 25%
Width 50%
Width 75%
Width 100%

.h-25, .h-50, .h-75, .h-100

Height 25%
Height 50%
Height 75%
Height 100%
Margin and padding

Margins

.m-0, .m-1, .m-2, .m-3, .m-4

margin
margin
margin
margin
margin

.mt-0, .mt-1, .mt-2, .mt-3, .mt-4

margin-top
margin-top
margin-top
margin-top
margin-top

.mr-0, .mr-1, .mr-2, .mr-3, .mr-4

margin-right
margin-right
margin-right
margin-right
margin-right

.mb-0, .mb-1, .mb-2, .mb-3, .mb-4

margin-bottom
margin-bottom
margin-bottom
margin-bottom
margin-bottom

.ml-0, .ml-1, .ml-2, .ml-3, .ml-4

margin-left
margin-left
margin-left
margin-left
margin-left

.mx-0, .mx-1, .mx-2, .mx-3, .mx-4

margin-left-right
margin-left-right
margin-left-right
margin-left-right
margin-left-right

.my-0, .my-1, .my-2, .my-3, .my-4

margin-top-bottom
margin-top-bottom
margin-top-bottom
margin-top-bottom
margin-top-bottom
Click and hover
.wave
click me.
.hover-1
hover me, then click me.
.hover-2
hover me, then click me.
.hover-3
hover me.
Vertical Alignment

Choose from .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, and .align-text-top as needed.
With inline elements:

baseline top middle bottom text-top text-bottom

With table cells:

baseline top middle bottom text-top text-bottom