THE WORLD'S LARGEST WEB DEVELOPER SITE

Bootstrap 4 Utilities


Bootstrap 4 Utilities

Bootstrap 4 has alot of utility/helper classes to quickly style elements without using any CSS code.


Borders

Use the border classes to add or remove borders from an element:

Example

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>
Try it Yourself »

Border Color

Add a color to the border with any of the contextual border color classes:

Example

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>
Try it Yourself »

Border Radius

Add rounded corners to an element with the rounded classes:

Example

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>
Try it Yourself »

Float

Float an element to the right with the .float-right class or to the left with .float-left, and clear floats with the .clearfix class:

Example

Float left Float right

Example

<div class="clearfix">
  <span class="float-left">Float left</span>
  <span class="float-right">Float right</span>
</div>
Try it Yourself »

Responsive Floats

Float an element to the left or to the right depending on screen width, with the responsive float classes (.float-*-left|right - where * is sm (>=576px), md (>=768px), lg (>=992px) or xl (>=1200px)):

Example

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 none

Example

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

Center Align

Center an element with the .mx-auto class:

Example

Centered

Example

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

Width

Set the width of an element with the w-* classes (.w-25, .w-50, .w-75, .w-100, .mw-100):

Example

Width 25%
Width 50%
Width 75%
Width 100%
Max Width 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="mw-100 bg-warning">Max Width 100%</div>
Try it Yourself »

Height

Set the height of an element with the h-* classes (.h-25, .h-50, .h-75, .h-100, .mh-100):

Example

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

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>
Try it Yourself »

Spacing

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

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

Where property is one of:

  • m - sets margin
  • p - sets padding

Where sides is one of:

  • t - sets margin-top or padding-top
  • b - sets margin-bottom or padding-bottom
  • l - sets margin-left or padding-left
  • r - sets margin-right or padding-right
  • x - sets both padding-left and padding-right or margin-left and margin-right
  • y - sets both padding-top and padding-bottom or margin-top and margin-bottom
  • blank - sets a margin or padding on all 4 sides of the element

Where size is one of:

  • 0 - sets margin or padding to 0
  • 1 - sets margin or padding to .25rem (4px if font-size is 16px)
  • 2 - sets margin or padding to .5rem (8px if font-size is 16px)
  • 3 - sets margin or padding to 1rem (16px if font-size is 16px)
  • 4 - sets margin or padding to 1.5rem (24px if font-size is 16px)
  • 5 - sets margin or padding to 3rem (48px if font-size is 16px)
  • auto - sets margin to auto

Example

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

Example

<div class="pt-4 bg-warning">I only have a top padding (1.5rem = 24px)</div>
<div class="p-5 bg-success">I have a padding on all sides (3rem = 48px)</div>
<div class="m-5 pb-5 bg-info">I have a margin on all sides (3rem = 48px) and a bottom padding (3rem = 48px)</div>
Try it Yourself »

Vertical Align

Use the align- classes to change the alignment of elements (only works on inline, inline-block, inline-table and table cell elements):

Example

baseline top middle bottom text-top text-bottom

Example

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>
Try it Yourself »

Position

Use the .fixed-top class to make any element fixed/stay at the top of the page:

Example

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  ...
</nav>
Try it Yourself »

Use the .fixed-bottom class to make any element fixed/stay at the bottom of the page:

Example

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
  ...
</nav>
Try it Yourself »

Use the .sticky-top class to make any element fixed/stay at the top of the page when you scroll past it. Note: This class does not work in IE11 and earlier (will treat it as position:relative).

Example

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  ...
</nav>
Try it Yourself »