4

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 */
}
Community
  • 1
  • 1
jdw
  • 3,755
  • 3
  • 17
  • 16
  • 1
    Add a media query to change `.vcenter` to `display:block;` on smaller screens. Read more about the `flex` display property [here](http://css-tricks.com/snippets/css/a-guide-to-flexbox/). "Note that CSS columns have no effect on a flex container." – APAD1 Dec 16 '14 at 20:58
  • Thanks, APAD1! Any clarification or references on **why** css columns don't affect flex containers? – jdw Dec 16 '14 at 21:05
  • This will help you :) http://css-tricks.com/snippets/css/a-guide-to-flexbox/ – António Regadas Dec 16 '14 at 21:29
  • Antonio. This is the same resource linked by APAD1. However, the css-tricks post does not explain WHY columns don't work with flex containers. I think this would require a more detailed look at CSS visual formatting contexts. – jdw Dec 16 '14 at 21:40
  • 1
    Stick the flexbox stuff in a min width: http://www.bootply.com/p4ndb1MiZK – Christina Dec 16 '14 at 22:27
  • And 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. – Christina Dec 16 '14 at 22:28
  • What's going on here is that if you put styles outside media queries they are for all viewport sizes, if you put flexbox inside a min-width it's for that media query and up until another media query comes after that with another value. – Christina Dec 16 '14 at 22:30

1 Answers1

3

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.

Christina
  • 34,296
  • 17
  • 83
  • 119
  • I guess my question may have been a bit unclear. Everyone is answering in the same manner. I understand that I can get the .vcenter class to disappear for smaller screens (or rather appear for larger screens). I thought this was clear when I said "**I suppose possible solutions would be to turn off the `display: flex` property for mobile screens ...**" My question is not about getting the boxes to stack OUTSIDE of a flex context, but rather WITHIN a flex context. So how do I keep `display: flex` turned on and STILL get the columns to stack? Or is it definitely impossible? – jdw Dec 16 '14 at 23:45
  • You'd use different css still you would do media queries: `-moz-box-orient: vertical; -webkit-box-orient: vertical; -webkit-flex-flow: column; -ms-flex-direction: column; flex-flow: column;` – Christina Dec 17 '14 at 02:00