bootstrap 4 utilities A-I Tweet

Bootstrap 4 comes up with a huge library of utilities that help you add style to your elements quickly and with relative ease. You can find classes for borders, positions, screen readers, box shadows, column sizes, spacings, display, visibility, overflow, links and many more which are stated below.

Border Utilities

Border utilities can be used to add or remove border from elements, add contextual border colors and border-radius.

Add Borders To Element

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

Remove Borders From Elements

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

Contextual Border Colors

<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

<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-pill"></span>
<span class="rounded-0"></span>	

You can also append sm or lg to border radius utilities for smaller or larger roundness.

Clearfix

Use class clearfix to clear floats easily.

<div class="clearfix"></div>

Close

Class close is used to style the close button for contents like toasts and modals. It will appear floated to the right of the container with some hover effects. Close class can be used on both buttons or links.

<a class="close">×</a>

Contextual Text Colors

With bootstrap, you can also convey meaning of texts using contextual colors and backgrounds. These classes also support link styling with hover effects too.

<span class="text-primary">.text-primary</span>
<span class="text-secondary">.text-secondary</span>
<span class="text-success">.text-success</span>
<span class="text-danger">.text-danger</span>
<span class="text-warning">.text-warning</span>
<span class="text-info">.text-info</span>
<span class="text-light bg-dark">.text-light</span>
<span class="text-dark">.text-dark</span>
<span class="text-body">.text-body</span>
<span class="text-muted">.text-muted</span>
<span class="text-white bg-dark">.text-white</span>
<span class="text-black-50">.text-black-50</span>
<span class="text-white-50 bg-dark">.text-white-50</span>

Contextual Link Colors

<a href="#" class="text-primary">Primary link</a>
<a href="#" class="text-secondary">Secondary link</a>
<a href="#" class="text-success">Success link</a>
<a href="#" class="text-danger">Danger link</a>
<a href="#" class="text-warning">Warning link</a>
<a href="#" class="text-info">Info link</a>
<a href="#" class="text-light bg-dark">Light link</a>
<a href="#" class="text-dark">Dark link</a>
<a href="#" class="text-muted">Muted link</a>
<a href="#" class="text-white bg-dark">White link</a>	

Contextual Background Colors

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

Display Utilities

You can toggle between the display value of elements quickly and responsively with bootstrap display utilities.

Display classes are named using the format d-{value}-{breakpoint} where value can be any of the display property from below.

• none
• inline
• inline-block
• block
• table
• table-cell
• table-row
• flex
• inline-flex

The breakpoint can be any of the following:

• sm
• md
• lg
• xl

<div class="d-inline">d-inline</div>
<div class="d-none-md">d-none-md</div>

Embed

HTML elements like <iframe>>, <embed>, <video>, and <object> can easily be made responsive with the embed class while the desired aspect ratio can also be defined. 21by9, 16by9, 4by3 and 1by1 are the available aspect ratios.

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

Flex Utilities

All HTML elements are not defined as flex items or flex box. So, whenever needed, you can use flex utilities to set such elements as flex items. The flex utility classes are listed below.

• .d-flex
• .d-inline-flex
• .d-sm-flex
• .d-sm-inline-flex
• .d-md-flex
• .d-md-inline-flex
• .d-lg-flex
• .d-lg-inline-flex
• .d-xl-flex
• .d-xl-inline-flex

Flex Direction

You can also add flex class flex-row or flex-column to define the direction of the flex flow. You can also use classes flex-row-reverse or flex-column-reverse to start the content from the opposite direction. These classes also support resposive variations like flex-sm-row or flex-sm-row-reverse.

Flex Fill

While using d-flex, you can add flex-fill to it's immediate childrens to take up the entire width even if their contents don't.

<div class="d-flex">
  <div class="flex-fill">Flex item with a lot of content</div>
  <div class="flex-fill">Flex item</div>
  <div class="flex-fill">Flex item</div>
</div>

Result

Flex Grow and Shrink

Add class flex-grow to a flex item to force it to fill up all available space horizontally and add class flex-shrink to shrink a flex item whenever needed.

Flex Wrap

Use class flex-nowrap with d-flex to force all flex items appear in a row or class flex-wrap to allow items take up their defined width. You can also use class flex-wrap-reverse to allow reverse wrapping.

Float

You can use classes float-left, float-right and float-none as well as their responsive variants like float-sm-none in order to float any element.

Image Replacement

You can use class text-hide to hide texts and display background image instead in order to maintain SEO benefits of heading tags and accessibility.

<h> class="text-hide" style="background: url(...)">Learn Bootstrap 4</h>>