Intro to Bootstrap Grid columns

Intro to Bootstrap Grid columns with examples

Bootstrap Grid Examples 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 an unlimited number of page rows and columns with a large number of layout permutations.

The Grid is based on a max of 12 columns and these columns can be spanned to make fewer columns. Columns can also be nested, as shown below. In the next section there's a grey border around the parent row to make it easy to distinguish. In the left side of the parent row, a 9 column span contains another row containing 12 more columns.

Grid columns will stack vertically below their breakpoints. By resizing the browser width on a large desktop monitor, you will see the lg columns stack first, followed by the md, the sm and finally the xs. Built in media queries in Bootstrap create column breakpoints as follows: Extra small devices xs (phones, less than 768px); Small devices sm (tablets, 768px and up); Medium devices md (desktops, 992px and up); Large devices lg (large desktops, 1200px and up).

New to Bootstrap? Many themes leverage Bootstrap because it's open source and arguably the best responsive html/css/js framework on which to build quality themes. The purpose of this page is to show examples using the Bootstrap Grid to frame out content. Each section shows the HTML code that was used to render the section. This site uses the open source Shoestrap-3 theme. Shoestap by default uses the Bootstrap 3 code base. Observe the behavior of columns 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.

Parent column (span 9 col)

Let's look at how columns either stack or lay out horizontally depending on the HTML used to define the columns and the size of the window they're being viewed on.

Grid columns will stack vertically below their breakpoints. By resizing the browser width on a large desktop monitor, you will see the lg columns stack first, followed by the md and finally the sm. The xs never stacks in this example since there is no viewport defined that is smaller than a phone width. In portrait orientation on an iPhone, the last few columns are forced to wrap because even displaying only a single character in each column exceeds the width of the viewport in this example.

Child columns (child span 12 cols within parent 9 cols)

XS for Phones
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
SM for Tablets
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
MD for Small Desktops
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
LG for Large Destops
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1

The HTML for the green columns is listed below

Note the classes nomargin (to adjust left and right margins) and col-border (for grey border and green background) are custom — not Bootstrap — CSS.

HTML for columns extra-small (phones) and larger

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

HTML for columns small (tables) and larger

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

HTML for columns medium (desktops) and larger

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

HTML for columns large (large desktops)

<div class="nomargin row">
  <div class="col-border col-lg-1">.col-lg-1</div>
  <div class="col-border col-lg-1">.col-lg-1</div>
  <div class="col-border col-lg-1">.col-lg-1</div>
  <div class="col-border col-lg-1">.col-lg-1</div>
  <div class="col-border col-lg-1">.col-lg-1</div>
  <div class="col-border col-lg-1">.col-lg-1</div>
  <div class="col-border col-lg-1">.col-lg-1</div>
  <div class="col-border col-lg-1">.col-lg-1</div>
  <div class="col-border col-lg-1">.col-lg-1</div>
  <div class="col-border col-lg-1">.col-lg-1</div>
  <div class="col-border col-lg-1">.col-lg-1</div>
  <div class="col-border col-lg-1">.col-lg-1</div>
</div>

Parent column (span 3 col)

More Bootstrap Column Examples:

Ipsum compliments of Picksum Ipsum

You are as precious to me as you were to your own mother and father. i swore to them that i would protect you, and i haven't. your were only supposed to blow the bloody doors off. jasper: your baby is the miracle the whole world has been waiting for. when i get back, remind to tell you about the time i took 100 nuns to nairobi! when i get back, remind to tell you about the time i took 100 nuns to nairobi! you wouldn't hit a man with no trousers on, would you? you're only supposed to blow the bloody doors off! at this point, i'd set you up with a chimpanzee if it'd brought you back to the world! you know, your bobby dangler, giggle stick, your general-two-colonels, master of ceremonies... yeah, don't be shy, let's have a look. i want to shoot the pigeons... off my roof. you are as precious to me as you were to your own mother and father. i swore to them that i would protect you, and i haven't. at this point, i'd set you up with a chimpanzee if it'd brought you back to the world!

Jasper: your baby is the miracle the whole world has been waiting for. i took a viagra, got stuck in me throat, i've had a stiff neck for hours. pull my finger! it's not the size mate, it's how you use it. you know, your bobby dangler, giggle stick, your general-two-colonels, master of ceremonies... yeah, don't be shy, let's have a look. when i get back, remind to tell you about the time i took 100 nuns to nairobi! my lord! you're a tripod. you're only supposed to blow the bloody doors off! you are as precious to me as you were to your own mother and father. i swore to them that i would protect you, and i haven't. you wouldn't hit a man with no trousers on, would you? it's not the size mate, it's how you use it. pull my finger!

I want to shoot the pigeons... off my roof. yes, i used a machine gun. your were only supposed to blow the bloody doors off. yes, i used a machine gun. your were only supposed to blow the bloody doors off. i took a viagra, got stuck in me throat, i've had a stiff neck for hours. i took a viagra, got stuck in me throat, i've had a stiff neck for hours. my lord! you're a tripod. you know, your bobby dangler, giggle stick, your general-two-colonels, master of ceremonies... yeah, don't be shy, let's have a look. at this point, i'd set you up with a chimpanzee if it'd brought you back to the world! i want to shoot the pigeons... off my roof. jasper: your baby is the miracle the whole world has been waiting for.

My lord! you're a tripod. yes, i used a machine gun. you wouldn't hit a man with no trousers on, would you? it's not the size mate, it's how you use it.

let's have a look. at this point, i'd set you i've had a stiff neck for hours. when i get back, remind to tell you about the time i took 100 nuns to nairobi! it's not the size mate, it's how you use it. you're only supposed to blow the bloody doors off! pull my finger! I took a viagra, got stuck in me throat, i've had a stiff neck for hours. when i get back, remind to tell you about the time i took 100 nuns to nairobi! you're only supposed to blow the bloody doors off! you are as precious to me as you were to your own mother and father. i swore to them that i would protect you, and i haven't.

The green columns below consist of 4 even width columns — each spans 2 cols — and 1 spanning 4 cols.

These are coded as md so they will display horizontally on medium and larger screens and stack vertically on small (tablets) and extra small (phone) screens. Try resizing your browser to see the responsiveness at different widths.

Keep in mind that the Bootstrap Grid by default uses the following media queries to create column breakpoints:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

md-2

Bootstrap Grid is fluid, responsive & mobile first.

md-2

Bootstrap Grid is fluid, responsive & mobile first.

md-2

Bootstrap Grid is fluid, responsive & mobile first.

md-2

Bootstrap Grid is fluid, responsive & mobile first.

md-4

Bootstrap Grid is fluid, responsive & mobile first.