# Bootstrap Utilities

Bootstrap 5 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!
Copy

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

I'm an inline flexbox container!
Copy

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

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

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

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

Copy

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

### Bootstrap Text Center

Center aligned text.

Copy

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

### Bootstrap Text Right

Right aligned text.

Copy

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

Copy

    <img src="https://images.unsplash.com/photo-1578271887552-5ac3a72752bc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class="img-fluid border-radius-lg" alt="Responsive image">