I've been tackling the challenge of creating a mobile-optimized website with the latest Bootstrap grid system. My goal is to have two columns side-by-side in medium and large screens, but stacked on top of each other in extra-small and small screens. To ensure the layout is correct, I've incorporated float left and right to adjust the order as needed when stacked. Additionally, I aim to vertically center the content within each column.
Below is the CSS I've added in conjunction with 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%;
}
}
Next, here is the HTML code:
<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>
In instances where one column has a responsive image that varies in size, I attempted to address this by applying the vertical-center-md class to both columns. However, this solution did not yield the desired outcome.
The issue arose when both columns were utilizing the vertical centering implementation, causing the row div to lose its auto-height and the column divs to be positioned 50% above the row.
My question is: How can I effectively achieve vertical centering of responsive column content using the Bootstrap grid system?