So basically I am building a full screen food image grid using bootstrap 3. I have used container-fluid and the appropriate columns to define the width of my rows and breakpoints. Each of the columns contains a food image and uses the class - col-lg-2 col-md-3 col-sm-4 col-xs-4
I didn't want a gutter between the images so I removed the left and right padding assigned to the column class which gives me the exact look I want. Now when I resize the grid, it all works fine. However in between screen widths 950px and 980px, the images have a gutter between them vertically. I am unsure whats causing this. Does anyone have an idea?
I have attached a few pictures to illustrate along with bootply
http://www.bootply.com/xXaaLRWKTL . It happens in this example around the tablet screen break point. Resize the window and take a look, you will see the gutter comes back at the break point
http://imgur.com/a/ACSwA
Thanks
In the case of the example, it's because of the images.
The images have the class img-responsive, which sets the property max-width: 100%. Since that particular image's max width is 320px, the images itself stop at 320px (the actual div is acting as it should). Either use a bigger image, or remove the max-width property and set width: 100%.
Related
I've designed an image grid using bootstrap using images that are either 360px square, or 360px high by 720px wide. For some reason, the wide images display taller in the row. Any idea why this is happening and how to fix it?
Here is the code in bootply
Thanks!
The images won't display at the same height just because they're the same physical height because they are scaling with your layout. And the padding in each column and elements in the columns reduces the horizontal space available for the images, and when the horizontal size changes, the vertical size will change, too (to scale the image properly).
Look at how the left/wide image is only in a single column, but the 2 images on the right are in 2 columns. There is more padding in the 2 images on the right than on the left (twice as much padding, since there are twice as many images). That's scaling the height of each to be shorter than the image on the left.
I removed the padding from the .col-* classes and .thumbnail to show that if you remove those, the images line up.
http://www.bootply.com/KacXrRCbYH
You would fix this any number of ways, but I think that needs to be up to you as to what's going to work best for your layout. The easiest way is probably just to change the height of the image on the left to account for that padding. 720x341 seems to be the resolution that works there.
http://www.bootply.com/T4F3fdgNyf
I have a container of rows that I'd like to make the container bigger. By default, bootstrap has it at 1200px. I thought that by changing col-md-4 to something like col-lg-4, it would expand the grid but it doesn't for me. Is there a way to expand the grid?
If you don't want to mess around with less variables and just want to increase your container size...make sure your custom css style sheet is called after your bootstrap css so that it isn't overridden and then use a simple css markup in your style sheet such as
#media (min-width: 1200px) {
.container{
width: 1400px;
}
You could even use min-width/max-width properties, or as benja pointed out you could also use container-fluid to maximize your container to the full width of the viewport.
You can use <div class="container-fluid"> for a container that will take the full width of your viewport.
Go to the Customize menu on Bootstrap website and choose your preferred size. In Less Variables -> Grid system you can find a form to input your preferred sizes. Then you can easily download the preferred grid. Hope this will help.
The middle term in col-XX-num corresponds to the screen size that will cause a "break" in your grid so that the items in the grid are responsive. For example, a div with a class of col-sm-4 will take up 4 of the 12 grid cells in a default Bootstrap row until the "small" screen size is noted (in Bootstrap "small" is defined as 750px). Read more about the Bootstrap grid.
If you want to change the width of the Bootstrap container, use this CSS:
.container{
max-width: 1900px;
}
This will make the container wider but will not make your grid bigger. The Bootstrap grid is locked at 12 cells per row. When you use the class col-md-4 as you gave in your example, you are telling Bootstrap to make this element take up 4 out of a possible 12 cells in this row.
Perhaps you will achieve your desired result making your columns take up less cells. Something like col-md-2 then you can use something like col-md-offset-2 to position the column within the row if needed.
Hope this helps!
So i have an website using a three column lay-out with a fixed width of 1000px. I want to convert this to an bootstrap responsive lay-out. What i did was the following:
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-push-2">Main</div>
<div class="col-lg-2 col-lg-pull-8">Left</div>
<div class="col-lg-2">Right</div>
</div>
</div>
I've set the container width for #media (min-width: 1200px) to width : 1000px. The problem i have now is that my sidebars are to small and the middle column is too wide. Changing the left and right col to col-lg-3 makes the colum to wide and the center column to small. I know bootstrap works with percentage so my question is, is this just how bootstrap works and i have to deal with it? Or is it somehow possible to set an fixed width to the sidebars? or is there an other way to make this happen?
thanks
This is how Bootstrap works. If you want to adapt it to your own liking, you should give your Main, Left and Right divs a class of their own and just adapt the % in your CSS.
Just be aware that creating your own %-width DOES NOT make it responsive! What I mean to say is that your divs will resize according to the browser-width, resulting in a very skinny website on mobile phones. Best is to combine this solution with Bootstrap, so Bootstrap takes over whenever your browser gets under X pixels wide, or to write your own #media and change the look of your website according to the width of the page.
Edit: Of course you could also try and override the bootstrap width in your own CSS, but this might result in some weird things when you use the same col-width again on another page.
I'm having some issues with fluid images when using a max height. I'm trying to bound the image in a box that is at most 450x450 or any arbitrary box thats not in the same aspect ratio as the image. What's happening is that the width of the image is being restricted to 450px but the height is not and the image is overflowing the wrapper div.
my code is:
<div class="wrapper">
<div class="container">
<img src="http://i.imgur.com/iw4yOa0.jpg"/>
</div>
</div>
see http://jsfiddle.net/5fuZ5/ for full code and css.
I know I could achieve this by using jquery but I need a responsive solution that doesn't require javascript.
OK i've got a similar issue and could find nothing to help. My situation is that i have a single column of images that are fluid (fit their container 100% in width) works fine for landscape images but portrait are huge as its the width being fitted, therefore tall and skinny image (portrait) is having its width fit to container thus making it massively tall.
My solution was to think about the container, if in the instance of a portrait image i set the container to be 50% of the landscape container then when i fit the images width (when portrait) to a smaller container i get them proportional (ish).
So wat you want is 2 containers to use, one for portrait and landscape, the landscape one will be the maximum width you want so 450px. Now make your portrait container half a width so 225px (half of the width) if all your images are the same aspect ratio then they should all match nicely and give you a structured grid - or if single column the portrait images will be more or less as tall as the landscape images are wide.
If you want to see this working (for a short time) I'll leave this link up so you can see how i solved it. The example is an email (please don't moan about poor coding, its not finished) template I'm making, where i have a single column of images (its responsive) both portrait and landscape - use a class on the table that contains the portrait image (class=portrait) but this could easily be a div.
http://www.sink140.com/sf-test/single.html
My main point is to stop thinking about trying to control the height, just control the container, let the image fill it, and by adjusting the width of the container (making it smaller) you naturally reduce the height of the image.
Aspect ratio of the images in general will ensure you can predict the layout as you have a baseline of sorts - portrait images relate to the landscape ones.
Hope this helps or at least give you another idea.
I'm creating a fluid website design and am specifying min-width and max-width values, however, I'd like the navigation bar background to extend from one side of the screen to the other (not be constrained by the max width), whilst keeping all of the <li> elements in it and all other screen content within the specified widths.
Furthermore, I would also like to set a minimum margin for the page (e.g. 16px) so that there is always a gap between the content and the edge of the page.
Ideally as in the image below:
What's the best way to go about containing everything inside the min-width and max-width values, whilst allowing the navbar background to stretch to the screen width. Also, is there a way I can use margin-left: auto and yet keep a minimum margin value? Whenever I've tried to do this I can only get one or the other.
Thanks for any help in advance.
There are a few different ways to do it, but this jsFiddle illustrates how I would do it: http://jsfiddle.net/joshnh/UDwcp/