Darren Bachan Darren Bachan - 6 months ago 31
Javascript Question

Using bootstrap, how do you get columns to clear properly?

http://darrenbachan.com/playground/syau/index.html#!/

I know you guys expect code in here to help resolve problems, but I'm using bootstrap, so it's their code. If you take a look at the roster section the heights are all messed up. I had two hacky solutions, one was going in and specifically placing a class on certain divs with clear:both, the other solution was applying a fixed height onto the columns. I wanted something dynamic.

Right now certain roster members are not placed correctly, it should be a 4 up column grid.

Also, to avoid creating two posts. I have a second issue. I cannot figure out how to put a background image on my video. My css is:

.full-img {
background: url('../img/fallback.jpg');
background-size: cover;
}


Another issue I'm having is centering the .banner-text div vertically, my code for that was:

.banner-text {
position: relative;
z-index: 200;
text-align: left;
display: table;
padding-top: 60px;
padding-bottom: 60px;
float: left;
}
.banner-text h1 {
display: table-cell;
vertical-align: middle;
}


But that didnt work, which is why I have padding on the div to fake it.

I'm sort of new to this whole front-end stuff, so I'd be open to any suggestions to anything else if you guys pick up on anything.

Answer

Bootstrap has a helper class called clearfix that you should put in an empty div after every 4 columns in md mode, after every 3 columns in sm mode, and after every 2 columns in xs mode. The way you do that is by using the visible-lg-block, visible-md-block, visible-sm-block and visible-xs-block classes so they only have effect at the appropriate sizes.

Here is an example:

<div class="col-xs-6 col-sm-4 col-md-3"></div>
<div class="col-xs-6 col-sm-4 col-md-3"></div><div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4 col-md-3"></div><div class="clearfix visible-sm-block"></div>
<div class="col-xs-6 col-sm-4 col-md-3"></div><div class="clearfix visible-xs-block visible-md-block visible-lg-block"></div>
<div class="col-xs-6 col-sm-4 col-md-3"></div>
<div class="col-xs-6 col-sm-4 col-md-3"></div><div class="clearfix visible-xs-block visible-sm-block"></div>
<div class="col-xs-6 col-sm-4 col-md-3"></div>
<div class="col-xs-6 col-sm-4 col-md-3"></div><div class="clearfix visible-xs-block visible-md-block visible-lg-block"></div>

Note where the visible-*-block classes overlap because of common multiples.

For the vertical alignment of the banner text

It looks you were on the right track, you just have to give the .banner-text a 100% height, and you need to do the same for the .row and .container that wraps it.

So basically,

.banner-text {
    position: relative;
    z-index: 200;
    text-align: left;
    display: table;
    padding-top: 60px;
    padding-bottom: 60px;
    float: left;
    height:100%
}
.banner-text h1 {
    display: table-cell;
    vertical-align: middle;
}

And then give the row and container above it a height:100%. You could give them IDs so you can target them in css or just do it inline.

Comments