The Ultimate Cheat Sheet to Bootstrap Utility Classes

The more familiar you got to Bootstrap 4, the more used to using utility classes you became. You have mastered using contextual classes for your text ant background colors, button classes for styling buttons, and a lot of others.

Anyway, you are still a beginner, and surely don't know all the useful classes by heart. That is why we have prepared a clear and comprehensive cheat sheet of Bootstrap utility classes.

Bootstrap Utility Classes: Main Tips

• Bootstrap 4 offers a great range of utility classes.
• The classes we will describe in this tutorial make styling items easier and quicker without writing any new CSS.

Element Borders

Here's a list of Bootstrap utility classes you can use to apply or delete borders of an HTML element:

• .border adds a border to all sides of the element.
• .border border-0 removes all Bootstrap borders.
• .border border-top-0 adds border to all sides but the top.
• .border border-right-0 adds border to all sides but the right.
• .border border-bottom-0 adds border to all sides but the bottom.
• .border border-left-0 adds border to all sides but the left.

To see all the different options, try the code snippet below:

 <div class="border">I have a border on all sides</div>
 <div class="border border-0">I don't have a border</div>
 <div class="border border-right-0">I have a border on all sides except right</div>
 <div class="border border-left-0 ">I have a border on all sides except left</div>
 <div class="border border-top-0">I have a border on all sides except top</div>
 <div class="border border-bottom-0">I have a border on all sides except bottom</div>

You can color Bootstrap borders using contextual classes. This is a list of them that work with borders:

• .border-success
• .border-info
• .border-warning
• .border-danger
• .border-primary
• .border-secondary
• .border-light
• .border-dark

See an example to see how they're used:

 <div class="border border-success">I have a green border</div>
 <div class="border border-info">I have a blue border</div>
 <div class="border border-warning">I have a yellow border</div>
 <div class="border border-danger">I have a red border</div>
 <div class="border border-primary">I have a blue border</div>
 <div class="border border-secondary">I have a dark purple border</div>
 <div class="border border-light">I have a light grey border</div>
 <div class="border border-dark">I have a dark grey border</div>

If you wish to make corners of an element rounded, you might use .rounded classes:

• .rounded makes all corner rounded.
• .rounded-top rounds the top side corners.
• .rounded-right rounds the right side corners.
• .rounded-bottom rounds the bottom side corners.
• .rounded-left rounds the left side corners.
• .rounded-circle makes the element a circle.
• .rounded-0 removes any rounded corners present on the element.

Use the example to view and compare:

 <div class="border rounded">I have a rounded border on all sides</div>
 <div class="border rounded-top">I have a rounded border on the top</div>
 <div class="border rounded-right">I have a rounded border on the right</div>
 <div class="border rounded-bottom">I have a rounded border on the bottom</div>
 <div class="border rounded-circle" style="width: 100px; height: 100px;">I'm a circle</div>
 <div class="border rounded-0">I don't have any round corners</div>

Float Attribute

Bootstrap utility classes also allow you to set the float attribute of elements. To do this, you should create a <div> container with the .clearfix class to remove any floats that were defined before. Inside it, you can use three classes to position your elements horizontally as you like:

• .float-right makes the element in Bootstrap float right.
• .float-left makes the element in Bootstrap float left.
• .float-none applies no float.

To get a better idea, see an example below:

 <div class="clearfix">
 <div class="border border-secondary float-right">I will float right</div>
 <div class="border border-secondary float-left">I will float left</div>
 </div>
 <div class="border border-secondary float-none">I will not float</div>

Bootstrap 4 also offers classes that let you set floats that act responsively. This is achieved by using the following classes (the asterisk * represents either left or right):

• .float-sm-* applies float to screens bigger than 576px.
• .float-md-* applies float to screens bigger than 768px.
• .float-lg-* applies float to screens bigger than 992px.
• .float-xl-* applies float to screens bigger than 1200px.
• .float-none applies no float.

The example below will help you grasp the idea better:

<div class="clearfix">
 <div class="border border-secondary float-sm-right">I will float right on screens bigger than 576px</div>
 <div class="border border-secondary float-md-right">I will float right on screens bigger than 768px</div>
 <div class="border border-secondary float-lg-right">I will float right on screens bigger than 992px</div>
 <div class="border border-secondary float-xl-right">I will float right on screens bigger than 1200px</div>
 <div class="border border-secondary float-none">I will not float</div>
 </div>

Align, Width and Height

You can center an element by using the .mx-auto class:

 <div class="border border-secondary mx-auto"  style="width: 200px;">Center</div>

The .align classes are used to position an element vertically inside its container. They work with inline, inline-block, table cell and inline-table elements:

