# Bootstrap Utilities

Bootstrap 4 has a lot of utility/helper classes to quickly style elements without using any CSS code.

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