Columns: 2 varying width Bootstrap columns

Creating 2 Varying 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 2 varying width columns. In these examples, the left column is 1/3 of the page width (4 column spans) and the right column is 2/3 of the page width (8 column spans). To make them 2/3 left (8 column spans) and 1/3 right (4 column spans), just flip the columns 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.

2 varying width columns, shown with lorem ipsum text filler

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.

Creating 2 Varying Width Bootstrap Columns2 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.

Don't p!ss down my back and tell me it's raining. you want a guarantee, buy a toaster.

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

HTML for 2 varying width columns extra-small (phones - less than 768px)

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

HTML for 2 varying width columns small (tablets - 768px and up)

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

HTML for 2 varying width columns medium (desktops - 992px and up)

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

HTML for 2 varying width columns large (large desktops - 1200px and up)

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

4 examples* of 2 varying width columns (green background):

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

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

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

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

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

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

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

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

*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 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.