CODEWITHSUNDEEP
htmlcsstwitter-bootstrapflexbox
jdw
jdw

Reputation: 4115

How do I get bootstrap grid columns to stack on mobile screens when using flexbox to vertically center columns within their containing row?

I'm a new developer trying to get a bootstrap site up and running. Of course, I have encountered typical newbie problems with vertical alignment. I thought that my problems would be solved (at least for the case of vertical centering) by adding a class .vcenter to my .row elements. The .vcenter class (basically) has the display: flex and align-items: center property/value pairs. This idea came from an excellent SO answer on vertical alignment by Hashem Qolami.

HOWEVER, when I resize the browser window, the grid columns do not stack like they should, even when I apply the .col-xs-12 class to each column. Instead, if the window gets small enough, the columns overlap in a very ugly way. Here is a bootply with the relevant html/css. To see what I'm talking about, navigate to the bootply linked above and click on the phone icon to open a mobile sized screen. If you shrink the window down small enough there's an ugly overlap of the columns. More importantly, the columns should be stacking (as you can see if you turn off the .vcenter class).

SO THE QUESTION IS can I use flexboxes and the bootstrap grid system at the same time or is there some inherent lack of compatibility between the two for this particular case? I suppose possible solutions would be to turn off the display: flex property for mobile screens or to use inline-block for vertical alignment, but I'm looking for a more fundamental theoretical explanation of what's going on here.

Here's the code from the bootply:

HTML

<!DOCTYPE html>
<html>
<head><!-- bootstrap css automatically included by bootply --></head>
 <body>
  <div class="container">
   <div class="row vcenter">
    <div class="col-xs-12 col-md-5 bluebox">
     <h1>Big Blue Box</h1>
    </div>
    <div class="col-xs-12 col-md-7 redbox">
     <h1>Big Red Box</h1>
    </div>
   </div>
  </div>
 </body>
</html>

CSS 

/* CSS used here will be applied after bootstrap.css */

.bluebox {
    color: #FFF;
    background-color: blue;
}

.redbox {
    color: #FFF;
    background-color: red;
}

/* FLEXBOX CLASSES */

.vcenter {
  min-height: 100%;  /* Fallback for vh unit */
  min-height: 100vh; 

  display: flex; 
  align-items: center;

/* Bootply includes properties for cross-browser compatibility */
}

Upvotes: 4

Views: 3718

Answers (1)

Christina
Christina

Reputation: 34642

You put what you want on larger viewports in a min-width media query.

http://www.bootply.com/p4ndb1MiZK

Remove the col-xs-12, not necessary, all things are full width under the last column class so anything under col-md if there is no other class on it is full width with the same padding.

What's going on here is that if you put styles outside media queries they are for all viewport sizes, if you put the flexbox inside a min-width it's for that media query and up until another media query comes after that with another value, if there is one.

Hashem Qolami is a rock star and his code is always solid but flex is for modern browsers, if you intend to have it look decent on IE 8, then use display:table and display:table-cell.

Note: I didn't indent your CSS, but when styles are inside a media query they are indented.

Upvotes: 3

Related Questions