How to extend Bootstrap 3 grid system

Bootstrap 3 is Awesome!!! I am using this in my project, where I am leaving the Bootstrap Scss/less files untouched and I do not want to modified.

But, I am facing some issues… According to the bootstrap 3 documentation, extra small devices Phones (< 768px) grids are horizontal at all times. But, in my project it is (< 768px) too large width for mobile device. So, I am looking for a way to make the mobile grids to become stacked when the screen is smaller than 480px. So I need to extend bootstrap grid system in between 480 > to < 768 and to declare that I have make new class col-ms-* and that will all the facilities like push, pull, offset, responsive width etc.

Let’s follow how to extend bootstrap grid system with Scss way:

/*
    Extend Bootstrap Grid System
    by - Ruhul - UX Engineer at Brain Station-23
*/


/*Make new grid width
ms means Mid Small*/

$screen-ms:                  480px !default;
$screen-ms-min:              $screen-ms !default;
$screen-tablet-mid:          $screen-ms-min !default;


/*So media queries don't overlap when required, provide a maximum*/

$screen-ms-max:              ($screen-sm-min - 1) !default;



/* For `$screen-sm-min` and up.*/

$container-ms:                 100% !default;




/*Using boostrap loop Framework grid generation*/


@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-ms-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
  @for $i from (1 + 1) through $grid-columns {
    $list: "#{$list}, .col-xs-#{$i}, .col-ms-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
  }
  #{$list} {
    position: relative;
    // Prevent columns from collapsing when empty
    min-height: 1px;
    // Inner gutter via padding
    padding-left:  ($grid-gutter-width / 2);
    padding-right: ($grid-gutter-width / 2);
  }
}



/* [converter] This is defined recursively in LESS, but Sass supports real loops*/
@mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") {
  @for $i from (1 + 1) through $grid-columns {
    $list: "#{$list}, .col-#{$class}-#{$i}";
  }
  #{$list} {
    float: left;
  }
}


@mixin calc-grid-column($index, $class, $type) {
  @if ($type == width) and ($index > 0) {
    .col-#{$class}-#{$index} {
      width: percentage(($index / $grid-columns));
    }
  }
  @if ($type == push) and ($index > 0) {
    .col-#{$class}-push-#{$index} {
      left: percentage(($index / $grid-columns));
    }
  }
  @if ($type == push) and ($index == 0) {
    .col-#{$class}-push-0 {
      left: auto;
    }
  }
  @if ($type == pull) and ($index > 0) {
    .col-#{$class}-pull-#{$index} {
      right: percentage(($index / $grid-columns));
    }
  }
  @if ($type == pull) and ($index == 0) {
    .col-#{$class}-pull-0 {
      right: auto;
    }
  }
  @if ($type == offset) {
    .col-#{$class}-offset-#{$index} {
      margin-left: percentage(($index / $grid-columns));
    }
  }
}

/* [converter] this is defined recursively in less, but sass supports real loops*/

@mixin loop-grid-columns($columns, $class, $type) {
  @for $i from 0 through $columns {
    @include calc-grid-column($i, $class, $type);
  }
}


/*create grid for specific class*/
@mixin make-grid($class) {
  @include float-grid-columns($class);
  @include loop-grid-columns($grid-columns, $class, width);
  @include loop-grid-columns($grid-columns, $class, pull);
  @include loop-grid-columns($grid-columns, $class, push);
  @include loop-grid-columns($grid-columns, $class, offset);
}



/*Generate the small columns*/
@mixin make-ms-column($columns, $gutter: $grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left:  ($gutter / 2);
  padding-right: ($gutter / 2);

  @media (min-width: $screen-ms-min) {
    float: left;
    width: percentage(($columns / $grid-columns));
  }
}
@mixin make-ms-column-offset($columns) {
  @media (min-width: $screen-ms-min) {
    margin-left: percentage(($columns / $grid-columns));
  }
}
@mixin make-ms-column-push($columns) {
  @media (min-width: $screen-ms-min) {
    left: percentage(($columns / $grid-columns));
  }
}
@mixin make-ms-column-pull($columns) {
  @media (min-width: $screen-ms-min) {
    right: percentage(($columns / $grid-columns));
  }
}



/*Custom grid*/
.container{
    @media (min-width: $screen-ms-min) {
    width: $container-ms;
  }
}
  

@media (min-width: $screen-ms-min) {
  @include make-grid(ms);
}

This extend grid file should declare in main scss file. like:

// Core variables and mixins

@import "bootstrap/variables";
@import "bootstrap/mixins";