• .align-baseline aligns text to the baseline of the container.
• .align-top aligns text to the top of the container.
• .align-middle aligns text to the middle of the container.
• .align-bottom aligns text to the bottom of the container.
• .align-text-top aligns text to the top of the line.
• .align-text-bottom aligns text to the bottom of the line.

See an example below and compare the differences upon running it in a code editor:

 <div class="align-baseline" style="display: inline;">Baseline align</div>
 <div class="align-top" style="display: inline;">Top align</div>
 <div class="align-middle" style="display: inline;">Middle align</div>
 <div class="align-bottom" style="display: inline;">Bottom align</div>
 <div class="align-text-top" style="display: inline;">Top text-align</div>
 <div class="align-text-bottom" style="display: inline;">Bottom text-align</div>

Now here's a list of Bootstrap classes used for width setting:

• .w-25 sets the element's width to 25%.
• .w-50 sets the element's width to 50%.
• .w-75 sets the element's width to 75%.
• .w-100 sets the element's width 100%.
• .mw-100 sets the element's max width 100%.

Take a look at the example to see how they're used in codes:

 <div class="bg-info w-25" style="margin-bottom: 5px;">25%</div>
 <div class="bg-info w-50" style="margin-bottom: 5px;">50%</div>
 <div class="bg-info w-75" style="margin-bottom: 5px;">75%</div>
 <div class="bg-info w-100" style="margin-bottom: 5px;">100%</div>
 <div class="bg-info mw-100" style="margin-bottom: 5px;">Max width 100%</div>

Now, here's a list of classes used for height setting:

• .h-25 sets the element's height to 25%.
• .h-50 sets the element's height to 50%.
• .h-75 sets the element's height to 75%.
• .h-100 sets the element's height 100%.
• .mh-100 sets the element's max height 100%.

The example below will help you see how it's used:

 <div class="bg-info h-25 d-inline-block">25%</div>
 <div class="bg-info h-50 d-inline-block">50%</div>
 <div class="bg-info h-75 d-inline-block">75%</div>
 <div class="bg-info h-100 d-inline-block">100%</div>
 <div class="bg-info mh-100 d-inline-block" style="height: 600px;">Max height 100%</div>

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Colors and Typography

These Bootstrap classes are used for text colors:

• .text-muted
• .text-primary
• .text-success
• .text-info
• .text-warning
• .text-danger
• .text-secondary
• .text-white
• .text-dark
• .text-body
• .text-light

See how they work in an example provided below:

<p class="text-success">Text</p>

Contextual text classes can also be used on links. In that case, they will add a darker hover color:

<a href="#" class="text-success">Link</a>

You can also add 50% opacity for black or white text using .text-black-50 or .text-white-50 classes:

<p class="text-black-50">Text</p>

Now, here are the classes you can use to apply color to the background:

• .bg-muted
• .bg-primary
• .bg-success
• .bg-info
• .bg-warning
• .bg-danger
• .bg-secondary
• .bg-white
• .bg-dark
• .bg-body
• .bg-light

View the code snippet below in a code editor to see how it works:

<a href="#" class="bg-success">Text</a>

Note: background colors do not set the text color, so in some cases you'll want to use them together with a .text-* class.

Typography

Here is a list of all typography classes:

• .display-* headings are used to stand out more than usual headings: they have a larger font-size and lighter font-weight. There are four classes to choose from: .display-1, .display-2, .display-3, and .display-4.
• .font-weight-bold indicates bold text.
• .font-weight-normal indicates normal text.
• .font-weight-light indicates lightweight text.
• .font-italic indicates italic text.
• .lead makes a paragraph stand out.
• .small indicates smaller text (set to 85% of the size of the parent).
• .text-left indicates left-aligned text.
• .text-center indicates center-aligned text.
• .text-right indicates right-aligned text.
• .text-justify indicates justified text.
• .text-monospace indicates monospaced text.
• .text-nowrap indicates no-wrap text.
• .text-lowercase indicates lowercased text.
• .text-uppercase indicates uppercased text.
• .text-capitalize indicates capitalized text.
• .initialism displays the text inside an <abbr> element in a slightly smaller font size.
• .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).
• .list-inline places all list items on a single line (used together with .list-inline-item on each <li> elements).
• .pre-scrollable makes a <pre> element scrollable.

Now, dedicate some time to review the examples provided in the code snippet carefully. It might seem like a lot, but it will all come in handy, we promise:

 <p class="font-weight-bold">Some example text</p>
 <p class="font-weight-normal">Some example text</p>
 <p class="font-weight-light">Some example text</p>
 <p class="font-italic">Some example text</p>
 <p class="lead">Some example text</p>
 <p class="small">Some example text</p>
 <p class="text-left">Some example text</p>
 <p class="text-center">Some example text</p>
 <p class="text-right">Some example text</p>
 <p class="text-justify">Some example text</p>
 <p class="text-monospace">Some example text</p>
 <p class="text-nowrap">Some example text</p>
 <p class="text-uppercase">Some example text</p>
 <p class="text-lowercase">Some example text</p>
 <p class="text-capitalize">Some example text</p>
 <p class="initialism">Some example text</p>

