Bootstrap4 Utilities

Bootstrap4 provides some utilities that allow us to achieve the desired effects without writing CSS code.

---

Borders

Useborderthe class can add or remove borders:

---

Border Color

Bootstrap4 provides some classes to set the border color:

---

Border Radius

Useroundedthe class can add rounded borders:

---

Float

.float-rightthe class is used to set the element to float right,.float-leftset the element to float left,.clearfixthe class is used to clear floats:

---

Responsive Floats

We can set floats (.float-*-left|right- * can be sm, md, lg or xl) the direction depends on screen size:

---

Center Alignment

Use.mx-autoclass to set center alignment:

---

Width

Use w-* classes on elements (.w-25, .w-50, .w-75, .w-100, .mw-100) to set the width:

---

Height

Use h-* classes on elements (.h-25, .h-50, .h-75, .h-100, .mh-100) to set the height:

---

Spacing

The spacing syntax is as follows:

{property}{sides}-{size}  // 适用 xs(<=576px)
{property}{sides}-{breakpoint}-{size} // 适用 sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) 

breakpoints refer to screen widths: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px).

propertyrepresents the property, including:

• m- used to setmargin
• p- used to setpadding

sidesmainly refers to direction:

• t- used to setmargin-toporpadding-top
• b- used to setmargin-bottomorpadding-bottom
• l- used to setmargin-leftorpadding-left
• r- used to setmargin-rightorpadding-right
• x- used to set*-leftand*-right
• y- used to set*-topand*-bottom
• blank - used to set the element in four directionsmarginorpadding

sizerefers to the size of the spacing:

• 0- setmarginorpaddingis0
• 1- setmarginorpaddingis$spacer * .25
• 2- setmarginorpaddingis$spacer * .5
• 3- setmarginorpaddingis$spacer
• 4- setmarginorpaddingis$spacer * 1.5
• 5- setmarginorpaddingis$spacer * 3
• auto- setmarginto auto

marginmarginYou can set negative numbers by adding a letter before the number."n" :

• n1- Set margin to -.25rem (-4px if font-size is 16px)
• n2- Set margin to -.5rem (-8px if font-size is 16px)
• n3- Set margin to -1rem (-16px if font-size is 16px)
• n4- Set margin to -1.5rem (-24px if font-size is 16px)
• n5- Set margin to -3rem (-48px if font-size is 16px)

See the source code settings for some margins:

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

More Examples

.m-# / m-*-#	Set margins on all sides	Try it
.mt-# / mt-*-#	margin top	Try it
.mb-# / mb-*-#	margin bottom	Try it
.ml-# / ml-*-#	margin left	Try it
.mr-# / mr-*-#	margin right	Try it
.mx-# / mx-*-#	margin left and right	Try it
.my-# / my-*-#	margin top and bottom	Try it
.p-# / p-*-#	Use sides to set padding	Try it
.pt-# / pt-*-#	padding top	Try it
.pb-# / pb-*-#	padding bottom	Try it
.pl-# / pl-*-#	padding left	Try it
.pr-# / pr-*-#	padding right	Try it
.py-# / py-*-#	padding top and bottom	Try it
.px-# / px-*-#	padding left and right	Try it

Other extensions