Warning: Use of undefined constant MDB_STRIPE_SUB_WEBHOOK_SECRET - assumed 'MDB_STRIPE_SUB_WEBHOOK_SECRET' (this will throw an Error in a future version of PHP) in /var/www/tst02/wp-content/themes/mdbootstrap4/inc/mdb-subscriptions/mdb-payments/stripe/class-mdb-stripe-webhook.php on line 26

Warning: Use of undefined constant MDB_PAYPAL_WEBHOOK_ID - assumed 'MDB_PAYPAL_WEBHOOK_ID' (this will throw an Error in a future version of PHP) in /var/www/tst02/wp-content/themes/mdbootstrap4/inc/mdb-subscriptions/mdb-payments/paypal/class-mdb-paypal-webhook.php on line 23

Notice: Undefined index: HTTP_REFERER in /var/www/tst02/wp-content/themes/mdbootstrap4/inc/cookie-setter.php on line 8
Bootstrap Vertical alignment - examples & tutorial

Vertical alignment

Bootstrap 5 Vertical alignment

Flexbox utilities for vertical alignment.

Note: For advanced usage read our Flexbox docs.


Both vertically and horizontally

Add .d-flex to the parent element to enable flex mode. Then use (alsso on the parent element) .align-items-center to align content vertically and .justify-content-center to align content horizontally.


          <div
            class="border d-flex align-items-center justify-content-center"
            style="height: 350px;"
          >
            <button type="button" class="btn btn-primary">Example button</button>
          </div>
        

Only vertically

Add .d-flex to the parent element to enable flex mode. Then use (alsso on the parent element) .align-items-center to align content vertically


          <div class="border d-flex align-items-center" style="height: 350px;">
            <button type="button" class="btn btn-primary">Example button</button>
          </div>
        

Flexbox options

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

Responsive variations also exist for align-items.

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