Bootstrap - Columns

Bootstrap

← Prev Next →

In this tutorial we will learn more about columns in Bootstrap.

In the previous tutorial we learned about the containers and the grid system and how to create columns using different column classes like .col-xs-, .col-sm-, .col-md- and .col-lg-.

Varying columns

In the following example we are creating 3 columns of varying width. The first div is taking 6 columns. The second one is taking 4 columns and the last one is taking 2 columns.

Complete code in my GitHub repository.

<div class="row">

	<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 my-col">Div 1</div>

	<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 my-col">Div 2</div>

	<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 my-col">Div 3</div>

</div>

I am using the .my-col class to style the columns.

Output

Offsetting columns

To move the columns to the right we use the following classes .col-xs-offset-*, .col-sm-offset-* .col-md-offset-* and .col-lg-offset-* where, * can be any integer value from 1 to 12.

In the following example we are setting an offset of 1 column to the first div. An offset of 2 columns to the second div.

The first div is taking 3 columns and the second div is taking 6 columns.

To stay in one row the column value and offset value must add to 12.

<div class="row">

	<div class="col-xs-3 col-xs-offset-1 col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-1 col-lg-3 col-lg-offset-1 my-col">Div 1</div>

	<div class="col-xs-6 col-xs-offset-2 col-sm-6 col-sm-offset-2 col-md-6 col-md-offset-2 col-lg-6 col-lg-offset-2 my-col">Div 2</div>

</div>

Adding the columns and column offsets to get 12.

Output

Nesting columns

We can even nest columns in Bootstrap. In the following example we have two parent divs taking 4 and 8 columns. Inside the first parent div we have 4 divs each taking 3 columns. And inside the second parent div we have 6 divs each taking 2 columns.

<div class="row">

	<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 my-col">
		
		<p>Div 1</p>

		<div class="row">
			<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 my-sub-col">Sub-div 1</div>

			<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 my-sub-col">Sub-div 2</div>

			<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 my-sub-col">Sub-div 3</div>

			<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 my-sub-col">Sub-div 4</div>
		</div>

	</div>

	<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 my-col">
		
		<p>Div 2</p>

		<div class="row">
			<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 my-sub-col">Sub-div 1</div>

			<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 my-sub-col">Sub-div 2</div>

			<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 my-sub-col">Sub-div 3</div>

			<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 my-sub-col">Sub-div 4</div>

			<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 my-sub-col">Sub-div 5</div>

			<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 my-sub-col">Sub-div 6</div>
		</div>

	</div>

</div>

I am using .my-col and .my-sub-col class to style the divs.

Output

Ordering columns

We can change the ordering of the column by using the .col-*-pull-* and .col-*-push-* classes.

In the following example we have two columns inside a row and we are ordering them using the ordering classes.

<div class="row">

	<div class="col-md-8 col-md-push-4 my-col">
		Div 1
	</div>

	<div class="col-md-4 col-md-pull-8 my-col">
		Div 2
	</div>

</div>

Output

← Prev Next →