❮ Bootstrap4 Modal Bootstrap4 Progressbars ❯

Bootstrap4 Utilities

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

Borders

Use the border class to add or remove borders:

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>

Border Colors

Bootstrap4 provides classes to set border colors:

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>

Border Radius

Use the rounded class to add rounded borders:

Example

<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-right"></span>
<span class="rounded-bottom"></span>
<span class="rounded-left"></span>
<span class="rounded-circle"></span>
<span class="rounded-0"></span>

Float

The .float-right class is used to float elements to the right, .float-left to float elements to the left, and .clearfix to clear floats:

Example

<div class="clearfix">
  <span class="float-left">Left Float</span>
  <span class="float-right">Right Float</span>
</div>

Responsive Float

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

Example

<div class="float-sm-right">Float right on small or wider</div><br>
<div class="float-md-right">Float right on medium or wider</div><br>
<div class="float-lg-right">Float right on large or wider</div><br>
<div class="float-xl-right">Float right on extra large or wider</div><br>
<div class="float-none">No float</div>

Center Alignment

Use the .mx-auto class to center align:

Example

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

Width

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

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="mw-100 bg-warning">Max Width 100%</div>

Height

Using h-* classes (.h-25, .h-50, .h-75, .h-100, .mh-100) to set heights:

Example

<div style="height:200px;background-color:#ddd">
    <div class="h-25 bg-warning">Height 25%</div>
    <div class="h-50 bg-warning">Height 50%</div>
    <div class="h-75 bg-warning">Height 75%</div>
    <div class="h-100 bg-warning">Height 100%</div>
    <div class="mh-100 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)

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

property represents the attribute, including:

m - Used to set margin
p - Used to set padding

sides mainly refers to the direction:

t - Used to set margin-top or padding-top
b - Used to set margin-bottom or padding-bottom
l - Used to set margin-left or padding-left
r - Used to set margin-right or padding-right
x - Used to set *-left and *-right
y - Used to set *-top and *-bottom
blank - Used to set margin or padding on all four sides of the element

size refers to the size of the margin:

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

Margin can be set to negative values by adding the letter "n" before the number:

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

Here is the source code for some margin settings:

.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">
```html
<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

❮ Bootstrap4 Modal Bootstrap4 Progressbars ❯