i try to add 6 elements to one row with the following definition:
<div class="row container">
<div class="col-sm-4 col-md-4">
<div class="ih-item circle effect1"><a href="#">
<div class="spinner"></div>
<div class="img"><img class="img-responsive" src="http://news.uwlax.edu/wp-content/uploads/2013/09/FMF.jpg" alt="img"></div>
</a></div>
</div>...
</div>
each line should contain 3 elements and the rest have to start new line.
actualy the new line stand and cover part of the first line.
see the attached screenshot.
any advice?
thanks.
First of all, do not use 'row' and 'container' on the same <div>.
'row' should always be a child of 'container'.
Second, define 3 <div>'s with 'col-md-4 col-sm-4' inside a <div class="row">.
Repeat.
maybe i was not clear enough.
i inserted 6 columns into one row.
each one of them has the class "col-md-4" so i accepted 2 lines with 3 columns.
my problem was that the the bottom line rose slightly on top line.
i succeeded to solve it by giving the attribute margin-bottom:30px;
thank you for answering me.
Related
I understand the problem, as described and answered here.
I have quite a complicated layout with a sidebar navigation, a top navigation, a fluid-container and then page-title and page-body structure for each page. So just adding another container did not solve the problem as suggested in that answer.
Once I get into the page-body, all the rows are stretching 'outside' the parent page-body.
Notice I have added padding to the default container-fluid to 'pull' all the content in from each side of the page. Removing them does not fix it.
I've tried every change I can think of except removing the padding from the default row, because I'm pretty sure that is a no-no.
Anyone have any idea how to get those pesky form controls to stay 'inside' the page body?
There is two solution either give an additional class to row and manipulate its layout or don't use row use <div class="col-md-*" /> without parent .row class div as many times u want and use <div class="clearfix"> if you want to break forcefully to next row
EDIT:-
For example
<div class="row">
<div class="col-md-4">div1</div>
<div class="col-md-4">div2</div>
<div class="col-md-4">div3</div>
</div>
<div class="row">
<div class="col-md-4">div4</div>
<div class="col-md-4">div5</div>
<div class="col-md-4">div6</div>
</div>
The same can be achieved without .row class
<div class="col-md-4">div1</div>
<div class="col-md-4">div2</div>
<div class="col-md-4">div3</div>
<div class="clearfix">div4</div>
<div class="col-md-4">div5</div>
<div class="col-md-4">div6</div>
<div class="col-md-4">div1</div>
Would this be a valid thing to do? I have done it before and gives expected results, though I don't know if it's valid or if there is a negative to doing this.
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-12">.col-md-12</div>
</div>
Bootstrap handles column gutters with margins, and then a negative margin on the .row. Generally you can place as many columns in a row as you wish, but it's better practice to work to the 12 columns per row rule.
Technically there's nothing 'invalid' about the way you're doing it, but it's much cleaner (IMHO) to separate them into rows:
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
<div class="row">
<div class="col-md-12">.col-md-12</div>
</div>
Seems acceptable, albeit not encouraged, as even the Bootstrap documentation notes it:
If more than 12 columns are placed within a single row, each group of
extra columns will, as one unit, wrap onto a new line.
So I'm currently developing my resume website with bootstrap and am having a bit of trouble with getting my rows to mesh and display right.
I know why the problem is occurring (my education module is extending the height of the row too far), but I'm not sure how to fix it.
As of now, I have two rows: the top row is my Skills and Education row, while the bottom is my experience and a blank module.
I've tried nesting rows (maybe I didn't implement it correctly?), as well as messing with fluidity, responsiveness, etc.
Is it something easy that I'm just overthinking?
http://i.imgur.com/U5DIZ1M.jpg
Add this in your CSS code
#education{
float: right;
}
You need to have two columns in a row, and then nest the two sections in the left column.
Fiddle
<div class="row-fluid">
<div class="span8">
<div class="row-fluid">
<!--Skills-->
</div>
<div class="row-fluid">
<!--Experience-->
</div>
</div>
<div class="span4">
<!--Education-->
</div>
</div>
I have a demo site which is located here to give you an idea of what's going on. If you scroll to the bottom where you see the 9 individual posts they are all laid out properly. How ever if you shrink the screen to anything less then 1232px's youll see that the 7th post breaks away from the others and shifts down.
Now I am using default styles to align them as such, using row and then span4. Can any one explain why this happens? And any way to fix it?
Your span totals should add up to 12. Your example site however adds up to more than 40! I don't think there is any defined behaviour for what should happen if you don't use it as intended.
From Bootstrap homepage
"The default Bootstrap grid system utilizes 12 columns"
So the total of your spans must add to 12 per row. ie.
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
<div class="row">
<div class="span3">...</div>
<div class="span3">...</div>
<div class="span3">...</div>
</div>
<div class="row">
<div class="span7">...</div>
<div class="span3 offset2">...</div>
</div>
I am currently testing out Blueprint to create the layout for a site. So far it has been going great, but now I've run into a problem I'm wondering if there is any elegant solution to.
I am using the default 24 column layout and have a situation where I would like to do something similar to:
<div class="span-8 box">..</div>
<div class="span-8 box">..</div>
<div class="span-8 box last">..</div>
Problem is that the box-class adds a padding which causes the three div's to not fit into the 24 columns.
One "solution" is to use span-7 instead for all three, but this doesn't fill the entire width.
Any ideas?
You can use the class this way:
<div class="span-8">
<div class="box">..</div>
</div>
<div class="span-8">
<div class="box">..</div>
</div>
<div class="span-8 last">
<div class="box">..</div>
</div>
You could change the "span-7" css rule:
...
.span-7 {width:274px;}
...
And change the divs to "span 7".
Simplest thing I could think of :)
jsFiddle example.