How to make a tall div on the right side of bootstrap layout? -
I think I'm losing some simplicity here.
I have it:
This is what I need:
Code: (at the top See the codepen)
& lt; Div class = "container" & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "col-md-2" & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "col-xs-6 sm-tile" & gt; A & lt; / Div & gt; & Lt; Div class = "col-xs-6 sm-tile" & gt; B & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "col-xs-12 sm-tile" & gt; C & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "col-md-2 tile" & gt; D & lt; / Div & gt; & Lt; Div class = "col-md-6 tile" & gt; E & lt; / Div & gt; & Lt; Div class = "col-md-2 lg-tile" & gt; F & lt; / Div & gt; & Lt; Div class = "col-md-2 tile" & gt; G & lt; / Div & gt; & Lt; Div class = "col-md-8 tile" & gt; H & lt; / Div & gt; & Lt; Div class = "col-md-10 tile" & gt; I & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; [Class * = "call-"] {boundary: 1 px solid red; } .sm-tile {height: 100px; } .lg-tile {height: 600px; }. Tile {height: 200px; }
something like that?
& lt; Div class = "container" & gt; & Lt; Div class = 'row' & gt; & Lt; Div class = 'col-md-10' & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "col-md-2" & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "col-xs-6 sm-tile" & gt; A & lt; / Div & gt; & Lt; Div class = "col-xs-6 sm-tile" & gt; B & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "col-xs-12 sm-tile" & gt; C & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "col-md-2 tile" & gt; D & lt; / Div & gt; & Lt; Div class = "col-md-8 tile" & gt; E & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = 'row' & gt; & Lt; Div class = "col-md-4 tile" & gt; G & lt; / Div & gt; & Lt; Div class = "col-md-8 tile" & gt; H & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = 'row' & gt; & Lt; Div class = "col-md-12 tile" & gt; I & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "col-md-2 lg-tile" & gt; F & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;
Plunker available here:
Comments
Post a Comment