Bootstrap Vertically Align Column Content with Mobile Optimization

Question

I am working on a mobile optimized website using the latest Bootstrap grid system. I want two columns next to each other in md and lg but stacked vertically in xs and sm. For proper layout, I also use float left and right if the order needs to be different when stacked. Finally, I want to vertically center the content within each column.

Here is my css in addition to bootstrap:

.left {
    float: left;
}
.right {
    float: right;
}
@media (min-width: 992px) {
    .vertical-container-md {
        position: relative;
    }
    .vertical-center-md {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .right.vertical-center-md {
        left: 50%;
    }
}

Here is my html:

<section class="container">
    <div class="row vertical-container-md">
        <div class="col-xs-12 col-sm-12 col-md-6 left vertical-center-md">
            <h1>Little Content</h1>
            <p>1234567890</p>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-6 right">
            <h1>Lots of Content</h1>
            <p>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</p>
            <h2>Sub Title</h2>
            <input type="submit" value="Button" />
        </div>
    </div>
</section>

If the column tagged as vertical-center-md is always the smallest, this works great. However, I have some cases where one column has a responsive image which can be larger or smaller. So to fix that I just add vertical-center-md to both columns. Should work right? Nope.

When both columns use this implementation of vertical centering, the row div loses its auto-height and the column divs are transformed to 50% above the row.

Question: How can I implement vertical centering of responsive column content using the bootstrap grid system?

score 0 · Accepted Answer · edited May 23 '17 at 11:58

Thank you zessx from vertical-align with Bootstrap 3. I'm glad to get away from floating, positioning, and transforming while sticking with pure CSS.

.border {
    border: 1px solid black;
}
.vertical-middle {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

Remember to comment whitespace between inline-block elements!

<section class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-6 col-md-push-6 border vertical-middle">
            <h1>Little Content</h1>
            <p>1234567890 1234567890 1234567890</p>
        </div><!--

     --><div class="col-xs-12 col-sm-12 col-md-6 col-md-pull-6 border vertical-middle">
            <h1>Lots of Content</h1>
            <p>abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz</p>
            <h2>Sub Title</h2>
            <input type="submit" value="Button" />
        </div>
    </div>
</section>

Seems like everyone has the same complaint about the Boostrap grid system, hopefully they fix it in v4.

Bootstrap Vertically Align Column Content with Mobile Optimization

1 Answers1

Linked