I'm using Zurb Foundation 5 and was looking to have a .row inside of a .row so that the .row could act as a wrapper for multiple columns. This worked great, but when I went to add a background inside of the inner row, it bleeds over into the top row - is this normal behavior?
I have attached a screenshot and the code I am using.
<div class="row" id="banner" >
<div class="large-12 medium-12 columns" style="background:green;">
<h1>Banner/Top</H1>
</div>
<div id="bio" class="row" style="background:red;" >
<div class="large-6 medium-6 columns" >
<h1>LEFT</H1>
</div>
<div class="large-6 medium-6 columns" >
<h1>RIGHT</H1>
</div>
</div>
</div>
Screenshot:
I think you need to put the top banner in it's own row that it takes up the full width. Like this:
<div class="row" id="banner" >
<div class="row">
<div class="large-12 medium-12 columns" style="background:green;">
<h1>Banner/Top</H1>
</div>
</div>
<div id="bio" class="row" style="background:red;" >
<div class="large-6 medium-6 columns" >
<h1>LEFT</H1>
</div>
<div class="large-6 medium-6 columns" >
<h1>RIGHT</H1>
</div>
</div>
</div>
edit: you may need one large-12 column that wraps both the banner+#bio rows
Related
I am working with the latest release of Bootstrap and I have the following:
<div class="col-md-3">
<h3>One Sidebar Section</h3>
</div>
<div class="col-md-9">
<div class="col-md-6"><h3>Half Section</h3></div>
<div class="col-md-6"><h3>Half Section</h3></div>
</div>
But the above isn't working! How can I split my .col-md-9 into two equal parts?
Your almost there, you just need to add a row surrounding the two col-md-6:
<div class="col-md-3">
<h3>One Sidebar Section</h3>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-6"><h3>Half Section</h3></div>
<div class="col-md-6"><h3>Half Section</h3></div>
</div>
</div>
See the documentation about Nesting Columns:
http://getbootstrap.com/css/#grid-nesting
This worked for me :
<div class="col-md-9">
<div class="col-md-12">
<div class="col-md-6"><h3>Half Section</h3></div>
<div class="col-md-6"><h3>Half Section</h3></div>
</div>
</div>
I have the following grid using zurb-foundation:
<div class="row">
<div class="small-6 large-3 columns"> </div>
<div class="small-6 large-9 columns"> </div>
</div>
The above grid makes the layout of two columns. However, I want to know in small screens to make the above layout to be one column layout instead of two columns with 6. In other words, I want the second div of that row to act as a new row for small screens.
Assuming you are using the standard 12 column grid and haven't modified that, just make the small ones 12:
<div class="row">
<div class="small-12 large-3 columns"> </div>
<div class="small-12 large-9 columns"> </div>
</div>
Just know that small filters it's way up... so in this example "medium" will also be 12. If you want medium to look like large, then do this:
<div class="row">
<div class="small-12 medium-3 columns"> </div>
<div class="small-12 medium-9 columns"> </div>
</div>
Notice how you don't need the large in the above example as medium filters up to everything above it.
using the below Html you can have offset and have centered div on mobile screen.and have large-3 and large-9 div respectively on larger screens.
<div class="row">
<div class="small-6 small-offset-3 large-3 large-offset-0 columns ">..</div>
<div class="new small-6 small-offset-3 large-9 large-offset-0 columns">..</div>
</div>
In foundation css column last child is floated right.so we change it to float left to have both the div stacked up on after the other
.new{
float:left;
}
Something like this should work:
<div class="row">
<div class="medium-6 large-3 columns">
<div class="small-6 medium-12 large-12 columns">column 1</div>
</div>
<div class="medium-6 large-9 columns">
<div class="small-6 medium-12 large-12 columns">column 2</div>
</div>
</div>
http://jsfiddle.net/6tMZH/
should be a simple fix:
.columns {
width:100%;
}
You can see it here
I am really struggling with getting 3 columns inside a page layout.
I am only using the semantic CSS, no CSS of my own for now. I am just trying to wrap my head around the grid stuff.
This is my complete body content:
<div class="ui page grid">
<header class="sixteen wide column">
<div class="ui segment">Header text.</div>
</header>
<div class="ui divided grid">
<div class="eight wide column">
<div class="ui segment">Left text</div>
</div>
<div class="eight wide column">
<div class="ui segment">Right text</div>
</div>
</div>
<div class="ui three column grid">
<div class="column">
<div class="ui segment">1</div>
</div>
<div class="column">
<div class="ui segment">2</div>
</div>
<div class="column">
<div class="ui segment">3</div>
</div>
</div>
<footer class="sixteen wide column">
<div class="ui segment">Footer text.</div>
</footer>
</div>
I understand how to get a full width column — that's verbose but it works.
I also am able to get 2 half-width columns using .sixteen.wide.column elements.
But since 16 is not dividable by 3, I am trying to use this to obtain 3 columns:
<div class="ui three column grid">
<div class="column">
<div class="ui segment">1</div>
</div>
<div class="column">
<div class="ui segment">2</div>
</div>
<div class="column">
<div class="ui segment">3</div>
</div>
</div>
That code above is lifted from this documentation page: http://semantic-ui.com/collections/grid.html
I get this, alas:
It seems that the width issue comes from this CSS:
.ui.grid > .column, .ui.grid > .row > .column {
width: 6.25%;
}
No I need an additional class anywhere, or some additional markup?
Thank you so much!
Here you go:
<div class="ui three column grid">
<div class="column">
Content
</div>
<div class="column">
Content
</div>
<div class="column">
Content
</div>
</div>
I had a similar problem!
Its done this way:
<div class="ui divided grid stackable">
<div class="three column row">
<div class="column wide">
<p> Your stuff here </p>
</div>
<div class="column wide">
<p> Your stuff here </p>
</div>
<div class="column wide">
<p> Your stuff here </p>
</div>
</div>
</div>
When I set up my rows and columns like below, the row widths are slightly different. Suggestions?
EDIT: The row widths are not different. The column width does not fill the space. The fiddle has also been update to illustrate the problem.
<div class="container">
<div class="row" style="background: red;">
<div class="col-xs-4" id="logo">
content
</div>
<div class="col-xs-8">
</div>
</div>
<div class="row">
<div class="col-xs-7 col-xs-push-3">
</div>
<div class="col-xs-3 col-xs-pull-7">
</div>
<div class="col-xs-2" style="background: #000">
content
</div>
</div>
link to fiddle: http://jsfiddle.net/PRP89/4/
Problem:
Trying to create a layout using Bootstrap 3 that consist of two columns on the left of the page and one main column to the right of the two columns. The two columns on the left should be on top of each other.
Code:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="widget">
<div class="widget-header">
<h3>Left column 1</h3>
</div>
<div class="widget-content" id="gallery"></div>
</div>
</div>
<div class="col-md-4">
<div class="widget">
<div class="widget-header">
<h3>Left column 2</h3>
</div>
<div class="widget-content" id="gallery"></div>
</div>
</div>
<div class="col-md-8">
<div class="widget">
<div class="widget-header">
<h3>Main column</h3>
</div>
<div class="widget-content">
<div id="map_canvas" style="height: 280px;"></div>
</div>
</div>
</div>
</div>
</div>
Output:
Current code produce two columns next to each other on top the main column.
Desired output:
You should use a div with class .col-sm-4 and .col-sm-8 respectively as the parent div for the two column layout you want to use and then create the desired widgets within those divs.
Check out my JSFiddle: http://jsfiddle.net/nJtX9/9/
Please make sure to enlarge the results window to see the correct layout. Otherwise it will stack the div containers for responsive purposes.
You are using 2 col-md-4 meaning is taking 8 columns already + using col-md-8 = 16 columns, bear in mind bootstrap can contain 12 columns per row,
so the way to go around this is use col-md-2 instead of col-md-4
Hope i make this clear.
<div class="container">
<div class="row">
<div class="col-sm-6" style="background-color:gray">
<div class="row" style="background-color:aliceblue">
<h1>col1----row1</h1>
</div>
<div class="row">
<h1>col1----row2</h1>
</div>
</div>
<div class="col-sm-6" style="background-color: aqua">
<h1>col2-----row<br />col2---row<br />col2---row</h1>
</div>
</div>
</div>