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


Tags: jquery,html,css,twitter-bootstrap

Problem :

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.



Solution :

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.


    CSS Howto..

    How to add media='screen' in css using cakePHP?

    How to set css class for Rails date_select year select?

    How to determine largest possible font-size such that it fits on one line in CSS [closed]

    How can I override inline styles with external CSS?

    How to make a table scrollable with fixed header?

    How to draw heart with text in middle?

    How read(get) css style value of a server-side div in code behind(not set)?

    how to select last element in the page?

    how to change the css in td on mouse click using javascript

    How to change an image onclick while li on current status using pure CSS?

    CSS: How to set a fallback for bold font families?

    How to reference CSS children [duplicate]

    How to make a border in css that is actually on the very edges

    How to get similar effect on menu

    Materialize CSS Showing errors on form fields

    How can the common text message format be replicated purely with CSS?

    Don't understand how to control css elements with jQuery css

    How to align dropdown sub menu?

    Why the input box is showing so different on Ipad but not on chrome

    How is it that CSS borders create a triangle?

    How to style differently only the first list item from unsorted list

    How to change the width of a CSS flex-box column?

    How to set one CSS rule for two tags?

    How to customized select element through css?

    how to make a stretchable blog header

    How to remove right border

    How to use the float:left property in CSS without having the trouble I have?

    how to: dynamically switch css page

    How to remove/ignore :hover css style on touch devices

    How can I get to see the full image in the background?