Intro to Bootstrap3's Grid system. http://www.helloerik.com/bootstrap-3-grid-introduction

bootstrap3_grids.md

Bootstrap3 | HTML | Less

Bootstrap3 Gridsystem

Bootstrap3 has 4 column size class variants

col-xs-*
col-sm-*
col-md-*
col-lg-*

The grid is controlled by the viewport size via media queries. At the phone width, the 'xs' class is active. At the desktop width, the 'lg' class is active.

Since Bootstrap3 is mobile first, all the base columns are assumed to be 100% width stacked vertically.

######"Give me 2 columns at the 50%/50% split on the container, but only at the medium size and up!"

<div class="col-md-6">I'm on the left.</div>
<div class="col-md-6">I'm on the right.</div>

Anything smaller than medium, it goes back to each div being 100% width of the container, stacked vertically on top of each other.

######"Give me 2 columns at 50%/50% split on the container from the phone size and all the way up! Don't ever switch me to the 100% width stacked vertically mobile layout!"

<div class="col-xs-6">I'm on the left.</div>
<div class="col-xs-6">I'm on the right.</div>

CAUTION

#####"Give me 50% split columns only at the large size and up!"

<div class="col-lg-6">I'm on the left.</div>
<div class="col-lg-6">I'm on the right.</div>

Caution As soon as you hit the next narrower breakpoint (medium), it'll assume it's a mobile design and take it to 100% width vertically stacked.

Click here for an example.

Mixed width columns

######"Give me 50%/50% split at medium width and 33%/66% split at larger screens! I'm ok with any screen smaller than medium to display a 100% width stacked vertically column!"

<div class="col-md-6 col-lg-4">I'm on the left.</div>
<div class="col-md-6 col-lg-8">I'm on the right.</div>

At medium size viewports, bootstrap will only look at classes with 'md' in them and use those. At larger viewports, I'll use classes with 'lg' in them.

######"On smaller devices, give me a 25%/75% split, on medium devices like tablets give me a 50%/50% split, anything larger give me a 33%/66% split. Anything smaller give me 100% width stacked vertically."

<div class="col-sm-3 col-md-6 col-lg-4">I'm on the left.</div>
<div class="col-sm-9 col-md-6 col-lg-8">I'm on the right.</div>

Click here for an example.

Mixins

If having all those css classes in your html like in the examples above bothers you, you can use mixins! You can create your rows and columns purely from mixins and leave any grid markup out of your html!

2 Basic mixin types for creating the grid:

1. .make-row();

2. .make-xs-column(); .make-sm-column(); .make-md-column(); .make-lg-column();

Example 1 (using LESS)

HTML

<div class="left-and-right">               <!--This will be the row-->
	<div class="left">On the left.</div>   <!--This will be a column-->
	<div class="right">On the right.</div> <!--This will be a column-->
</div>

CSS/LESS

.left-and-right {
	.make-row();
	.left {
		.make-md-column(6);
	}
	.right {
		.make-md-column(6);
	}
}

Example 2 (using LESS)

Mixins for all for layout sizes

<!-- Using the same HTML as Example 1 -->

.left-and-right {
	.make-row();
	.left {
		.make-xs-column(2);
		.make-sm-column(1);
		.make-md-column(7);
		.make-lg-column(4);
	}
	.right {
		.make-xs-column(10);
		.make-sm-column(11);
		.make-md-column(5);
		.make-lg-column(8);
	}
}

Click here for an example.

Offsetting

I don't really understand what offsetting does or what it's for but I know that it'll push an element to the right and keep it centered depending on the column size class.

Example

<div class="container">
  <div class="row">
    <div class="left col-md-4 col-md-offset-4">I'm centered.</div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="left col-md-4 col-xs-offset-4">I'm centered, kinda.</div>
  </div>
</div>

Push/Pull

As with the offsetting, I don't really know the purpose of push/pull but it allows you to write the columns in one order but display them in another.

Example

 <div class="container">
  <div class="row">
    <div class="left col-md-4 col-md-push-8">I'm on the left.</div>
    <div class="right col-md-8 col-md-pull-4">I'm on the right.</div>
  </div>
</div>

Play with these two examples in the browser.

Full-Width Fluid Containers

If you want a site a part of the site that is the full width of the browser and fluid at all times, you have to make your own .container class. Since Bootstrap is mobile first, the default state is the 100% fluid width column. So if you want all the bigger viewports to function the same way, you make a new container class and wrap your rows in it.

.my-fluid-container {
	padding-left: 15px;
	padding-right: 15px;
	margin-left: auto;
	margin-right: auto;
}

The padding ensures that nothing touches the edges.

Example

<div class="my-fluid-container">
	<div class="col-sm-6">I'm on the left.</div>
	<div class="col-sm-6">I'm on the right.</div>
</div>

Click here for an example.

Using both responsive class attributes and mixins

A real world example.

.main-content {
  .make-row();
  .sidebar {
    padding: 20px;
    @media(min-width: @screen-desktop) {
      padding: 30px;
    }
    h2 {
      font-size: 20px;
      @media(min-width: @screen-desktop) {
        font-size: 30px
      }
    }
    .make-sm-column(2);
    .make-md-column(3);
  }
  .content-area {
    line-height: 1.2em;
    @media(min-width: @screen-desktop) {
      line-height: 1.6em;
    }
    h1 {
      font-size: 30px;
      @media(min-width: @screen-desktop) {
        font-size: 40px;
      }
    }
    .make-sm-column(10);
    .make-md-column(9);
  }
}

CSS media query

h1 {
  font-size: 22px;
  margin: bottom 10px;
  @media (min-width:@screen-tablet) {
    font-size: 40px;
    margin-bottom: 20px;
    margin-left: 20px;
  }
}

The styles within the media query only apply to viewports that are past that min-width. Therefore tablets and desktops i.e. the tablet and desktop breakpoints.