How To Vertical Align A DIV In Bootstrap - Tutorial Republic

Trang chủ » Html Column Vertical Alignment » How To Vertical Align A DIV In Bootstrap - Tutorial Republic

Có thể bạn quan tâm

Advertisements How to Vertical Align a DIV in Bootstrap

Topic: Bootstrap / SassPrev|Next

Answer: Use the align-items-center Class

In Bootstrap 4, if you want to vertically align a <div> element in the center or middle, you can simply apply the class align-items-center on the containing element.

The following example will show you how to vertical align a grid column inside a row.

Example

Try this code » <div class="container"> <div class="row align-items-center"> <div class="col-md-12">Vertical Center Aligned Grid Column</div> </div> </div>

Similarly, you can align a DIV element vertically in the middle of a containing element by using the class d-flex in combination with the class align-items-center, like this:

Example

Try this code » <div class="d-flex align-items-center"> <div class="box">Vertical Center Align a Div</div> </div>

However, if you're using the Bootstrap 3 version you can still do it with some custom CSS. Let's try out the following example to understand how it basically works:

Example

Try this code » /* CSS code */ .vcenter-item{ display: flex; align-items: center; } <!-- HTML code --> <div class="wrapper vcenter-item"> <div class="box">Vertically Centered Div</div> </div>

Related FAQ

Here are some more FAQ related to this topic:

  • How to align Bootstrap modal vertically center
  • How to center a column in bootstrap in Bootstrap
  • How to get centered content in Bootstrap
Previous Page Next Page Advertisements

Từ khóa » Html Column Vertical Alignment