Bootstrap Utilities

For faster mobile-friendly and responsive development, Bootstrap utilities include dozens of classes for showing, hiding, aligning, and spacing content.


Bootstrap Flexbox

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.

I'm a flexbox container!
<div class="d-flex p-2">I'm a flexbox container!</div>
I'm an inline flexbox container!
  <div class="d-inline-flex p-2">I'm an inline flexbox container!</div>

Responsive variations also exist for .d-flex and .d-inline-flex.

  • .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

Bootstrap Align Left

Flex item
Flex item
Flex item
    <div class="d-flex justify-content-start mb-3">
      <div class="p-2">Flex item</div>
      <div class="p-2">Flex item</div>
      <div class="p-2">Flex item</div>
    </div>

Bootstrap Align Center

Flex item
Flex item
Flex item
  <div class="d-flex justify-content-center mb-3">
    <div class="p-2">Flex item</div>
    <div class="p-2">Flex item</div>
    <div class="p-2">Flex item</div>
  </div>

Bootstrap Align Right

Flex item
Flex item
Flex item
  <div class="d-flex justify-content-end mb-3">
    <div class="p-2">Flex item</div>
    <div class="p-2">Flex item</div>
    <div class="p-2">Flex item</div>
  </div>

Bootstrap Text Alignment

Easily realign text to components with text alignment classes.

Bootstrap Text Left

Left aligned text.

  <p class="text-start">Left aligned text.</p>

Bootstrap Text Center

Center aligned text.

  <p class="text-center">Center aligned text.</p>

Bootstrap Text Right

Right aligned text.

  <p class="text-end">Right aligned text.</p>

Bootstrap Responsive Image

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.

<img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/window-desk.jpg" class="img-fluid border-radius-lg" alt="Responsive image">