I'm having trouble working with Twitter bootstrap 3 to render a web page composed of different slices. The end-product would be a page composed of rows containing img-responsive slices that stay in their respective rows (i.e. They don't wrap)
But Bootstrap CSS does something funny with the images. They're nested in the predictable structure, container>row>col-xs-12>Images, but even when I set the image margin: 0;, there's still a small gap between adjacent images. Moreover, I can't get the rows with multiple slices to stay on the same row no matter what (because the page makes no sense if slices wrapped to a new line) and still be "responsive."
Alternatively, if someone could instruct me how to set up a responsive image map (or shoot me a solid link), I could try that route.
You need to put each image in its own col-xs-*, override col-xs padding, and add max-width:100% to the img. Also, don't get confused by .row's usage. It's not meant to restrict items to a visual row, and doesn't. Frankly, the name is misleading. Just use the single .row within the .container, and make sure your col-xs's add up to 12 and you'll avoid unwanted wrapping.
Here's an example: http://www.bootply.com/aYOdYaV4Gq
.col-xs-3{
padding-right:0px;
padding-left:0px;
}
.img{
max-width:100%;
}
In my bootply, I've actually added classes with these attributes rather than overwriting the bootstrap classes like above. Either works, but adding custom classes means it's easier to turn it on and off later.
Related
I'm standing at a precipice about to make an important decision that will affect our long term development regarding Bootstrap and I want to be sure I have a good understanding of the reasoning behind their use of Column Padding.
We run a multi-tenant cms system that offers bootstrap as one of the available frameworks from which to build a site, and then our system adds layers of functionality on top of it, so any decision we make affects all tenants.
One of the basic features is when working with a Bootstrap Columns (i.e. col-lg-6), or what we would call a Section, a user can choose to have the content inside Bleed to the edge, or be surrounded by padding.
In bootstrap, columns use padding-left:15px; padding-right:15px; for the horizontal, but padding-top:0; padding-bottom:0; for the vertical.
In our system, we would use padding:15px; all the way around, because users can also set a column/section background colour and/or image, and the logic is that you would want to see colour/image around all sides when not using bleed and vice versa.
I understand that the horizontal margins in bootstrap overlap as a function of the grid system, but padding is cumulative between columns. So my question is: is there a reason why vertical padding is not also set explicitly? What are the potential repercussions of forcing this on our clients?
N.B. Anything can be overridden via a Custom CSS editor, similar to the one in Wordpress, although this capability would obviously be essentially reserved for those "in the know" and not something I would expect a regular user to utilize.
EDIT: The following is a test helper we've created to remove margins from the top of header tags which are the first child of one of our sections (specifics removed for clarity).
section h1:first-child, section h2:first-child, section h3:first-child,
section h4:first-child, section h5:first-child, section h6:first-child
{ margin-top: 0 !important; }
This can also be done for last items as well to remove bottom margins/padding.
If we expand this to cover elements noted below (i.e. forms, p, h1-6, etc.) so the normal spacing persists, would this complicate things further or be adequate to preserve Bootstraps intent while allowing our own features to work?
It's because inside those columns with the default gutter of 30px between columns there's generally forms, ul, ol, p, h1-h6, and other content that have bottom margins, so when it stacks there's vertical spacing, if you were to add bottom or top padding on the column would be quite odd looking when stacked, two paragraphs inside two 50% (col-*-6) columns would have additional padding between the first and second. And nesting columns would be odd and have even more spacing issues. The only time when the vertical stacking wouldn't have space is if you were to stick images in them, but then you can add a custom class to the image to get some bottom margin on the un-floated version.
I do want my website to stay responsive, the sidebar should still go under the content when the screen is too small, but there's a few span* classes I'm using that I don't want going to 100% width when the screen is too small. Is there a way I can still use the span* class (it's a really easy way to position things) but explicitly say that they should not be responsive; either on the container, or row, or each span, whatever works.
a bit short for explanation, code is missing.
have you tried using selector: span[class*="span"]{} to filter the class you want ?
I don't think you can have it both ways.
Either your bootstrap grid is responsive or it isn't.
This is because all bootstrap knows is whether or not the responsive initialization snippet has been called. If it has, then it changes the spans to make them responsive.
If you want a way around this, I would copy the styles from the span class that you want applied to your unresponsive sections and then make a new class with those styles.
So, if you wanted to make an additional unresponsive .span3 you could just copy the relevant styles and make your own classes. You would need to set the width, float, and margins. In this case width: 220px;, float: left; , and add a .margin-right: 20px;. The widths can be found in bootstrap.css file.
I also attached a fiddle for reference -- http://jsfiddle.net/c86kE/
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.
I want what in the good old days would be a two-column table layout. It's for http://paulisageek.com/resume and is working perfectly with:
.dates {
float:right;
width:171px;
}
but I'm sure I'll break the sizes on updates (and different fonts, and browsers, and font-sizes, etc).
Is there a way to make the second column autosize without forcing a width (or using javascript)? Will CSS3 have a way?
Give your dates column a min-width and a max-width instead of a fixed width. This gives you flexibility but ensures your design won't break:
.dates {
float:right;
min-width:171px;
max-width:300px;
}
Note that min-width and max-width do not include padding, borders, or margins.
Another possibility is make the dates to align right and display inline:
.dates p{
text-align:right;
display:inline;
}
This way you won't need a separate div for the dates.
...Or, if you want to be super-cutting-edge and ensure that your layout breaks in IE, you can use the new CSS3 columns (not recommended here, but still worth reading)
What you've got here is something that works extraordinarily well and easily with tables. Not only that it's incredibly backwards compatible. In "pure" CSS it's hard. You can make one of the columns variable width but not both. If you really need that, stick with tables (irrespective of what the semantic HTML zealots might say).
Yup, it's possible. The keyword to search for is liquid columns. For example this deals with whole layouts but the points are the same.