Bootstrap5 Utilities

Bootstrap 5 provides many useful classes to help us quickly achieve effects without rewriting some CSS code.

---

Background Colors

When setting the background color of different elements, you need to use the.text-*class to set the matching text color:

.bg-gradientThe class can set the background color gradient effect:

---

Borders

We can use theborderrelated classes to display borders as needed:

.border-1to.border-5The class is used to set the width of the border line:

The following sets different colors for the border:

roundedThe related classes are used to set rounded corners:

rounded-0torounded-3The class is used to set the size of the rounded corners:

---

Float and Clearfix

Elements float to the right using the .float-end class, to the left using the .float-start class, and the .clearfix class is used to clear floats:

You can also set the float effect based on screen size (.float-*-left|right - * means sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) or xxl (>=1400px)):

---

Center Alignment

Use the.mx-autoclass to set the element to center alignment (add margin-left and margin-right as auto):

---

Width and Height

Width uses thew-* (.w-25, .w-50, .w-75, .w-100, .mw-auto, .mw-100)class to set.

Height uses theh-* (.h-25, .h-50, .h-75, .h-100, .mh-auto, .mh-100)class to set.

---

Spacing

The spacing setting syntax is as follows:

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

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

propertyRepresents the property, including:

• mUsed to setmargin
• pUsed to setpadding

sidesMainly refers to direction:

• tUsed to setmargin-toporpadding-top
• bUsed to setmargin-bottomorpadding-bottom
• sUsed to setmargin-leftorpadding-left
• eUsed to setmargin-rightorpadding-right
• xUsed to set*-leftand*-right
• yUsed to set*-topand*-bottom
• blank - Used to set the element's four directionsmarginorpadding

sizeRefers to the size of the margin:

• 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

Look at 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 for all sides	Try it
.mt-# / mt-*-#	margin top	Try it
.mb-# / mb-*-#	margin bottom	Try it
.ms-# / ms-*-#	margin left	Try it
.me-# / me-*-#	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
.ps-# / ps-*-#	padding left	Try it
.pe-# / pe-*-#	padding right	Try it
.py-# / py-*-#	padding top and bottom	Try it
.px-# / px-*-#	padding left and right	Try it

Other extensions