I recently switched to using the latest alpha4 6 version and decided to see what has changed.
It seems that I can now use containers, rows, and columns just like in version 3.
So, I set up a very basic layout - content > row > col (using col as a container for additional setup), with a row inside it and two columns. The outcome was not great: https://jsfiddle.net/34prcdou/1/
I read that they transitioned from using floats to flexbox, which is fine as I am familiar with flexbox, but the result surprised me. I believe this is a valid bootstrap layout.
What could I be missing here? Perhaps I am too fatigued to see the bigger picture...
HTML
<div class="container">
<div class="row">
<div class="col-xs-12" id="content">
<div class="row">
<div class="col-sm-6 color-1" style="height: 100%">a</div>
<div class="col-sm-6 color-2" style="height: 100%">a</div>
</div>
</div>
</div>
</div>
CSS
html {height: 100%;}
body {height: 100%;}
.container:first-child {margin: 0 auto; height: 100%;}
.container:first-child {
-webkit-box-shadow: inset 0px 0px 17px 6px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 0px 17px 6px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px 17px 6px rgba(0,0,0,0.75);
}
#content {border: 1px solid #f00}
.color-1 {background: #CEE5F2}
.color-2 {background: #ACCBE1}
.color-3 {background: #7C98B3}
.color-4 {background: #637081}
.color-5 {background: #536B78}