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

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

Responsive images

Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.

Generic responsive image
<img src="..." class="img-fluid" alt="Responsive image">

Image thumbnails

You can use .img-thumbnail to give an image a rounded 1px border appearance.

<img src="..." alt="..." class="img-thumbnail">

Width and height

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

Width = 100%
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.

Example rounded image Example top rounded image Example right rounded image Example bottom rounded image Example left rounded image Completely round image
<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.

baseline top middle bottom text-top text-bottom superscript of the parent's box
<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>