Columns: 3 even width bootstrap columns

Creating 3 Even Width Bootstrap Columns

The Bootstrap Grid system enables you to layout page content in a way that will be responsive across screen sizes. Here is a demonstration of how you can use Bootstrap Grid coding to easily create 3 even width columns. In these examples, the left column is 1/3 of the page width (4 column spans), the middle column is 1/3 (4 column spans) and the right column is 1/3 (4 column spans).

First we demonstrate what the columns look like with a couple of paragraphs of lorem ipsum text. Next we show four variations of the HTML code you might use to create the columns. Next we show four examples of columns using these code variations. Observe the behavior as you resize the width of your browser to see the breakpoints at which the columns change from vertical to horizontal display and vice versa. Finally, we talk about the difference between the extra-small, small, medium and large coding of columns.

3 even width columns, shown with lorem ipsum text filler

Grid columns will stack vertically below their breakpoints. The following 3 column example uses md (medium) coding. The columns should display horizontally on large and medium desktops and on tablets when in landscape orientation. Columns should stack vertically on tablets in portrait orientation and on phones.


1 U wouldn't hit a man with no trousers on, would you? you see, in this world there's two kinds of people, my friend: those with loaded guns and those who dig. you dig. at this point, i'd set you up with a chimpanzee if it'd brought you back to the world!

Rehabilitated? well, now let me see. you know, i don't have any idea what that means. bruce... i'm god. boxing is about respect. getting it for yourself, and taking it away from the other guy.

2 U wouldn't hit a man with no trousers on, would you? you see, in this world there's two kinds of people, my friend: those with loaded guns and those who dig. you dig. at this point, i'd set you up with a chimpanzee if it'd brought you back to the world!

Rehabilitated? well, now let me see. you know, i don't have any idea what that means. bruce... i'm god. boxing is about respect. getting it for yourself, and taking it away from the other guy.

3 U wouldn't hit a man with no trousers on, would you? you see, in this world there's two kinds of people, my friend: those with loaded guns and those who dig. you dig. at this point, i'd set you up with a chimpanzee if it'd brought you back to the world!

Rehabilitated? well, now let me see. you know, i don't have any idea what that means. bruce... i'm god. boxing is about respect. getting it for yourself, and taking it away from the other guy.

4 variations* of html used to create the 3 even width column examples (further down)

HTML for 3 even width columns extra-small (phones)

<div class="row">
  <div class="border col-xs-4">.col-xs-4</div>
  <div class="border col-xs-4">.col-xs-4</div>
  <div class="border col-xs-4">.col-xs-4</div>
</div>

HTML for 3 even width columns small (desktops)

<div class="border row">
  <div class="border col-sm-4">.col-sm-4</div>
  <div class="border col-sm-4">.col-sm-4</div>
  <div class="border col-sm-4">.col-sm-4</div>
</div>

HTML for 3 even width columns medium

<div class="border row">
  <div class="border col-md-4">.col-md-4</div>
  <div class="border col-md-4">.col-md-4</div>
  <div class="border col-md-4">.col-md-4</div>
</div>

HTML for 3 even width columns large

<div class="border row">
  <div class="border col-lg-4">.col-lg-4</div>
  <div class="border col-lg-4">.col-lg-4</div>
  <div class="border col-lg-4">.col-lg-4</div>
</div><!--.row-->

4 examples* of 3 even width columns (green background):

3 even width columns using extra-small (phones - less than 768px; Horizontal at all times)

.col-xs-4
.col-xs-4
.col-xs-4

3 even width columns using small (tablets - 768px and up; Collapsed to start, horizontal above breakpoints)

.col-sm-4
.col-sm-4
.col-sm-4

3 even width columns using medium (desktops - 992px and up; Collapsed to start, horizontal above breakpoints)

.col-md-4
.col-md-4
.col-md-4

3 even width columns using large (large desktops - 1200px and up; Collapsed to start, horizontal above breakpoints)

.col-lg-4
.col-lg-4
.col-lg-4

*What's the difference between xs, sm, md, and lg coded columns?

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. To understand why and when to use which column coding type, compare pages coded in each way on a variety of screens: desktops, pads, and phones. On mobile, observe the effect on layout when viewing portrait or landscape mode. You'll see how each coding choice effects column break points - or horizontal column wrapping. You can see most of this behavior by slowly resizing the width of your browser on a desktop. You'll notice the large columns will wrap vertically first, followed by the medium, small and extra small as the browser window gets narrower.

Note that rows must be placed within .container (fixed-width) or .container-fluid (full-width) tags. In the Shoestrap theme, used on this site, these tags reside in the header and footer and not in the WordPress edit page screen. .row is used to create horizontal groups of columns.

Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4 or .col-sm-4 or .col-md-4 or .col-lg-4 divs per row.

Read more about the Bootstrap Grid System here.