Bootstrap 5 utilities provide you with many useful/helper classes to style elements quickly without needing to use CSS code.

 

Border

Use classes borderto add or remove borders from an element:

Sample code:

For example:

 Bootstrap Example 

Border

Use the `border` class to add or remove borders from an element on TipsMake.com:

 

Border width

Use .border-1-5 .borderto change the width of the border:

For example:

 Bootstrap Example 

Change the border width on TipsMake.com.com

 

Border color

Color the border with any contextual border color class:

For example:

 Bootstrap Example 

Change the border color styles on TipsMake.com.com

Contour radius

Add rounded corners to an element with the class rounded:

 

For example:

 Bootstrap Example Bo tròn các góc của một phần tử bằng class rounded để khoanh tròn các ý chính trên TipsMake.com.com

Float and Clearfix

Move an element to the right with the class .float-endor to the left with the class .float-start, and remove floats with the class .clearfix:

 Float left Float right 

For example:

 Bootstrap Example 

Float

Move an element to the right using the `.float-end` class or to the left using `.float-start`, and remove the float using the `.clearfix` class.

 Float left Float right 

 

Float screen by screen

Move an element left or right according to screen width, using a responsive float class ( .float-*-start|end- where * is sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px)or xxl (>=1400px)):

Float right on small screens or wider
 Float right on medium screens or wider
 Float right on large screens or wider
 Float right on extra large screens or wider
 Float right on XXL screens or wider
 Float none

Sample code:

 Bootstrap Example 

Float responsive

Adjust the browser window size to see the change.

 Chuyển sang phải trên màn hình nhỏ hoặc lớn hơn
 Chuyển sang phải trên màn hình trung bình trở lên/div>
 Chuyển sang phải cho màn hình lớn
 Chuyển sang phải cho màn hình cực lớn
 Float right on XXL screens or wider
 Không float 

Middle room

Center an element within a class .mx-auto(add automatic left and right alignment):

Centered

For example:

 Bootstrap Example 

Middle room

Automatically center an element using the .mx-auto class:

 Căn giữa 

Width

Set the width of an element using the class w-*( .w-25, .w-50, .w-75, .w-100, .mw-auto, .mw-100):

Width 25% Width 50% Width 75% Width 100% Auto Width Max Width 100%

For example:

Height

Set the height of an element using the class h-*( .h-25, .h-50, . h-75, .h-100, .mh-auto, .mh-100):

 Height 25% Height 50% Height 75% Height 100% Auto Height Max Height 100% 

 

Distance

Bootstrap 5 has a range of responsive margin and padding utility classes. These work for all breakpoints: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px), or xxl (>=1400px).

The classes are used in the following formats: {property}{sides}-{size}for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl, and xxl.

Property is one of:

1. mButmargin
2. pButpadding

Sides is one of:

1. t- place margin-topor padding-top
2. b- place margin-bottomor padding-bottom
3. s- place margin-left or padding-left
4. e- place margin-rightor padding-right
5. x- put both padding-leftand p adding-right or margin-left andmargin-right
6. y- place both padding-topand padding-bottomor margin-topandmargin-bottom
7. blank- Place a marginpadding or block on all sides of the element.

Size is one of:

1. 0- place marginor paddingtransfer0
2. 1- place marginor paddingtransfer.25rem
3. 2- place marginor paddingtransfer.5rem
4. 3- place margin or padding shang1rem
5. 4- place marginor paddingtransfer1.5rem
6. 5- place marginor paddingtransfer3rem
7. auto- set margintoauto

Sample code

I only have a top padding (1.5rem) I have a padding on all sides (3rem) I have a margin on all sides (3rem) and a bottom padding (3rem)

For example:

 Bootstrap Example 

Space elements using the class {property}{sides}-{breakpoint}-{size}. Omit breakpoints if you want padding or margins to work across all screen sizes.

 Tôi chỉ có một padding ở trên (1.5rem) Chỉ có một padding trên toàn bộ slide (3rem) Một căn lề trên tất cả các trang (3rem) và 1 padding ở dưới cùng (3rem) 

Examples of other types of social distancing

.m-# / m-*-#	Align all sides
.mt-# / mt-*-#	Top hinge
.mb-# / mb-*-#	Bottom margin
.ms-# / ms-*-#	Left alignment
.me-# / me-*-#	Right alignment
.mx-# / mx-*-#	Left and right alignment
.my-# / my-*-#	Top and bottom margins
.p-# / p-*-#	Padding for all sides
.pt-# / pt-*-#	Pading on top
.pb-# / pb-*-#	Bottom padding
.ps-# / ps-*-#	Paddington on the left
.pe-# / pe-*-#	Paddington on the right
.py-# / py-*-#	Paddication above and below
.px-# / px-*-#	Paddication on the left and right

Shadows

Use a class shadow-to add a shadow to an element:

No shadow Small shadow Default shadow Large shadow

For example:

 Bootstrap Example 

Cross

 Không shadow Shadow nhỏ Shadow mặc định Shadow lớn 

 

Vertical alignment

Use classes align-to change the alignment of elements (this only works on inline cell elements, inline blocks, inline tables, and tables). Sample code:

baseline top middle bottom text-top text-bottom

Aspect ratio

Create a responsive video or slideshow based on the width of the main element. Add the `.ratio` class along with your chosen aspect ratio .ratio-*to the parent element, and add a video or iframe embedded inside it:

For example:

 Bootstrap Example 

Aspect ratio

Create a responsive video and scale it appropriately to the original element.

Aspect ratio 1:1

Aspect ratio 4:3

Aspect ratio 16:9

Aspect ratio 21:9

Display

Use classes .visibleor .invisibleto control the visibility of elements. Note: These classes do not change the displayed CSS value. They only add visibility:visibleor visibility:hidden:

I am visible I am invisible

Close icon

Use the `.btn-close` class to style the closing icon. This class is commonly used for notifications and modals.

For example:

Screenreader

Use the `.visually-hidden` class to hide an element on all devices except screen readers:

I will be hidden on all screens except for screen readers.

Color

Below is a list of all text and background color classes:

text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body and .text-light:

 Bootstrap Example 

Contextual text color

TipsMake.com.

TipsMake.com.

TipsMake.com.

TipsMake.com.

TipsMake.com.

TipsMake.com.

TipsMake.com.

TipsMake.com.

TipsMake.com.

TipsMake.com.

TipsMake.com.

Background color

The class for the background color is: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.

For example:

 Bootstrap Example 

Background based on context

Use background classes in context to convey meaning through color.

The class .bg-color above doesn't work well with text. However, you can use a class .text-colorto make the text color match the background color. You can also use classes .text-bg-colorand Bootstrap will automatically handle the text color to match each background color.

For example:

 Bootstrap Example 

The background color contrasts with the text color.

Important information.

Success notification.

Represents certain information.

Represents a warning.

Danger warning.

TipsMake.com.

Technology news channel.

Light gray background color.

Above is everything you need to know about the utilities in Bootstrap 5. Hopefully, this article is helpful to you.