Vertical Center in Bootstrap 4

Centering elements vertically in CSS or Bootstrap has been always challenging particularly for developers that are not CSS designers.

In this article, we'll see different ways we can use to center an element vertically in Bootstrap 4.

Bootstrap 4 has many new features which makes it easy than before to achieve different techniques.

To vertically align items, Bootstrap 4 provides different techniques, such as:

When you want to center an element vertically, you would think of using theVertical Align utilities provided by Bootstrap which will will only work with inline elements but what if you want to vertically center an element inside its parent container?

Let's suppose we have two <div> elements styled with Bootstrap .row and .col-md-12 and you want to vertically center the column inside the row.

<body>
<div class="container">
    <div class="row">
    <div id="col" class="col-md-12">
        This needs to be vertically centered.
    </div>
    </div>
</div>
</body>

Vertically Center Elements with Auto Margins

You can center the #col element within its parent using auto margins but first you need to make the parent full-height.

Add the .h-100 class to the row division which will make it take the full available height in its parent. Next, you can center the element using the .my-auto utility class:

<body>
<div class="container">
    <div class="row h-100">
    <div id="col" class="col-md-12 my-auto">
        This needs to be vertically centered.
    </div>
    </div>
</div>
</body>

Using the my-auto utility class is used to set auto margins on the y-axis, my stands for margin on y-axis:

margin-top: auto;  
margin-bottom: auto;

Vertically Centering Elements with Flexbox

Bootstrap 4 makes use of Flexbox. As such, you can now use the Flexbox utilities to easily achieve different techniques such as vertical center.

You simply need to use the .align-self-center class on your element to center it provided that its parent element has the display: flex property :

<body>
<div class="container">
    <div class="row">
    <div id="col" class="col-md-12 align-self-center">
        This needs to be vertically centered.
    </div>
    </div>
</div>
</body>

The .rowclass is a flex container so the Flexbox utilities will work fine on it. You can also use the .align-items-center on the .row division to vertically center all its children.

Conclusion

In this post, you've seen various ways to vertically center elements within their parent containers.

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status