Bootstrap 4 Utilities
Bootstrap 4 Utilities
Bootstrap 4 has a lot 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-sm"></span>
<span class="rounded"></span>
<span class="rounded-lg"></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 and Clearfix
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
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
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 (adds margin-left and margin-right: auto):
Example
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
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
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- setsmarginp- setspadding
Where sides is one of:
t- setsmargin-toporpadding-topb- setsmargin-bottomorpadding-bottoml- setsmargin-leftorpadding-leftr- setsmargin-rightorpadding-rightx- sets bothpadding-leftandpadding-rightormargin-leftandmargin-righty- sets bothpadding-topandpadding-bottomormargin-topandmargin-bottom- blank - sets a
marginorpaddingon all 4 sides of the element
Where size is one of:
0- setsmarginorpaddingto01- setsmarginorpaddingto.25rem(4px if font-size is 16px)2- setsmarginorpaddingto.5rem(8px if font-size is 16px)3- setsmarginorpaddingto1rem(16px if font-size is 16px)4- setsmarginorpaddingto1.5rem(24px if font-size is 16px)5- setsmarginorpaddingto3rem(48px if font-size is 16px)auto- setsmarginto auto
Note: margins can also be negative, by adding an "n" in front of size:
n1- setsmarginto-.25rem(-4px if font-size is 16px)n2- setsmarginto-.5rem(-8px if font-size is 16px)n3- setsmarginto-1rem(-16px if font-size is 16px)n4- setsmarginto-1.5rem(-24px if font-size is 16px)n5- setsmarginto-3rem(-48px if font-size is 16px)
Example
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 »More Spacing Examples
.m-# / m-*-# |
margin on all sides | Try it |
.mt-# / mt-*-# |
margin top | Try it |
.mb-# / mb-*-# |
margin bottom | Try it |
.ml-# / ml-*-# |
margin left | Try it |
.mr-# / mr-*-# |
margin right | Try it |
.mx-# / mx-*-# |
margin left and right | Try it |
.my-# / my-*-# |
margin top and bottom | Try it |
.p-# / p-*-# |
padding on all sides | Try it |
.pt-# / pt-*-# |
padding top | Try it |
.pb-# / pb-*-# |
padding bottom | Try it |
.pl-# / pl-*-# |
padding left | Try it |
.pr-# / pr-*-# |
padding right | Try it |
.py-# / py-*-# |
padding top and bottom | Try it |
.px-# / px-*-# |
padding left and right | Try it |
Shadows
Use the shadow- classes to add shadows to an element:
Example
Example
<div class="shadow-none p-4 mb-4 bg-light">No shadow</div>
<div
class="shadow-sm p-4 mb-4 bg-white">Small
shadow</div>
<div class="shadow p-4 mb-4 bg-white">Default
shadow</div>
<div class="shadow-lg p-4 mb-4 bg-white">Large
shadow</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
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 »Responsive Embeds
Create responsive video or slideshow embeds based on the width of the parent.
Add the .embed-responsive-item to any embed elements (like
<iframe> or <video>) in a parent element with .embed-responsive and an aspect ratio of your choice:
Example
Example
<!-- 21:9 aspect ratio -->
<div class="embed-responsive
embed-responsive-21by9">
<iframe class="embed-responsive-item"
src="..."></iframe>
</div>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive
embed-responsive-16by9">
<iframe class="embed-responsive-item"
src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive
embed-responsive-4by3">
<iframe class="embed-responsive-item"
src="..."></iframe>
</div>
<!-- 1:1 aspect ratio -->
<div class="embed-responsive
embed-responsive-1by1">
<iframe class="embed-responsive-item"
src="..."></iframe>
</div>
Try it Yourself »Visibility
Use the .visible or .invisible classes to control the visibility of elements. Note: These classes do not change the CSS display value. They only add visibility:visible or visibility:hidden:
Example
Example
<div class="visible">I am visible</div>
<div class="invisible">I am
invisible</div>
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 »
Close icon
Use the .close class to style a close icon. This is often used for alerts and modals. Note that we use the × symbol to create the actual icon (a better looking
"x"). Also note that it floats right by default:
Screenreaders
Use the .sr-only class to hide an element on all devices, except screen readers:
Example
<span class="sr-only">I will be hidden on all screens except for screen
readers.</span>
Try it Yourself »
Colors
As described in the Colors chapter, here is a list of all text and background color classes:
The classes for text colors are: .text-muted,
.text-primary, .text-success, .text-info,
.text-warning, .text-danger, .text-secondary, .text-white,
.text-dark, .text-body (default body color/often black) and .text-light:
Example
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Secondary text.
Dark grey text.
Body text.
Light grey text.
Try it Yourself »
Contextual text classes can also be used on links, which will add a darker hover color:
Example
Muted link.
Primary link.
Success link.
Info link.
Warning link.
Danger link.
Secondary link.
Dark grey link.
Body/black link.
Light grey link.
Try it Yourself »
You can also add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:
Example
Black text with 50% opacity on white background
White text with 50% opacity on black background
Try it Yourself »
Background Colors
The classes for background colors are: .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.
Note that background colors do not set the text color, so in some cases you'll want to use them together with a .text-* class.
Example
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Secondary background color.
Dark grey background color.
Light grey background color.
Try it Yourself »Typography/Text Classes
As described in the Typography chapter, here is a list of all typography/text classes:
| Class | Description | Example |
|---|---|---|
.display-* |
Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight), and there are four classes to choose from: .display-1, .display-2, .display-3, .display-4 |
Try it |
.font-weight-bold |
Bold text | Try it |
.font-weight-bolder |
Bolder bold text | Try it |
.font-weight-normal |
Normal text | Try it |
.font-weight-light |
Light weight text | Try it |
.font-weight-lighter |
Lighter weight text | Try it |
.font-italic |
Italic text | Try it |
.lead |
Makes a paragraph stand out | Try it |
.small |
Indicates smaller text (set to 85% of the size of the parent) | Try it |
.text-break |
Prevents long text from breaking layout | Try it |
.text-center |
Indicates center-aligned text | Try it |
.text-decoration-none |
Removes the underline from a link | Try it |
.text-left |
Indicates left-aligned text | Try it |
.text-justify |
Indicates justified text | Try it |
.text-monospace |
Monospaced text | Try it |
.text-nowrap |
Indicates no wrap text | Try it |
.text-lowercase |
Indicates lowercased text | Try it |
.text-reset |
Resets the color of a text or a link (inherits the color from its parent) | Try it |
.text-right |
Indicates right-aligned text | Try it |
.text-uppercase |
Indicates uppercased text | Try it |
.text-capitalize |
Indicates capitalized text | Try it |
.initialism |
Displays the text inside an <abbr> element in a slightly smaller font size |
Try it |
.list-unstyled |
Removes the default list-style and left margin on list items (works on both <ul> and <ol>). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well) |
Try it |
.list-inline |
Places all list items on a single line (used together with
.list-inline-item on each <li> elements) |
Try it |
.pre-scrollable |
Makes a <pre> element scrollable |
Try it |
Block Elements
To make an element into a block element, add the .d-block class. Use any of the d-*-block classes to control WHEN the element should be a block element on a specific screen width:
Example
Example
<span class="d-block bg-success">d-block</span>
<span class="d-sm-block
bg-success">d-sm-block</span>
<span class="d-md-block bg-success">d-md-block</span>
<span class="d-lg-block bg-success">d-lg-block</span>
<span
class="d-xl-block bg-success">d-xl-block</span>
Try it Yourself »Other Display Classes
Other display classes are also available:
| Class | Description | Example |
|---|---|---|
.d-none |
Hides an element | Try it |
.d-*-none |
Hides an element on a specific screen size | Try it |
.d-inline |
Makes an element inline | Try it |
.d-*-inline |
Makes an element inline on a specific screen size | Try it |
.d-inline-block |
Makes an element inline block | Try it |
.d-*-inline-block |
Makes an element inline block on a specific screen size | Try it |
.d-table |
Makes an element display as a table | Try it |
.d-*-table |
Makes an element display as a table on a specific screen size | Try it |
.d-table-cell |
Makes an element display as a table cell | Try it |
.d-*-table-cell |
Makes an element display as a table cell on a specific screen size | Try it |
.d-table-row |
Makes an element display as a table row | Try it |
.d-*-table-row |
Makes an element display as a table row on a specific screen size | Try it |
.d-flex |
Creates a flexbox container and transforms direct children into flex items | Try it |
.d-*-flex |
Creates a flexbox container on a specific screen size | Try it |
.d-inline-flex |
Creates an inline flexbox container | Try it |
.d-*-inline-flex |
Creates an inline flexbox container on a specific screen size | Try it |
Flex
Use .flex-* classes to control the layout with flexbox.
Read more about Bootstrap 4 Flex, in our next chapter.
Example
Horizontal:
Vertical:
