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.

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

  <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

    <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

  <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

  <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

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

Bootstrap Text Center

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

Bootstrap Text Right

  <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">