To center div both vertically and horizontally use flexbox utilities. See the examples.

Detailed documentation and more examples you can find in our Bootstrap Flexbox Docs


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

Only verticallly

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

Flex item
Flex item
Flex item