Vertically Center HTML Elements using Bootstrap 4

Vertical align in Bootstrap 4 will be dealt with in this article. Vertically centering objects in web design come with its own complications. Well, you can vertically center objects in a simple manner with the help of default Bootstrap and simple HTML. Here’s how:

How to vertical align elements with Bootstrap 4?

As far as vertically centering objects is concerned, it is one of those simple everyday tasks for a web designer. However, there are times when this simple task turns into the worst nightmare of the web designer. You might spend hours trying to align text boxes or images to fit with the other elements on the page. We wouldn’t be surprised to learn that it drives web designers crazy!

Well, web designers used to depend on custom classes and Flexbox to deal with this conundrum! Yes, despite sounding very simple, centering elements vertically isn’t that simple.

However, it isn’t careless. All thanks to the fresh release of Bootstrap, you can depend on default classes to achieve the same in a much easier manner.

The best thing is that you only have to deal with minimal code. We have used it on our own website, and all the developers are super happy about the outcome. We are pleasantly surprised by the effectiveness of this method.

Let’s have a look at the HTML required to achieve the same on your website:

In the following example, we have a section with an image in it and one column. We have one more column with text displayed in it. Both elements will be aligned to the top edge of the section, and you may find it odd looking. You actually want the text to be vertically aligned inline at the center of the image. We will be creating the same with the markup shown below:

<section class="section mt-5">
   <div class="container">
      <div class="row">
         <div class="col-md-6">
            <div>
               <img alt="Full Stack Devlopment" class="img-fluid" src="https://www.positronx.io/wp-content/uploads/2018/10/positronx-pwa-003.jpg" />
            </div>
         </div>
         <div class="col-md-6 col-lg-5 ml-auto d-flex align-items-center mt-4 mt-md-0">
            <div>
               <h2><a href="https://www.positronx.io">Full Stack Development</a></h2>
               <p class="margin-top-s">positionX offers a helpful tutorial on full stack web development, whether its Node, Angular, React or any other modern programming language.</p>
            </div>
         </div>
      </div>
   </div>
</section>

We should be paying attention to the main classes align-items-center and d-flex. As far as d-flex is concerned in Bootstrap, we are referring elements to display as the flex. As for the align-items-center class, it is equivalent to the property align-items: center.

.align-items-center {
  -ms-flex-align: center!important;
  align-items: center!important;
}
.d-flex {
  display: -ms-flexbox!important;
  display: flex!important;
}

Well, the most endearing thing about this whole thing is that Bootstrap looks after everything. You don’t have to rely on custom-classes anymore. Moreover, as a developer, you can have a sigh of relief because we finally have some standardization for the same concept.

Okay! Centering elements vertically is no longer a headache! We finally have a sophisticated solution to this problem!

Bootstrap 4 vertical Align Demo