From the course: Dreamweaver CC 2015: Responsive Design with Bootstrap

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Clearing columns of uneven length

Clearing columns of uneven length - Dreamweaver Tutorial

From the course: Dreamweaver CC 2015: Responsive Design with Bootstrap

Start my 1-month free trial

Clearing columns of uneven length

- Bootstrap columns are floated left, and since columns are rarely of equal length, you get this sort of problem where this longer column is preventing this subsequent one from moving all the way across to the left. This situation arises when there isn't sufficient space for all nested columns to sit alongside each other inside their parent row. To fix this problem, you need to clear the float using Bootstrap helper classes at the appropriate point. In our layout, on medium and large devices, the columns in the highlight section are arranged three abreast, like this. But on small devices, they're only two abreast. So, let's deal with the layout for small devices first. Go to the Visual Media Queries bar and click just to the right of 650 pixels and that gives us the layout for small devices, and if we scroll down, actually, there's no problem here at the moment, but there would be a problem if you have columns of different lengths. To clear the float, you need to insert an empty div…

Contents