Gap in Bootstrap stacked rows - html

I am building a Bootstrap 3 grid that will become a portfolio page eventually. In the following bootply, in the first example, you can see it works perfectly stacking from 6 to 4 to 3 in my bootply
However in the second example, on the same bootply, there is an item where the tile for the item is longer and it causes a gap in the grid when it stacks.
What is the best bootstrap friendly ,solution to this? Any help much appreciated.

There are a couple of ways to handle this:
Give all of the elements in your portfolio a set height.
Use something like masonry to dynamically "fit" the elements into the available space.
Use the responsive classes and clearfix as described in the doc under the heading Responsive column resets, in the Grid secion.
Use jQuery to adjust the column heights dynamically.
If your content is dynamically generated so that you don't know which elements will have longer content, and you have different layouts set for different breakpoints, the responsive classes approach can be a bear to adapt. I use a little trick. After each element in the grid, I add a div that I can apply a mini clearfix to using media queries. It's extra markup, but it solves the problem nicely and allows me to have readable and maintainable markup while avoiding the use of javascript to adjust the layout. Here's an example using your markup:
Updated Bootply
<div class="row portfolio"> <!--Add a class so you can target with nth-child-->
<div class="col-lg-2 col-sm-3 col-xs-4">
<div class="panel panel-default">
<div class="panel-body">
<a href="#">
<img src="http://placehold.it/200x200" class="img-thumbnail img-responsive">
</a>
</div>
<div class="panel-footer">
This is text
</div>
</div>
</div>
<div class="clear"></div> <!--Here's the added div after every element-->
....
</div> <!--/.portfolio.row-->
CSS:
#media (max-width: 767px) {
.portfolio>.clear:nth-child(6n)::before {
content: '';
display: table;
clear: both;
}
}
#media (min-width: 768px) and (max-width: 1199px) {
.portfolio>.clear:nth-child(8n)::before {
content: '';
display: table;
clear: both;
}
}
#media (min-width: 1200px) {
.portfolio>.clear:nth-child(12n)::before {
content: '';
display: table;
clear: both;
}
}
If you prefer the jQuery route (again, this assumes that you've added a class "portfolio" to the row that contains your portfolio elements for easier targeting):
var row=$('.portfolio');
$.each(row, function() {
var maxh=0;
$.each($(this).find('div[class^="col-"]'), function() {
if($(this).height() > maxh)
maxh=$(this).height();
});
$.each($(this).find('div[class^="col-"]'), function() {
$(this).height(maxh);
});
});

A Bootstrap "only" approach is to use Bootstrap's .clearfix. You have to iterate this every x number of columns, so in your case a clearfix div would be placed after the 6th col-lg-2. This will work for lg screen widths..
http://www.bootply.com/SV0kI3TSN3
However since you're using multiple responsive breakpoints, you'd need to place a clearfix where the md and xs colums wrap too. This will prevent the gap at all screen widths.
http://www.bootply.com/3TsF0arPRS
Update 2017
1 - As explained above, the 'clearfix' approach (recommended by Bootstrap) like this (requires iteration every x columns). This will force a wrap every 3 columns
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="clearfix"></div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="clearfix"></div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
Clearfix Demo (single tier)
Clearfix Demo (responsive tiers)
There is also a CSS-only variation of the 'clearfix' (unsupported).
http://www.codeply.com/go/lUbs1JgXUd
2 - Make the columns the same height (using flexbox):
Since the issue is caused by the difference in height, you can make columns equal height across each row. Flexbox is the best way to do this, and is natively supported in Bootstrap 4.
.row.display-flex {
display: flex;
flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
display: flex;
flex-direction: column;
}
Flexbox equal height Demo
3 - CSS3 columns approach (Masonry-like CSS solution)..
This is not native to Bootstrap 3, but another approach using CSS multi-columns. One downside to this approach is the column order is top-to-bottom instead of left-to-right.
CSS3 columns Demo
4 - JavaScript/jQuery approach
Finally, you may want to use a plugin such as Isotope/Masonry:
Bootstrap Masonry Demo
More on Bootstrap Variable Height Columns

I had the same problem with two panels side-by-side in a row.
I did not find any CSS hack for this, so I gave the two panels a same-height class and I use this JS code.
boxes = $(".same-height");
maxHeight = Math.max.apply(Math, boxes.map(function () {
return $(this).height()
}).get());
boxes.height(maxHeight);
Here is a BootPly link that use the code above: http://www.bootply.com/622XyQ0oH5
Of course, you have to adapt your CSS rules I you want to avoid blank spaces.

Related

Bootstrap 4 full width grids

I can't figure out how to make the grids to extend to the container's full width no matter how many columns there are
<div class="container">
<div class="row">
<div class="col-md-2 first"></div>
<div class="col-md-9 second"></div>
</div>
</div>
In the example above are displayed 2 columns inline and the .row having full width.Yet if i remove the first div(keeping the exact same code), the second div will change its position to left and will keep the original width.I need it to stretch to the full width of the container.The reason i need this is because i'll have some php conditional expression that will prevent it from showing,in which case i want the template to change and the second div to be full width and position on the middle.
I found an answer with the following CSS which indeed worked but it also messed the responsive structure and i'll have to patch it up till no end probably:
CSS:
.row{
display: table;
width: 100%;
}
.first, .second{
display: table-cell;
float: none;
}
.second{
width: 100%;
}
Since i'm a newbie with Bootstrap, i was wondering if there is any built in class which solves this problem? Thank you
In this case, just have the first div as col-2 and the second one as col.
col will be 100% width if col-2 is missing, but if it is there, col will fill the remaining columns.
Check out the Grid system documentation.
I'm not sure why you're using display:table. Just use Bootstrap 4 auto-layout grid, and the second will fill the width if the first is missing/hidden.
"Auto-layout for flexbox grid columns also means you can set the width
of one column and have the sibling columns automatically resize around
it."
https://www.codeply.com/go/igkSq57Vwn
<div class="row">
<div class="col-md-2 first"></div>
<div class="col-md second"></div>
</div>
i have same problem . and you can fix it by set (margin : 0px) for row (by style attribute or id in css file) and set (padding : 0px) for col (by style attribute or id in css file)

How to use bootstrap to create responsive two-column layout with left column really narrow

I have been using bootstrap responsive 12 column grid layout for my website.
I have the layout like follows (stripped down version for example purpose)
<div class='container-fluid'>
<div class='row'>
<div class='col-md-1'>
Left side contents go here
</div>
<div class='col-md-11'>
Right side contents go here
</div>
</div>
</div>
What I need now, is that the left side column is wider than what I want. How can I make it fixed-length narrow and still use Bootstrap layout?
Any help is appreciated!
A clean solution would be customizing bootstrap to have more columns, like this answer:
How to use bootstrap with 16 or 24 columns
Other alternative is using nested rows, but that could end up with problems like unused space, so my suggestion is customizing bootstrap.
you can make a nested row within a column
For eg-
<div class="row">
<div class="col-md-1">
<div class="row">
<div class="col-md-offset-9 col-md-3"><!-- offset-9 leave space in left and start in last three of column --></div>
</div>
</div>
<div class="col-md-11"></div>
</div>
The issue you're having is an issue with how grid systems work. What they're designed to do is describe a fixed set of column widths: the content of those columns should expand to fill them. What you want is the inverse of this: you want the content to define the width.
You've effectively got three good options, and in order from least -> best in terms of getting what you want with the simplest markup:
Live with it (or have more columns as suggested, say 24).
Put the two columns of content in a block[1], apply display:table; width: 100%;. Make the two child items display:table-cell, use white-space:nowrap on the left-hand one and make the right-hand one width: 99%.
Put the two columns of content in a block[1], apply display:flex, and apply flex:1 to the right-hand child item.
Flex is the best solution, but needs IE10+ if that's an issue.
.container {
max-width: 400px;
margin: 0 auto;
}
[class^="row-"] {
margin: 10px 0;
}
.row-1 {
display: table;
width: 100%;
}
[class^="col-1-"] {
display: table-cell;
}
.col-1-left {
white-space: nowrap;
}
.col-1-right {
width: 99%;
}
.row-2 {
display: flex;
}
.col-2-right {
flex: 1;
}
<div class='container'>
<div class='row-1'>
<div class='col-1-left'>Some content</div>
<div class='col-1-right'>Some content</div>
</div>
<div class='row-2'>
<div class='col-2-left'>Some content</div>
<div class='col-2-right'>Some content</div>
</div>
</div>

Responsive 4 box grid from two to one columns

I'm a beginner in css and I have a little problem. I tested different methods to handle a responsive 4 div grid with css, and I failed.
I want to responsively arrange the 4 divs as an grid with 2 columns and, if the display is to narrow it should be floating to a one column layout.
Here is a sketch of the responsive grid:
Here is a simple responsive grid with 4 div boxes in plain CSS and HTML it aranges from two to one columns when the browser width becomes smaller :
DEMO (resize the result window to see the effect)
Note that the max-width value on the #container is set to 450px so that 2 blocks + their margin can fit by width in two colmuns.
When the widow is smaller than 450px the width of the #container adapts to the window width and as the block can't fit anymore, they rearage to one column.
#container {
text-align: center;
max-width: 450px;
margin: 0 auto;
}
.block {
width: 200px;
height: 200px;
margin: 10px;
display: inline-block;
background: #00CC99;
}
<div id="container">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
</div>
You may want to check out Bootstrap, and specifically their Grid System. You can easily accomplish what you want with that. Otherwise, you'd want to look into writing your own CSS Media Queries to handle the different screen sizes.
Here's a JSFiddle showing how this can be achieved using Bootstrap. Just drag the side of the Result container to make it smaller and you can see the blocks shift. This may need some tweaking but it should get you going.
<div class="row">
<div class="col-sm-2 col-sm-offset-3 col-xs-12">
<div class="block">1</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="block">2</div>
</div>
<div class="col-sm-2 col-sm-offset-3 col-xs-12">
<div class="block">3</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="block">4</div>
</div>
</div>
In the above code, I'm creating a Bootstrap Grid which uses 12 columns. You can specify the column width at different screen sizes, for example the class col-sm-2 is saying use 2/12ths of the width for small screen sizes, then offset it 3 to center it. col-xs-12 says to use the full width for extra small screen sizes (essentially moving each block to its own row for extra small screens). Note the row class as well which is also Bootstrap specific.
Hopefully this helps!
Bootstrap is a great tool to do this as the above answerer said. Bootstrap allows you to position items in a grid layout (as you want).
Another way to do this is create media queries in css that will take effect when the browser has a smaller or larger min-width.
I recommend using Bootstrap as all of the heavy lifting is done for you and you would just have to make small tweaks to ensure it looks like you want it to.

