Check out our Angular Book Series.

Make a two column layout in Bootstrap

Multi-column layouts are a common requirement when building building HTML web sites or applications. In the old days, we would just use an HTML table and be done with it. But, these days using CSS for layout is the preferred approach. Using HTML tables for layout is considered a bad idea. Bootstrap provides an easy way to create a two column layout.

Create the two column layout: The Old Way

If I were using HTML tables to create a two column layout, I'd do something like this:


<table style="width:100%">
<tr>
<td>Label</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Some Other Label</td>
<td><input type="text" placeaholder="second text" /></td>
</tr>
</table>

This is an HTML table with two rows, and two cells in each row. This is simple, but the HTML can get complex if you are nesting tables to get specific layouts. When I started building HTML sites; this was the defacto standard for complex layouts.

Play with this sample!

Nowdays, CSS is considered superior for layout purposes than using lots of nested tables, and Bootstrap is a great framework to help you do that.

Import Bootstrap

The first step is to import the Bootstrap library into your HTML page. Bootstrap is primarily a CSS library, but also has a JavaScript portion. For the purposes of this article, we just need the CSS:


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >

Now all of the Bootstrap CSS is available to our application.

The Bootstrap Grid System

Bootstrap includes styles for a grid system consisting of rows and up to 12 columns. These are the associated styles:

  • row
  • Col-md-1
  • Col-md-2
  • Col-md-3
  • Col-md-4
  • Col-md-5
  • Col-md-6
  • Col-md-7
  • Col-md-8
  • Col-md-9
  • Col-md-10
  • Col-md-11
  • Col-md-12

The first style, row, is used to dictate a row in the grid. Inside the row; you would use some combination of the column styles to dictate the length of your cell; across a 12 column row. The col-md-1 style would span across a single column. The col-md-6 style would span across 6 columns. The col-md-12 style would spread across 12 columns, or a whole row. When putting together layouts with this approach, I like to make sure the total number of cells matches 12 for each row.

Create the two column layout: With Bootstrap

Bootstrap styles can be used to create a similar layout to the one created earlier, with a table. First, create the Bootstrap row:


<div id="row">
</div>

Inside the row, we can create two separate columns. For the purposes of this article, both will use col-md-6, meaning each column will span 6 cells, totaling 12 cells:


<div class="col-md-6">
Label
</div>
<div class="col-md-6">
<input type="text" />
</div>

The reason for making sure that the total number of columns used is equal to 12 is so that the next row will be placed under the first row; instead of next to it.

We can use the same approach for the second row:


<div id="row">
<div class="col-md-6">
Some Other Label
</div>
<div class="col-md-6">
<input type="text" placeaholder="second text" />
</div>
</div>

Play with the code here

Final Thoughts

The Bootstrap Grid system can be very powerful, especially when dealing with nested layout elements.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
All Content Copyright 2005, 2006, 2007, 2008, 2009 Jeffry Houser. May not be reused without permission
BlogCFC was created by Raymond Camden. This blog is running version 5.9.2.002.