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 itemFlex itemFlex itemCopy

    <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 itemFlex itemFlex itemCopy

  <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 itemFlex itemFlex itemCopy

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