❮ Home Bootstrap5 Modal ❯

Bootstrap5 Utilities

Bootstrap 5 offers many useful classes to help us quickly achieve effects without having to repeatedly write some CSS code.

Background Color

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

Example

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

The .bg-gradient class can set a gradient background effect:

Example

<div class="p-3 mb-2 bg-primary bg-gradient text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary bg-gradient text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success bg-gradient text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger bg-gradient text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning bg-gradient text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info bg-gradient text-dark">.bg-info</div>
<div class="p-3 mb-2 bg-light bg-gradient text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark bg-gradient text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-body bg-gradient text-dark">.bg-body</div>
<div class="p-3 mb-2 bg-white bg-gradient text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent bg-gradient text-dark">.bg-transparent</div>

Borders

We can use the border related classes to display borders as needed:

Example

<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
<br>

<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>

The .border-1 to .border-5 classes are used to set the width of border lines:

Example

<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

The following sets different colors for borders:

Example

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

rounded related classes are used to set rounded corners:

Example

<img decoding="async" src="..." class="rounded" alt="...">
<img decoding="async" src="..." class="rounded-top" alt="...">
<img decoding="async" src="..." class="rounded-end" alt="...">
<img decoding="async" src="..." class="rounded-bottom" alt="...">
<img decoding="async" src="..." class="rounded-start" alt="...">
<img decoding="async" src="..." class="rounded-circle" alt="...">
<img decoding="async" src="..." class="rounded-pill" alt="...">

The rounded-0 to rounded-3 classes are used to set the size of rounded corners:

Example

<img decoding="async" src="..." class="rounded-0" alt="...">
<img decoding="async" src="..." class="rounded-1" alt="...">
<img decoding="async" src="..." class="rounded-2" alt="...">
<img decoding="async" src="..." class="rounded-3" alt="...">

Floating and Clearing Floats

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

Example

<div class="clearfix">
  <span class="float-start">Float left</span>
  <span class="float-end">Float right</span>
</div>

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

Example

<div class="float-sm-end">Float right on small screens</div><br>
<div class="float-md-end">Float right on medium screens</div><br>
<div class="float-lg-end">Float right on large screens</div><br>
<div class="float-xl-end">Float right on extra-large screens</div><br>
<div class="float-xxl-end">Float right on extra-extra-large screens</div><br>

This is a Chinese to English translation. Please provide the English translation for this text. Do not provide any explanations or text apart from the translation.

Center Alignment

Use the .mx-auto class to center align elements (adds auto margin-left and margin-right):

Example

<div class="mx-auto bg-warning" style="width:150px">Center Aligned</div>

Width and Height

Width is set using w-* classes (e.g., .w-25, .w-50, .w-75, .w-100, .mw-auto, .mw-100).

Example

<div class="w-25 bg-warning">Width 25%</div>
<div class="w-50 bg-warning">Width 50%</div>
<div class="w-75 bg-warning">Width 75%</div>
<div class="w-100 bg-warning">Width 100%</div>
<div class="w-auto bg-warning">Auto Width</div>
<div class="mw-100 bg-warning">Max Width 100%</div>

Height is set using h-* classes (e.g., .h-25, .h-50, .h-75, .h-100, .mh-auto, .mh-100).

Example

<div style="height:200px;background-color:#ddd">
    <div class="h-25 d-inline-block p-2 bg-warning">Height 25%</div>
    <div class="h-50 d-inline-block p-2 bg-warning">Height 50%</div>
    <div class="h-75 d-inline-block p-2 bg-warning">Height 75%</div>
    <div class="h-100 d-inline-block p-2 bg-warning">Height 100%</div>
    <div class="h-auto d-inline-block p-2 bg-warning">Auto Height</div>
    <div class="mh-100 d-inline-block p-2 bg-warning" style="height:500px">Max Height 100%</div>
</div>

Spacing

The spacing syntax is as follows:

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

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

property represents the attribute, including:

m - for margin
p - for padding

sides refers to the direction:

t - for margin-top or padding-top
b - for margin-bottom or padding-bottom
s - for margin-left or padding-left
e - for margin-right or padding-right
x - for *-left and *-right
y - for *-top and *-bottom
blank - for margin or padding on all four sides

size refers to the margin size:

0 - sets margin or padding to 0
1 - sets margin or padding to $spacer * .25
2 - sets margin or padding to $spacer * .5
3 - sets margin or padding to $spacer
4 - sets margin or padding to $spacer * 1.5
5 - sets margin or padding to $spacer * 3

auto - sets margin to auto Check the source code settings for partial 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;
}

Example

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

<form>
    <div class="form-row">
        <div class="form-group">

        <label for="text" class="mt-2">Set margin-top:</label>
        <input type="text" class="form-control" id="text" placeholder="email">

        <label for="color" class="mt-2">Color:</label>
        <input type="color" id="color" class="form-control" style="width: 60px;padding: 4px;" autocomplete="off" value="#656565">
        </div>
    </div>
</form>

More Examples

❮ Home Bootstrap5 Modal ❯