Adding just the Bootstrap grid using less

Sometimes we want to use only the Bootstrap grid in a project and not everything else. We then use Less and the Bootstrap Mixins to incorporate the grid throughout our project. If you would like to do the same then follow these steps:

1. Download Bootstrap using the “Download Source” link here .

2. Put the ‘bootstrap/less’ folder from the download into your project folder. Best to be in the same folder as your project Less files.

3. Include the following files from that bootstrap/less folder in the top of your main less file:

variables.less
mixins.less
normalize.less
scaffolding.less
grid.less

If you do not want to include the whole scaffolding file you can just pull out the necessary code (see below) and include that directly to your main Less file. Below is how our main Less file looks:

/* Core variables and mixins */
@import "bootstrap/less/variables.less";
@import "bootstrap/less/mixins.less";

/* Reset and dependencies */
@import "bootstrap/less/normalize.less";

// Pull out the necessary code from bootstrap/less/scaffolding.less
// Reset the box-sizing
* {
  .box-sizing(border-box);
}
*:before,
*:after {
  .box-sizing(border-box);
}

@import "bootstrap/less/grid.less";

4. You can now start using the Bootstrap grid mixins documented within the Bootstrap documentation in your project.

Below is an example of how we set our modules out. We wrap everything in the .l-strip but this is just a personal way of doing things and can be ignored:

HTML

<div class="l-strip">
  <div class="l-holder">
    <div class="l-inner">
      <div class="module">The module</div>
    </div>
  </div>
</div>

CSS

.l-strip {
  width: 100%;
  .clearfix;
}

.l-holder {
  .container;
}

.l-inner {
  .make-row();
}

.module {
  .make-xs-column( 8 );
  .make-xs-column-offset( 2 );
  .make-md-column( 6 );
  .make-md-column-offset( 3 );
}