Tutorial by Examples | RIP Tutorial

The Naive First Attempt

Before we begin, let's define some CSS for the examples. This is the head section of our sample. I always use border-radius and background-color when I'm testing, because it makes seeing cell divisions simple without adding any border size which could affect the size of the cells. <head> ...

twitter-bootstrap • Using Clearfix in Rows and Cols

The Height Problem

In our "naive example", all of our cells were the same height. The browser willingly broke the lines exactly where we wanted, and all seemed right with the world. Until height comes into the picture. Let's take the previous example and give some height to some of the cells, maybe like you...

twitter-bootstrap • Using Clearfix in Rows and Cols

2,4,6 Layout with Clearfixes

Here's a layout that renders two, four, or six cells across depending on screen size. <div class="container-fluid"> <div class="row"> <div class="col-xs-6 col-md-3 col-lg-2">1</div> <div class="col-xs-6 col-md-3 co...

twitter-bootstrap • Using Clearfix in Rows and Cols

Why Would Bootstrap Columns Exceed 12 in a Row?

There are many responsive scenarios where it's necessary to have column units exceeding 12 in a single .row element. This is known as column wrapping. If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line. For example, cons...

twitter-bootstrap • Using Clearfix in Rows and Cols