Menu
I'm fairly new to Bootstrap, but not to the 12-grid system, however I'm having problems implementing columns that are longer than their rows.
I've searched for a fair while online but haven't been able to yet find an answer!
I'll attempt to draw up what I'm trying to achieve, if even possible!
Row 1: [----12----]
Row 2: [---9---][3]
Row 3: [3][3][3][_] <-- continued column from above.
The difficulty I'm having comes at the following point:
Row 1, all ok. Row 2, all ok. Row 3, when starting the first column of row three, it's placed much lower and not tucked in, because of the long content in the right hand column.
Hopefully this makes sense, and there's probably a simple solution, however my head now hurts and coffee doesn't have an effect anymore!
315
col-md- stands for column medium ≥ 992px. col-xs- stands for column extra small ≥ 768px. The pixel numbers are the breakpoints, so for example col-xs is targeting the element when the window is smaller than 768px(likely mobile devices)...
You can easily nest grids using bootstrap by adding additional rows. Here is a step-by-step guide for this process. Within the desired column, create another element with class row . This second row element will contain your nested grid.
The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
col-sm-4 applies to small, medium, large, and extra large devices, but not the first xs breakpoint). You can use predefined grid classes (like . col-4 ) or Sass mixins for more semantic markup.
Use nesting to solve this: http://getbootstrap.com/css/#grid-nesting
<div class="container">
<div class="row">
<div class="col-sm-12"></div>
</div>
<div class="row">
<div class="col-sm-9">
<div class="row">
<div class="col-sm-12"></div>
</div>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
</div>
<div class="col-sm-3"></div>
</div>
</div>
See: http://bootply.com/86710
84
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
