Menu
I'm working with bootstrap 3, and am new to it but it seems like a fairly simple transition from 2.
Here is the jsfiddle with the code: http://jsfiddle.net/AHvLW/
And here is an image of how it renders when they are all in col-md-4:
I don't get it though, it works fine in jsFiddle, but not on my index file. Anyone experience a similar issue of might know whats up with it?
564
Three Equal ColumnsUse the . col class on a specified number of elements and Bootstrap will recognize how many elements there are (and create equal-width columns). In the example below, we use three col elements, which gets a width of 33.33% each.
While Bootstrap 3 provided Skip navigation, Nested headings, and color contrast, Bootstrap 4 has improved the accessibility with its components. Styling and layout from version 4 can be applied to a wide range of markup structures.
Bootstrap 3 used floats to handle the layout in place of the flexbox, however, Bootstrap 4 uses flexbox to handle the layout. The flexbox layout makes it easier to design a flexible responsive layout structure without using float or positioning.
Since the columns are not all equal in height you need to add a clearfix <div> for the large viewports just as the new row should start, that is between your 3rd and 4th column:
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-md visible-lg"></div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
</div>
Demo fiddle
98
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
