vertical-align with Bootstrap 3

Aligning Divs Vertically with Bootstrap 3: Your Complete Guide! 🚀

If you've ever used Bootstrap 3, you might have run into the problem of aligning two div vertically. It can be a real headache, especially when you want your design to be responsive. But don't worry, we've got you covered! In this blog post, we'll walk you through the common issues you might encounter and provide easy solutions to align your divs vertically with Bootstrap 3. Let's dive in! 💪

The Problem 😕

So you have two divs that you want to align vertically. For example, you might have a large div and a small div, and you want them to be vertically aligned within a row. Here's the code snippet that demonstrates the problem:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-xs-5">
    <div style="height:5em;border:1px solid #000">Big</div>
  </div>
  <div class="col-xs-5">
    <div style="height:3em;border:1px solid #F00">Small</div>
  </div>
</div>

Understanding the Root Cause 🕵️‍♀️

The grid system in Bootstrap uses float: left instead of display: inline-block. As a result, the vertical-align property doesn't work as expected. This is where the problem lies. 😢

The Solution 💡

To align your divs vertically in Bootstrap 3, we can leverage the power of Flexbox. Flexbox is a modern CSS layout model that allows you to easily align and distribute elements within a container. Here's how you can apply Flexbox to align your divs vertically:

1. Wrap your divs in a container with the class d-flex and align-items-center. This will make the container a flex container and align its items vertically in the center.

<div class="row d-flex align-items-center">
  <!-- Your divs here -->
</div>

1. Remove the col-xs-5 classes from your individual divs and replace them with a single class col-xs-6. This will make both divs occupy half of the row, resulting in a vertically aligned layout.

<div class="row d-flex align-items-center">
  <div class="col-xs-6">
    <!-- Your large div here -->
  </div>
  <div class="col-xs-6">
    <!-- Your small div here -->
  </div>
</div>

1. Style your individual divs as needed, such as adding borders or setting heights. Flexbox will take care of the vertical alignment.

<div class="row d-flex align-items-center">
  <div class="col-xs-6">
    <div style="height:5em;border:1px solid #000">Big</div>
  </div>
  <div class="col-xs-6">
    <div style="height:3em;border:1px solid #F00">Small</div>
  </div>
</div>

Voila! ✨

That's it! With just a few tweaks using Flexbox, you can easily align your divs vertically in Bootstrap 3. No more headaches or hacks using margin-top! 😎

Take It Further 🚀

Now that you know how to align divs vertically in Bootstrap 3, why not experiment with different layouts and alignments? Flexbox offers a whole range of possibilities for creating beautiful and responsive designs. Take your Bootstrap skills to the next level!

Conclusion 📝

Aligning divs vertically in Bootstrap 3 doesn't have to be a struggle anymore. By utilizing the power of Flexbox, you can easily achieve the desired layout without compromising responsiveness. Give it a try and let us know how it goes! Happy coding! 💻

PS: Do you have any other Bootstrap-related questions or challenges? Share them in the comments below and let's tackle them together! 👇😊