Vertical alignment

eCommerce vertical alignment

The easiest way to center the element vertically is to use a flexbox.

For more advanced options read our Flexbox documentation


Only verticallly

The easiest way to center the element vertically is to use a flexbox.

Add d-flex align-items-center classes to the parent element to center its content vertically

Flex item
Flex item
Flex item


      <div class="d-flex align-items-center" style="height: 350px">
        <div class="p-2 bd-highlight col-example">Flex item</div>
        <div class="p-2 bd-highlight col-example">Flex item</div>
        <div class="p-2 bd-highlight col-example">Flex item</div>
      </div>

  

Both vertically and horizontally

Add d-flex align-items-center justify-content-center classes to the parent element to center its content vertically and horizontally.

Flex item
Flex item
Flex item


          <div class="d-flex align-items-center justify-content-center" style="height: 350px">
            <div class="p-2 bd-highlight col-example">Flex item</div>
            <div class="p-2 bd-highlight col-example">Flex item</div>
            <div class="p-2 bd-highlight col-example">Flex item</div>
          </div>

        

Align items

We use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column). Please, choose from start, end, center, baseline, or stretch (browser default).

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item


        <div class="d-flex align-items-start">...</div>
        <div class="d-flex align-items-end">...</div>
        <div class="d-flex align-items-center">...</div>
        <div class="d-flex align-items-baseline">...</div>
        <div class="d-flex align-items-stretch">...</div>

      

Align self

You can use align-self utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if flex-direction: column). To this end, choose from the same options as align-items: start, end, center, baseline, or stretch (browser default).

Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item


        <div class="align-self-start">Aligned flex item</div>
        <div class="align-self-end">Aligned flex item</div>
        <div class="align-self-center">Aligned flex item</div>
        <div class="align-self-baseline">Aligned flex item</div>
        <div class="align-self-stretch">Aligned flex item</div>

      

Responsive variations also exist for align-self.

  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch
  • .align-self-sm-start
  • .align-self-sm-end
  • .align-self-sm-center
  • .align-self-sm-baseline
  • .align-self-sm-stretch
  • .align-self-md-start
  • .align-self-md-end
  • .align-self-md-center
  • .align-self-md-baseline
  • .align-self-md-stretch
  • .align-self-lg-start
  • .align-self-lg-end
  • .align-self-lg-center
  • .align-self-lg-baseline
  • .align-self-lg-stretch
  • .align-self-xl-start
  • .align-self-xl-end
  • .align-self-xl-center
  • .align-self-xl-baseline
  • .align-self-xl-stretch