Using Bootstrap v4alpha and I am trying to layout 24 pictures w/ caption underneath in grid. Let's call a tile a picture with its caption.
1) I want the tiles to be aligned vertically and horizontally as we would have if using a < table > tag with align top and left. My pictures are of the same size, but the caption length varies.
2) the number of columns adjusts with screen size. On a small screen, we would have 2 columns and 12 rows. On a medium screen 3 cols by 4 rows. On a large screen 4 cols and 3 rows.
I tried the Cards Columns and it's almost what I need, except the masonry look. I want them also aligned in rows.
I also tried the Grid Options with col-sm-6, col-md-4, and col-lg-3 however the problem lies in the fact I need to wrap a fix number of tiles within a tag < div class="row" >.
This problem also exist in previous versions of Bootstrap, but if there is a specific solution for v4, I would like to know as well.
You can just wrap all .col-*-* with one single <div class="row">...</div>. Your content will wrap when needed.
Now, as for your other question: You don't need to make sure that there are exactly 12 columns in each row for each screen size. If a column doesn't fit anymore (for example you have .col-*-11 and then .col-*-2) it will go to the next row automatically, even if the previous row is not 100% full.
Another example taken from Bootstrap's documentation
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
Here .col-4 would introduce columns 10-13, but since there are only 12 columns, the whole div goes to the next row.
Bootstrap 4
I made a fiddle to show you, how this would work in Bootstrap 4. v4's grid system is based on flexbox and in flexbox an items will grow to use all available vertical space. This means that in a row of columns, each column will be as tall as the tallest column.
This is a huge difference to Bootstrap 3 and means that there is no need to compensate for different heights of the content.
Bootstrap 3
I originally based my answer on Bootstrap 3 and there are a few differences, so I'll keep that original answer (slightly modified) here as well for anybody who needs it.
In Bootstrap 3, you can omit the .row altogether and use .container as the parent to all the .col-*-*.
You can check out this fiddle to see the difference between using .row and not using .row to layout a grid of images. Just adjust the width of the result-frame and scroll down to see the difference when there are 3 images in a row. Of course you can also use one single .row to put all your .cols inside.
Compensating for different content height
However, since Bootstrap 3 uses floats instead of flexbox, this introduces the problem that if your columns are not the same height, the next column might start at the right of the highest element of the previous column when you want it to start at the left of the screen. So in order to push an element below all previous elements, you need to clear these floats.
Bootstrap 3 provides a class for this, you can just insert <div class="clearfix"> whenever you want to clear the floats. Additionally, you will have to hide that div for screensizes where you don't want to clear the floats, you can use the classes .hidden-* to achieve that.
<div class="container">
<div class="col-sm-6 col-md-4 col-lg-3">
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
</div>
<!-- on small devices the first row is full here, so we add a clearfix and hide it for medium and large sizes -->
<div class="clearfix hidden-md hidden-lg"></div>
<div class="col-sm-6 col-md-4 col-lg-3">
</div>
<!-- on medium devices the first row is full here, so we add a clearfix and hide it for small and large sizes -->
<div class="clearfix hidden-sm hidden-lg"></div>
<div class="col-sm-6 col-md-4 col-lg-3">
</div>
</div>
Again, I made a fiddle to show the whole thing in action.
Related
Fairly new to design and coding, and working on my first freeCodeCamp project. Anyway, I have a row that's divided into three medium columns like so:
<div class="row">
<div class="col-md-4 pb-3"></div>
<div class="col-md-4 pb-3"></div>
<div class="col-md-4 pb-3"></div>
</div>
The pb-3 class is just to add some padding below each item for mobile. Anyway, each column has a YouTube video embedded in it. On desktop, the padding on the outside edges of the outer columns is just right, but there's too much padding BETWEEN the columns, presumably because each column is providing its own padding, so the padding is doubled. I've tried tweaking the padding to fix this, but the problem is that if I give different columns different padding, the YouTube content is resized and looks wonky.
Here's the link to the full CodePen if anyone wants to take a closer look.
Thanks!
~Seth~
I want to change the default behaviour of the bootstrap grid system. I'm using the following lines of codes to display two columns in my page:
<div class="col-md-8" id="one">
...
</div>
<div class="col-md-4" id="two">
...
</div>
When the screen size is too small to display both columns next to each other bootstrap positions the div one above div two. I want to invert this behaviour so that it positions div two above div one. However if it is enough space for both columns the default behaviour should stay the same.
Change the order of the <div>'s such that two comes first to make the order on the small screen correct. Then use col-md-push-8 and col-md-pull-4 to push and pull the two and one columns into the correct order on larger screens.
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-4 col-md-push-8">two</div>
<div class="col-md-8 col-md-pull-4">one</div>
See http://getbootstrap.com/css/#grid-column-ordering for some background information on column ordering
I have an issue related to using a bootstrap grid in and angular/bootstrap modal. The content that is in the grid are checkboxes with names next to them. The names can vary in length so they can potentially wrap to 2 lines (technically there could be as many wrapped lines as there are unique words in the name, but typically that would be <=2). The oddness that I see is that if there is a name in the first column that has to wrap, but the same row of the 2nd and 3rd columns do not wrap, things look fine and there is no empty line space. Screenshot. When the first column doesn't wrap on a given row but the 2nd or 3rd column does have to wrap, there is a big empty space in the 1st column (2), but when the first column is the one that wraps, columns 2 and 3 work fine (1).
It is especially noticeable when the wrapping cascades, like screenshot 2.
Html for grid:
<div class="row">
<div ng-repeat="courseStudent in course.students">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 cell">
<label>
<div class="input-wrapper">
<input type="checkbox" ng-checked="courseStudent.assigned" ng-click="toggleStudent(course,courseStudent)"/>
</div>
<div>{{courseStudent.student.name}}</div>
<div class="clearfix"></div>
</label>
</div>
</div>
LESS for grid
.row {
.input-wrapper {
float: left;
width: 14%;
}
}
Does anyone know how, if possible, to have the grid collapse that empty space evenly? When I look in the dev tools, that space doesn't even show up. None of the divs for the surrounding cells have padding or seem to occupy that space. Any ideas?
bootstrap 3.3.1
angularjs 1.2.15
angular-bootstrap 0.10.0
The reason this happens is that each of the columns uses float left to create the grid. So, you have a couple of options:
If you know the maximum height your inputs, then you can give your cell class a set height. This might not be ideal since you're dynamically generating your content.
Use a plugin like Masonry to make the content 'fit' into the available space. This creates a cool tiled effect, but may not be ideal for your particular content.
Use jQuery or vanilla Javascript to dynamically adjust the column heights to be equal to the maximum height of the tallest column div.
A jQuery example of the third option would look like (actually, I guess since you're using AngularJS, you should do this in a directive, but here's an example anyway):
var row=$('.row');
$.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);
});
});
P.S. There's really no need to include a col class for every breakpoint as you have done here: <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 cell">. It is sufficient to just write: <div class="col-sm-4 col-xs-6 cell">. Think of col classes as additive. You only need to specify one at a particular breakpoint if you want to change the behavior at that point.
The official Bootstrap answer, in the link in #jme11's comment needs to be a top level answer. See also his link to the bootstrap docs. Insert this div between the rows which need to be reset.
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
I'm a little confused by the Bootstrap 3 documentation and thus usage of the .col-xs-* classes.
The docs for Grid Options say that all of the grid systems use 12 columns.
If you take a look at Bootstrap 3's docs for an Example Mobile and Desktop layout they show the first row's .col-xs-* classes totaling 18 column units.
What gives? How can this be? Are the docs wrong?
Thank you
Bootstrap is a 12 column rid, but you can put more than 12 columns in a row. The remaining columns will simply wrap onto the next line below, depending on the viewport.
In this example, on "md" viewports (≥992px), the contents would span 12 columns total (8 + 4). But on "xs" (<768px) the content would span 18 columns, there would be one full row (12 columns) and then below it a half-row (6 columns).
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
md...
| 8 | 4 |
xs...
| 12 |
| 6 |
EDIT: Make sure to check out the Responsive Column Reset section of the documentation if you run into any issues with columns not wrapping correctly.
Think of the grid layout more in terms of a different grid for every size, lg, md, sm, and xs (or break points to be specific) that use the same markup. It might help to break open a few browser instances and an example of a grid layout. Follow along with this fiddle, or this markup:
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-1">.col-xs-12 .col-sm-6 col-lg-1</div>
<div class="col-xs-12 col-sm-6 col-lg-1">.col-xs-12 .col-md-6 col-lg-1</div>
<div class="col-xs-12 col-sm-6 col-lg-1">.col-xs-12 .col-md-6 col-lg-1</div>
</div>
You'll need to know your viewport's width in pixels, so consider a browser plugin that makes this information readily available or open up a console and run this snippet:
Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
Start with a viewport > 1200 pixels:
The actual columns are decided by the col-lg-* classes because of the breakpoint. This will create a grid for that breakpoint.
Now look at the other two break points, col-sm-* and col-xs-*.
col-sm-* in affect:
col-xs-* in affect:
The break points allow you to create a completely new grid per size. So, in theory, the rows act as a "strict" new row, where as the col numbers like
<div class='col-xs-12'>col-xs-12</div>
<div class='col-xs-12'>col-xs-12</div>
can force a new row if the sum > 12. This is so that you don't have to have umpteen different markup templates for different breakpoints. They are guides.
The amount of rows a column occupies is the last number of the class.
So for example, these following classes:
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
will result in a single row on the md-width displays but one and a half row on xs-width displays.
This simply means that on small displays those elements won't display side-by-side, but instead on top of each other.
I have a problem understanding how row-fluid class works. According to the documentation it adjusts itself to fluid design such as responsive design. So if it has enough space it makes it fit on the same row otherwise it goes to the next line.
However looking at this example here : https://duelify.com/
Strangely enough the first three article headers fit on first row.
Second row and rest are slightly pushed to the right. But looking at the html (below) no additional classes are involved to cause this 'side effect'.
Why aren't the article headers fitting in the one row. Why is there this random gap in between? Is there a way to make them appear ordered without any gaps in between?
In your case, proper code will be like
<div class="row-fluid">
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
</div>
<div class="row-fluid">
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
</div>
etc...
In every row-fluid class maximum sum of span classes must be up to 12. Span classes have left margin. Only last child in one row-fluid don't have left margin.
Look again now at examples on Twitter Bootstrap documentation. "For a simple two column layout, create a .row and add the appropriate number of .span columns. As this is a 12-column grid, each .span spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent)."
There are a couple of things going on here. Remember, by default, the total size of the spans in a fluid-row should add up to 12. There is quite a bit more here, so when the css defines the width of a span4 as approximately 33% they are actually exceeding 100%, so they are going to a new line. But they are not clearing, so you end up with them looping around and making columns like on the page.
The reason you have the space to the left of what would be the second row is that bootstrap defines 'gutters' to give the columns some margin. Because of the excess columns being used you see them. There is specific css to reduce the gutter on the first span of a row to 0, hence why there is no space on the first one.
The subsequent 'rows' have only two columns because the presence of the additional gutter throws off the math and makes the three span4s add up to more than 100% width, causing them to wrap.
The following code will work after container (for Responsive layout):
<div class="container-fluid">
<div class="row-fluid">
<div class="span4"></div>
</div>
<div class="row-fluid">
<div class="span4"></div>
</div>
</div>