insert padding to bootstrap column grid

I have designed web form in bootstrap v3.
I want to add spaces between text-box and labels in this form with maintaining its responsiveness.
Its 4 Column grid (Medium & Large Devices) & 2 Column grid ( Small Devices)
jsfiddle : Fiddle Demo
<div class="container">
<div class="col-md-12">
</div>
</div>
The .form-group elements are collapsing upon themselves because their children elements are being floated. To solve this, either add a clearfix or add overflow:hidden. Unfortunately, in doing so, the form doesn't maintain responsiveness, therefore you can use the following CSS to fix it. In short, this floats every other .form-group element when the screen size is greater than 992px.
Updated Example Here
#media(min-width:992px) {
.form-group {
width:50%;
}
.form-group:nth-child(2n) {
float:right;
}
.form-group:nth-child(2n + 1) {
float:left;
}
}
want to be fully responsive form?
something like this adds the column col-sm
<label class="col-xs-12 col-sm-6 col-md-3 control-label" for="Title">Title</label>
http://jsfiddle.net/LXary/1/

Maintaining divs side-by-side in responsive design

As a beginner user of Bootstrap's grid system, I need to keep two divs side-by-side using a float:left regardless of device. This is so that a jQuery animation moves a parent div right and left to bring either div into view. How to structure the HTML of the green boxes to achieve this effect? Or it purely a css media query matter?
Disregard the blue box.
This is what I have so far:
<div class="container">
<div class="col-xs-12 col-md-7 view">
<div id="panelviewer">
<div class="row">
<div class="col-xs-12 col-md-6 panel1">one</div>
<div class="col-xs-12 col-md-6 panel2">two</div>
</div>
</div>
</div>
</div>
Jsfiddle
There are other ways to keep the divs side by side and achieve what you need:
#panelviewer .row {white-space:nowrap;}
.panel1 {display:inline-block;float:none;background:#aaa;}
.panel2 {display:inline-block;float:none;background:#eee;}
Demo http://jsfiddle.net/7HcQ8/3/
No matter what unless you implicitly specify in a media query and your cells are too wide to fit in mobile it will force onto two lines. In this case when it hits the mobile breakpoint decrease the size of the content so it will fit. Place a unique class on those DIVs such as class="sizeSmaller" and this might help out:
#media (max-width: 768px) {
.sizeSmaller {
height:50%;
width:50%;
}
}
Adjust the width of the media query to suit your neds.