I want the background of a row full width and the content within it a standard width row.
I'm attempting to do this by created a expanded width row, applying a background to it and nesting a standard row inside it. However the nested row is full expanded width despite not having the expanded class.
Here is my attempt
<div class="row">
<div class="small-2 large-4 columns"><!-- ... --></div>
<div class="small-4 large-4 columns"><!-- ... --></div>
<div class="small-6 large-4 columns"><!-- ... --></div>
</div>
<div class="row expanded">
Expanded row
<div class="row">
<div class="large-12">Nested Row</div>
</div>
</div>
http://codepen.io/onlyslightly/pen/beqZwo
Is there a way to nest standard width rows inside expanded width rows? Or is there a more appropriate way to perform this action?
This is a known issue that was introduced in Foundation 6.2.1:
https://github.com/zurb/foundation-sites/issues/8886
As you can see in 6.2.0 the inner row works fine:
http://codeply.com/go/UfbFrTyThU
The issue is still open, but you can workaround it using some extra CSS...
.row .row {
max-width: 75em;
}
http://codeply.com/go/vyjVAwXkn4
Related
When do yo use row column construct in Zurb Foundation 6.2.3 framework?
<div class="column row">
Row column
</div>
It almost identical to,
<div class="row">
Row
</div>
Only that row column is shorter in length.
This has to do with the way framework grids work (not only foundation), .row elements are not meant to be content containers itself, .column are. Grid elements has paddings and margins and, if you use just .row, that would cause misalignment with other elements on the grid. So, if you have something like:
<div class="row">
<div class="column medium-6">Column A</div>
<div class="column medium-6">Column B</div>
</div>
<div class="row">
<div class="column">Column C, full width always</div>
</div>
<div class="row">
<div class="column medium-6">Column D</div>
<div class="column medium-6">Column E</div>
</div>
Please take a look to the Column C, as it is full width on all breakpoints, doesn't need to have sizing classes, so just "column" or "columns" will suffice, but it still having an extra div with no other need than having the proper sizing/padding/margin to keep content alignment to upper and lower row, so... it's better if second row is: <div class="row column">Column C, full width always</div>, just that.
That's the situation in which you should use the row column construct; and yes, I do encourage you to use that construct, avoid use .row as direct content container.
Hope this helps.
I don't know how to make this kind of col 3 and 6 size.
Middle column has no padding, but it is not enough.
I was trying to make different sizes of col.
#media (min-width:992px){
.col-md-6 { width: 52,5641%;}
.col-md-3 { width: 23,7179%;}
}
but no success.
With Bootstrap you dont need to add media queries or your own width, just use the BS grid system (you can read more here) and let it handle all the tough work. Based on your picture a 3 column layout would use something like this:
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-3">.col-md-3</div>
</div>
Make sure you columns total 12 like above (3+6+3) If you need extra padding in between columns just add a nested DIV and apply the spacing you want to those.
<div class="row">
<div class="col-md-3">
<div class="myclass">
this will have extra padding
</div>
</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-3">.col-md-3</div>
</div>
.myclass {
padding: 20px;
}
Updated
Based on your comment if you want column 6 to be slightly larger than it is you will either need to expand that column and "shrink" the outer 2 columns to something like this:
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-8">.col-md-8</div>
<div class="col-md-2">.col-md-2</div>
</div>
If that's not what you are going for then you can create your own table within bootstrap.
<div class="row">
<div class="custom-col">My custom left side</div>
<div class="custom-main">my main column</div>
<div class="custom-col">My custom right side</div>
</div>
Sizing each of the column as you need.
Maybe Bootstrap is not the best option for your problem. It works if only you can divide the screen in 12 equal parts. Rewrite this rule could break other stuff.
What about using flexboxes or other CSS framework more flexible?
I have bootstrap container (div class="container") and there are two rows (div class="row").
But between those rows I need one full width horizontal line. Full width - I mean that it should be full width - outside container. This line is just for design issues, it would have background color and that is it. I do not know how to create it.
Divide your content into 2:
<div class="container">
<div class="row">
stuff here
</div>
</div>
<div class="line"></div>
<div class="container">
<div class="row">
stuff here
</div>
</div>
I need to build a pyramid of content blocks using the Foundation grid.
The problem is that for rows that are not divisible by 12, I cannot stack the next row in the pyramid so that it is centered under the row above it.
It is like I need a half column offset or something equivalent.
I thought about using .centered on a nested row, but that seems to have the same problem of dividing half columns.
<div class='row'>
<div class='small-1 small-centered columns'>1</div>
</div>
<div class="row">
<div class='small-5 columns'></div>
<div class='small-1 columns'>1</div>
<div class='small-1 columns'>2</div>
<div class='small-5 columns'></div>
</div>
<!--- This row with 3 content blocks is not centered below the previous row --->
<div class="row">
<div class='small-4 columns'></div>
<div class='small-1 columns'>1</div>
<div class='small-1 columns'>2</div>
<div class='small-1 columns'>3</div>
<div class='small-3 columns'></div>
</div>
Fiddle:
http://jsfiddle.net/1cq1gqtq/
I would use block grid instead. The block grid utility will fill up whatever available space is created by the row above.
See the Foundation docs for examples of how to use it: http://foundation.zurb.com/docs/components/block_grid.html
I use this a lot when I need no padding on the left/right sides of the outer columns.
I have two rows and inside each one three large columns and only one that reamains visible on medium breakpoint. What I want is to have them float next to each other on medium while breaking to different rows on large and retaining their properties(background and height)? Also I want the second row to be grouped in div, not necessary with the class of row because what if that div is footer and I care for semantics.
Here is my first pen with two rows separated and it works as expected but not desired, not allowing divs to float next to each other on medium:
two separate rows, case one
html and css for case one:
<body>
<div class="row">
<div class="biggest columns large-4 show-for-large-up">row1 height100</div>
<div class="average columns medium-6 large-4">row1 height50</div>
<div class="smallest columns large-4 show-for-large-up">row1 height25</div>
</div>
<div class="row">
<div class="biggest columns medium-6 large-4">row2 height100</div>
<div class="averge columns large-4 show-for-large-up">row2 height50</div>
<div class="smallest columns large-4 show-for-large-up">row2 height25</div>
</div>
</body>
/* css for case no.1 */
.row:first-of-type{background:red;}
.row{background:blue;}
/* different height for divs inside row */
.biggest{height:100px;}
.average{height:75px;}
.smallest{height:50px;}
and this is pen no.2:
row inside row, second case, the following css and html code for case no.2:
<body>
<div class="row">
<div class="biggest columns large-4 show-for-large-up">row1 height100</div>
<div class="average columns medium-6 large-4">row1 height50</div>
<div class="smallest columns large-4 show-for-large-up">row1 height25</div>
<div class="row">
<div class="biggest columns medium-6 large-4">row2 height100</div>
<div class="averge columns large-4 show-for-large-up">row2 height50</div>
<div class="smallest columns large-4 show-for-large-up">row2 height25</div>
</div>
</div>
</body>
css from code no.2 remains the same like in first example:
.row:first-of-type{background:red;}
.row{background:blue;}
/* different height for divs inside row */
.biggest{height:100px;}
.average{height:75px;}
.smallest{height:50px;}
This second example works correct partially. On the medium size code works ok (height of the elements are being respected but on the large size foundation has rule for .row .row that adds negative side margins, but the bigger problem is vertical alignement of floated elements which takes precedence over horizontal alignement displaying my inner row rather ugly. How can I fix this?
I removed blue div for simplicity. First part is just a normal layout, and it breaks on large, float on medium:
http://codepen.io/zlajaa1/pen/qdWLmd
<body>
<div class="row">
<div class="biggest columns medium-4 large-12">row1 height100</div>
<div class="average columns medium-4 large-12">row1 height50</div>
<div class="smallest columns medium-4 large-12">row1 height25</div>
</div>
</body>
Now I didn't quite understand what do you want here. Should the medium size float, and on large screens to have them (divs) collapsed or you want to delete some of them, coz I noticed
<div class="averge columns large-4 show-for-large-up">row2 height50</div>
show-for-large-up class, that removes divs that has it on medium sizes.