Padding and Margin

Utility classes let you set responsive Bootstrap margin and padding.

When it comes to spacing, these properties follow a flexible pattern:

• For xs - {property}{sides}-{size}
• For sm, md, lg, and xl - property}{sides}-{breakpoint}-{size}

To specify that a property you wish to specify is Bootstrap padding, enter .p. Use .m if it is margin:

 <div class="border border-dark p-3">Element with size 3 padding</div>
 <div class="border border-dark m-4">Element with size 4 margin</div>

The sides may be filled in with one of these classes, affecting the following CSS properties of an element (the asterisk means either Bootstrap margin or padding):

• t - used to set *-top.
• r - used to set *-right.
• b - used to set *-bottom.
• l - used to set *-left.
• x - used to set *-left and *-right.
• y - used to set *-top and *-bottom.

 <div class="border border-dark pt-3">Size 3 top padding</div>
 <div class="border border-dark pr-3">Size 3 right padding</div>
 <div class="border border-dark pb-3">Size 3 bottom padding</div>
 <div class="border border-dark pl-3">Size 3 left padding</div>
 <div class="border border-dark px-3">Size 3 left and right padding</div>
 <div class="border border-dark py-3">Size 3 top and bottom padding</div>
 <div class="border border-dark mt-4">Size 4 top margin</div>
 <div class="border border-dark mr-4">Size 4 right margin</div>
 <div class="border border-dark mb-4">Size 4 bottom margin</div>
 <div class="border border-dark ml-4">Size 4 left margin</div>
 <div class="border border-dark mx-4">Size 4 left and right margin</div>
 <div class="border border-dark my-4">Size 4 top and bottom margin</div>

The breakpoint refers to what screen sizes the properties assigned by a class apply. Possible breakpoint names are as follows:

• xs - for screens narrower than 576px (if you want to use this, the breakpoint spot should be left empty).
• sm - for screens wider than 576px.
• md - for screens wider than 768px.
• lg - for screens wider than 992px.
• xl -for screens wider than 1200px.

 <div class="border border-dark p-sm-3">Element with size 3 padding on small+ screens</div>
 <div class="border border-dark p-md-3">Element with size 3 padding on medium+ screens</div>
 <div class="border border-dark p-lg-3">Element with size 3 padding on large+ screens</div>
 <div class="border border-dark p-xl-3">Element with size 3 padding on extra large screens</div>

The possible values for the size of Bootstrap padding or margin are:

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

 <div class="border border-dark p-1">Element with size 1 padding</div>
 <div class="border border-dark p-2">Element with size 2 padding</div>
 <div class="border border-dark p-3">Element with size 3 padding</div>
 <div class="border border-dark p-4">Element with size 4 padding</div>
 <div class="border border-dark p-5">Element with size 5 padding</div>
 <div class="border border-dark p-auto">Element with auto padding</div>

Note: By entering the values into where they belong and connecting them with dashes, you can create Bootstrap classes for interactive spacing around and inside your elements.

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

<div class="p-3 fixed-top bg-danger">I am fixed to the top</div>

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

<div class="p-3 fixed-bottom bg-danger">I am fixed to the bottom</div>

Use the .sticky-top class to make any element stay fixed at the top of the page when you scroll past it:

<div class="p-3 sticky-top bg-danger">I will stick to the top</div>

Note: This class does not work in IE11 and earlier (will treat it as position:relative).

Other Classes

Use the shadow-* classes to to add shadows to an element:

<div class="shadow p-3 mb-4 bg-white">This element has a shadow</div>

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:

<!-- 21:9-->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
v/div>

<!-- 16:9 -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 1:1 -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Use the .visible or .invisible classes to control the visibility of elements:

<div class="visible">Visible text</div>
<div class="invisible">Invisible text</div>

Note: These classes do not change the CSS display value. They only add visibility:visible or visibility:hidden:.

Use the .close class to style a close icon. This is often used for alerts and modals. To create the actual icon, we use the × symbol as it's symmetric and therefore looks better than the letter X. Also note that it floats right by default:

<button type="button" class="close">&times;</button>

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:

<span class="d-block bg-danger">Block element</span>
<span class="d-sm-block bg-danger">Block element</span>
<span class="d-md-block bg-danger">Block element</span>
<span class="d-lg-block bg-danger">Block element</span>
<span class="d-xl-block bg-danger">Block element</span>

Bootstrap Utility Classes: Summary

• A variety of Bootstrap utility classes make it fast and simple to style elements.
• Using them does not require writing any new CSS.