Utilities

Bootstrap includes dozens of utilities classes with a single purpose, quick and easy development!

Display

• .d-block to simply set an element’s display property to block
• .d-inline to simply set an element’s display property to inline
• .d-inline-block to simply set an element’s display property to inline-block
• To make an element display: none, use our responsive utilities instead
• .invisible toggle only the visibility of an element, meaning its display is not modified
• .overflow-hidden the overflow is clipped, and the rest of the content will be invisible
• .z-index-top rises to the highest z-index level
• .flex-nowrap the items are forced in a single line
• .flex-col the items are displayed vertically, as a column
• .ml-auto to simply set an element’s margin{left} property to auto

Clearfix

Easily clear floats by adding .clearfix to the parent element.

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

Typography

• .text-lowercase transform text in lowercased
• .text-uppercase transform text in uppercased
• .text-capitalize transform text in capitalized
• .text-ellipsis truncate string with ellipsis
• .text-line-through decorate the text with a line above
• .text-underline decorate the text with a line below
• .text-overline decorate the text with a line up
• .text-decoration-none remove de property text-decoration
• .font-bold change the weight text for bold
• .font-normal change the weight text for normal
• .font-light change the weight text for light
• .font-italic change the font-style for italic
• .cursor-pointer change the property cursor for pointer
• .cursor-help change the property cursor for help
• .text-xs-left align text left on all viewport sizes
• .text-xs-center align text center on all viewport sizes
• .text-xs-right align text right on all viewport sizes
• .text-justify add the property text-align with value justify
• .text-nowrap add the property white-space with value nowrap
• .text-break add the property word-wrap with value break-all
• .text-hide replace an element’s text content with a background image.
• .no-outline remove de property outline

Borders and List

• .b-0 for reset element border
• .b{side}-lighter for style element border
• .list-mb-1 adds margin-bottom: .5rem to list children li
• .list-mb-2 adds margin-bottom: 1rem to list children li

Width and height

Easily make an element as wide or as tall as its parent using the .w-100 and .h-100 utility classes.

Full height

<img class="w-100" src="..." alt="Width = 100%">

<div style="height: 100px">
  <div class="h-100" style="width: 100px">Full height</div>
</div>

Border-radius

Add classes to an element to easily round its corners.

<img src="..." alt="..." class="rounded">
<img src="..." alt="..." class="rounded-top">
<img src="..." alt="..." class="rounded-right">
<img src="..." alt="..." class="rounded-bottom">
<img src="..." alt="..." class="rounded-left">
<img src="..." alt="..." class="rounded-circle">

Transform rotate

<span class="icon icon-collapse-arrow-up icon-4x icon-muted"></span>
<span class="icon icon-collapse-arrow-up icon-4x rotate-90cw"></span>
<span class="icon icon-collapse-arrow-up icon-4x rotate-180"></span>
<span class="icon icon-collapse-arrow-up icon-4x rotate-90ccw"></span>

Vertical alignment

Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.

<table style="height: 100px">
  <tbody>
    <tr>
      <td class="align-baseline">baseline</td>
      <td class="align-top">top</td>
      <td class="align-middle">middle</td>
      <td class="align-bottom">bottom</td>
      <td class="align-text-top">text-top</td>
      <td class="align-text-bottom">text-bottom</td>
      <td class="align-super">superscript of the parent's box</td>
    </tr>
  </tbody>
</table>

Positioning

• .pos-static change the property position with value static
• .pos-relative change the property position with value relative
• .pos-absolute change the property position with value absolute
• .pos-f-t easily position elements at the top of the viewport.
• .pos-left change the property left with value 0.
• .top change the property top with value 0.
• .right change the property right with value 0.
• .bottom change the property bottom with value 0.
• .left change the property left with value 0.

.pos-f-t {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: $zindex-navbar-fixed;
}

Screen readers

Hide an element to all devices except screen readers with .sr-only. Combine .sr-only with .sr-only-focusable to show the element again when it’s focused (e.g. by a keyboard-only user).

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>