I have this simple code with Twitter Bootstrap 3: http://jsfiddle.net/korjavin/xUJGV/3/.
(result only: http://jsfiddle.net/korjavin/xUJGV/3/embedded/result/)
I am confused that rows with lorem-lipsum text have not any vertical margin.
I can add margin-top to custom.css but connect it to all classes like col-sm-1(2 ..), col-xs-*, col-* ... looks like bad solution.
What is the best solution to add vertical margin for all Bootstrap grid classes?
The best solution is to respect Bootstrap rules on element nesting. A container, within it a row, within it some col that don't exceed 12 in total. Then, every paragraph wrapped on a <p>tag, and so on.
Basically your problem is about correctly using Bootstrap elements, not about CSS.
Check an improved version of your fiddle, also in full screen.
Related
I am learning CSS grid and these days I am trying to apply grid in places where I used to use Bootstrap grid. Everything is going well but I can't seem to figure out how to deal with margins in CSS grids. I am aware of grid-row-gap and grid-column-gap but that only covers the simple use cases and not all my use cases. For example:
What if I want 40px margin after every 3rd row?
See the picture of design attached. How do I achieve this css grid? I have marked all margins as m. Do I use explicit margin or do I leave columns/rows blank to act as margin.
Do you wanna something like this:
.row:nth-child(3n+3) { margin-bottom:40px; }
This will add margin after every 3rd row.
Create a class (for example .margin-40:{margin:40px 0}) and put this class beside row class wherever you want to put 40px margin.
I have a standard 12 column bootstrap grid, with 4 columns (col-md-3) inside.
In IE7 the fourth column skips to the next line.
The problem is: each column is 25% wide, and has a padding of 10px. When calculated, the column's width = 25% of its parent + the padding.
So the padding is added outside instead of inside. Is there a way to fix this ?
Bootstrap i using the css attribute
box-sizing
And as you can see here IE7 is not supporting this attribute.
There seems to be a fallback with JavaScrip here, but I didn't test or use it, so I cant tell you how good it is.
Bootstrap 3 doesn't support IE7 due to the use of the CSS attribute 'box-sizing', however there is a workaround that's helped for me.
Check out his GitHub project (in beta) that provides IE7 support.
https://github.com/coliff/bootstrap-ie7
Happy coding :)
I am creating a webpage off of this bootstrap model. The problem I am facing, and what I cannot figure out, is why the two companies inside the span10 class do not take up the entire row?
The easiest way to understand this would be to first look at this fiddle. Then, do an inspect element on the company row. Notice that the span10 div is taking up the correct width (its going to the end of the page). However, the two span5 divs inside of that should be taking up the entire width inside the span10. At least, according to my understanding of the bootstrap scaffolding, they should be. (I may be mistaken). In any case, they are not taking up the whole width as I believe they should.
The CSS in the fiddle is copied straight from an uneditted bootstrap file. So the css should not be the problem (with version 3 coming out, I was having trouble pulling from the bootstrap server).
Also, the problem is not (I dont think) having a row within a row, because if you look at the bootstrap example page I provided, that is what they are doing and it is working for them :).
If it is unclear what I am asking, please ask questions and I will reply promptly!
Thanks
Bootstrap uses a 12-column grid layout, so use .span6 if you want two columns to take the whole width of the row. Every new row inside a column will be treated as a full 12-column grid.
First up, for extreme clarity, here a JS fiddle demonstrating what I'm trying to achieve:
http://jsfiddle.net/bb_matt/VsH7X/
Here's the explanation - my rationale:
I'm creating a responsive site using the 1140 grid framework.
It's a fairly complex layout.
I've created a re-usable simple gallery class which can drop into any defined column size & using media queries, I apply relevant percentage widths to the li elements.
Each of the li elements has a right margin of 5%.
I'm using nth-child(xn+x) in the media queries to remove the right margin at the end of each row.
Everything works well - images resize as the layout resizes, the number of gallery items in a row work as I've defined based on percentages.
The only remaining issue to fix is to clear between rows.
I can't add additional html markup and I want to steer clear of overly complex jquery fixes.
I know of two ways to fix this, but I'm not keen on either of them.
First fix, simply using display: inline-block on the li elements, with a vertical align of top, would flow everything correctly... however, all the percentages get shot and the gallery items no longer neatly fit in the allocated space.
Second fix, give the list items a height. This is the route I will go down if necessary - it will require a different height depending on the resolution - no big deal, but not as neat.
I updated your fiddle here: http://jsfiddle.net/VsH7X/5/
I added a clear: left to the first item in each new row.
ul.gallery li:nth-child(5n+6) {
clear: left;
}
Keep in mind that the :nth-child pseudo class does not work in IE6-8, or FF3 and under.
I'm having issues with creating equal height columns on the basic Dreamweaver HTML5 3 col fixed layout. I was using jQuery equal height columns to make the column's bg colour be equal on all pages, however due to some scripts I am using on my site and incompatibility with a manual "style:height:xpx" added to the article column I would like to try and use the display:table, display:table-cell method. I have used the basic Dreamweaver 5.5 HTML5 template, and kept everything the same except removed the display:block property for aside, article etc elements. I added a container div around the 3 columns; aside, article and aside.
Everything works fine - as in the background colour continues until the end of the block, which is what I need - except the trouble is, for some reason on the aside columns it leaves a gap at the top of the columns of 13px. I have no idea why this is happening.
I have uploaded the file here: http://www.primecuts.org.uk/test.html . If I remove the <nav> part, the gap is still there, although it doesn't look as "ugly" as the bgcolor difference is not noticeable, I would like there to be no gap between the text starting and the top of the block/bottom of the header. Any help would be appreciated, I don't know what is causing this.
The problem can be fixed by
.sidebar1 { vertical-align:top; }
The gap has something to do with the padding on the .content article, in the sense that removing padding removes the gap, and the padding is influencing the position of sidebar because they are both table cells in the same table row, but I confess that's a bit of a woolly explanation, and I can't actually identify the specific CSS requirement that this relates to.