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:


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
* {
*:after {

@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:


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


.l-strip {
  width: 100%;

.l-holder {

.l-inner {

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

2 thoughts on “Adding just the Bootstrap grid using less”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s