// Bootstrap Grid Extend
@import "extend-grid/bootstrap-grid-extend";

In normal css file it will looks like:

/*
    Extend Bootstrap Grid System
    by - Ruhul - UX Engineer at Brain Station-23
*/
/*Make new grid width
ms means Mid Small*/
/*So media queries don't overlap when required, provide a maximum*/
/* For `$screen-sm-min` and up.*/
/*Using boostrap loop Framework grid generation*/
/* [converter] This is defined recursively in LESS, but Sass supports real loops*/
/* [converter] this is defined recursively in less, but sass supports real loops*/
/*create grid for specific class*/
/*Generate the small columns*/
/*Custome grid*/
@media (min-width: 480px) {
  .container {
    width: 100%;
  }
}

@media (min-width: 480px) {
  .col-ms-1, .col-ms-2, .col-ms-3, .col-ms-4, .col-ms-5, .col-ms-6, .col-ms-7, .col-ms-8, .col-ms-9, .col-ms-10, .col-ms-11, .col-ms-12 {
    float: left;
  }
  .col-ms-1 {
    width: 8.33333%;
  }
  .col-ms-2 {
    width: 16.66667%;
  }
  .col-ms-3 {
    width: 25%;
  }
  .col-ms-4 {
    width: 33.33333%;
  }
  .col-ms-5 {
    width: 41.66667%;
  }
  .col-ms-6 {
    width: 50%;
  }
  .col-ms-7 {
    width: 58.33333%;
  }
  .col-ms-8 {
    width: 66.66667%;
  }
  .col-ms-9 {
    width: 75%;
  }
  .col-ms-10 {
    width: 83.33333%;
  }
  .col-ms-11 {
    width: 91.66667%;
  }
  .col-ms-12 {
    width: 100%;
  }
  .col-ms-pull-0 {
    right: auto;
  }
  .col-ms-pull-1 {
    right: 8.33333%;
  }
  .col-ms-pull-2 {
    right: 16.66667%;
  }
  .col-ms-pull-3 {
    right: 25%;
  }
  .col-ms-pull-4 {
    right: 33.33333%;
  }
  .col-ms-pull-5 {
    right: 41.66667%;
  }
  .col-ms-pull-6 {
    right: 50%;
  }
  .col-ms-pull-7 {
    right: 58.33333%;
  }
  .col-ms-pull-8 {
    right: 66.66667%;
  }
  .col-ms-pull-9 {
    right: 75%;
  }
  .col-ms-pull-10 {
    right: 83.33333%;
  }
  .col-ms-pull-11 {
    right: 91.66667%;
  }
  .col-ms-pull-12 {
    right: 100%;
  }
  .col-ms-push-0 {
    left: auto;
  }
  .col-ms-push-1 {
    left: 8.33333%;
  }
  .col-ms-push-2 {
    left: 16.66667%;
  }
  .col-ms-push-3 {
    left: 25%;
  }
  .col-ms-push-4 {
    left: 33.33333%;
  }
  .col-ms-push-5 {
    left: 41.66667%;
  }
  .col-ms-push-6 {
    left: 50%;
  }
  .col-ms-push-7 {
    left: 58.33333%;
  }
  .col-ms-push-8 {
    left: 66.66667%;
  }
  .col-ms-push-9 {
    left: 75%;
  }
  .col-ms-push-10 {
    left: 83.33333%;
  }
  .col-ms-push-11 {
    left: 91.66667%;
  }
  .col-ms-push-12 {
    left: 100%;
  }
  .col-ms-offset-0 {
    margin-left: 0%;
  }
  .col-ms-offset-1 {
    margin-left: 8.33333%;
  }
  .col-ms-offset-2 {
    margin-left: 16.66667%;
  }
  .col-ms-offset-3 {
    margin-left: 25%;
  }
  .col-ms-offset-4 {
    margin-left: 33.33333%;
  }
  .col-ms-offset-5 {
    margin-left: 41.66667%;
  }
  .col-ms-offset-6 {
    margin-left: 50%;
  }
  .col-ms-offset-7 {
    margin-left: 58.33333%;
  }
  .col-ms-offset-8 {
    margin-left: 66.66667%;
  }
  .col-ms-offset-9 {
    margin-left: 75%;
  }
  .col-ms-offset-10 {
    margin-left: 83.33333%;
  }
  .col-ms-offset-11 {
    margin-left: 91.66667%;
  }
  .col-ms-offset-12 {
    margin-left: 100%;
  }
}

Thank you for reading the article. I hope this will help you 🙂

Have a great day 🙂 Stay touch!

Advertisements

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