Bootstrap 3, el manual oficial

2.7. Variables y mixins de LESS

Además de las clases CSS listas para definir rejillas rápidamente, Bootstrap incluye variables y mixins de LESS para generar fácilmente tus propios diseños web semánticos.

2.7.1. Variables

Las variables establecen el número de columnas, su separación y la anchura del navegador a partir de la cual las columnas flotan horizontalmente en vez de mostrarse una encima de otra. Los valores por defecto de estas variables son los que se muestran a continuación:

@grid-columns:          12;
@grid-gutter-width:     30px;
@grid-float-breakpoint: 768px;

2.7.2. Mixins

Los mixins, junto con las variables anteriores, permiten crear estilos semánticos para los diferentes elementos de la rejilla.

// Crea un elemento contenedor de varias columnas
.make-row(@gutter: @grid-gutter-width) {
  // Limpiar las columnas flotadas
  .clearfix();

  @media (min-width: @screen-small) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Aplicar un margen negativo a la fila para alinear el
  // contenido de las columnas
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generar las columnas extra pequeñas
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Evitar que las columnas no se vean cuando están vacías
  min-height: 1px;
  // Utilizar padding para separar las columnas
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calcular la anchura en función del número de columnas
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generar las columnas pequeñas
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Evitar que las columnas no se vean cuando están vacías
  min-height: 1px;
  // Utilizar padding para separar las columnas
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calcular la anchura en función del número de columnas
  @media (min-width: @screen-small) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-small) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-small) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-small) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generar las columnas medianas
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Evitar que las columnas no se vean cuando están vacías
  min-height: 1px;
  // Utilizar padding para separar las columnas
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calcular la anchura en función del número de columnas
  @media (min-width: @screen-medium) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generar los desplazamientos de las columnas medianas
.make-md-column-offset(@columns) {
  @media (min-width: @screen-medium) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-medium) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-medium) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generar las columnas grandes
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Evitar que las columnas no se vean cuando están vacías
  min-height: 1px;
  // Utilizar padding para separar las columnas
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calcular la anchura en función del número de columnas
  @media (min-width: @screen-large) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generar los desplazamientos de las columnas grandes
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-large) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-large) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-large) {
    right: percentage((@columns / @grid-columns));
  }
}

2.7.3. Ejemplo de uso

Utilizando los mixins anteriores y modificando el valor de las variables para ajustarlos a tus necesidades, ya puedes crear diseños web semánticos. Este ejemplo muestra cómo crear un diseño a dos columnas con una separación entre los dos:

.wrapper {
  .make-row();
}
.content-main {
  .make-column(8);
}
.content-secondary {
  .make-column(3);
  .make-column-offset(1);
}

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>