Vertical Alignment with Bootstrap Grid System

Vertical Alignment in Bootstrap Grids

Bootstrap’s grid system is powerful for creating responsive layouts, but achieving vertical alignment within grid columns can sometimes be tricky. This tutorial explores the challenges and provides effective solutions for vertically aligning content within your Bootstrap grids.

Understanding the Challenges

Bootstrap’s grid system primarily relies on float properties for column layout. Traditional methods of vertical alignment, such as vertical-align and line-height, often don’t work as expected when elements are floated. vertical-align is designed for inline, inline-block, or table elements, and doesn’t reliably apply to floated blocks.

The inline-block Approach

One common approach is to use display: inline-block; and vertical-align: middle; on the elements you want to align. This can work, but it introduces potential issues:

• Whitespace: inline-block elements respect whitespace in the HTML. This means any spaces or line breaks between the column div elements in your HTML can create unwanted gaps in the layout, potentially breaking the 12-column grid.
• Grid Disruption: If the total width of columns plus these whitespace gaps exceeds 12 columns, the layout will wrap, causing responsiveness issues.

Example:

<div class="row">
  <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
    <div style="height:10em; border: 1px solid #000;">Big</div>
  </div>
  <div class="col-xs-6 col-md-8 col-lg-10 vcenter">
    <div style="height:3em; border: 1px solid #F00;">Small</div>
  </div>
</div>

.vcenter {
  display: inline-block;
  vertical-align: middle;
  float: none; /* Important to remove float for vertical alignment */
}

Mitigating Whitespace:

To prevent whitespace issues with the inline-block approach, remove all spaces and line breaks between the adjacent column div elements in your HTML code. You can also use HTML comments to achieve this:

<div class="row">
  <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
    <div style="height:10em; border: 1px solid #000;">Big</div>
  </div><!--
  --><div class="col-xs-6 col-md-8 col-lg-10 vcenter">
    <div style="height:3em; border: 1px solid #F00;">Small</div>
  </div>
</div>

The comments effectively eliminate the whitespace between the div elements. While functional, this can make your HTML less readable.

Leveraging Flexbox (Recommended)

The most robust and modern solution is to utilize Flexbox. Flexbox is specifically designed for layout control, including vertical alignment, and it overcomes the limitations of floating and inline-block methods.

While the prompt specifically mentions Bootstrap 3, the implementation is straightforward and provides a clean, responsive solution.

Example:

<div class="row">
  <div class="col-xs-6 col-md-4 col-lg-2">
    <div class="vertical-center" style="height:10em; border: 1px solid #000;">Big</div>
  </div>
  <div class="col-xs-6 col-md-8 col-lg-10">
    <div class="vertical-center" style="height:3em; border: 1px solid #F00;">Small</div>
  </div>
</div>

.vertical-center {
    display: flex;
    align-items: center; /* Vertically align content */
    justify-content: center; /* Horizontally align content (optional) */
}

By applying display: flex and align-items: center to the content div, you achieve reliable vertical centering without needing to worry about whitespace or complex HTML structuring. This is the preferred method for modern web development.

Choosing the Right Approach

• For simple scenarios, and if you’re committed to minimal CSS changes, the inline-block approach with whitespace mitigation can work.
• For complex layouts, consistent vertical alignment across multiple elements, and maintainability, Flexbox is the recommended solution. It provides the most control and flexibility.