Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

bootstrap-center-div-vertically-and-horizontally

mdbootstrap46ISC1.0.1

Responsive Center div vertically and horizontally built with Bootstrap 5. To center div both vertically and horizontally use flexbox utilities. See the example.

bootstrap, bootstrap5, bootstrap-theme, bootstrap-template, bootstrap-center-div-vertically-and-horizontally, responsive, responsive-design

readme

How to center div vertically and horizontally

Add .d-flex to the parent element to create a flexbox container and transform into flex items.

Add .align-items-center to the parent element to center its content vertically.

Add .justify-content-center to the parent element to center its content horizontally.

#1

first template


<div class="d-flex align-items-center justify-content-center" style="height: 250px;">
    <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
    <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
    <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
</div>

Much more examples and a detailed description can be found at 📄 Documentation page