Instantly share code, notes, and snippets.

Embed
What would you like to do?
// Bootstrap Mid-Small - col-ms-* - the missing grid set for Bootstrap3.
//
// This is a hack to fill the gap between 480 and 760 pixels - a missing range
// in the bootstrap responsive grid structure. Use these classes to style pages
// on cellphones when they transition from portrait to landscape.
//
// NOTE: Here I use SASS instead of LESS for styling. To convert to LESS
// replace '$screen' with '@screen' and '$grid' with '@grid'.
//
// See https://github.com/twbs/bootstrap/issues/10203 for more info.
//
// Columns, offsets, pushes, and pulls for the ms device range, from phones
// to tablets.
//
// Note that `.col-ms-12` doesn't get floated on purpose—there's no need since
// it's full-width.
@import 'bootstrap';
// ----- common styles - from twbs/bootstrap/blob/master/less/grid.less -----
.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 {
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);
}
// ----- col-ms breakpoints and related classes -----
@media (min-width: $screen-xs) {
.container {
@media (max-width: $screen-sm ) {
max-width: $screen-sm - 20px;
}
}
.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 {
float: left;
}
.col-ms-1 { width: percentage((1 / $grid-columns)); }
.col-ms-2 { width: percentage((2 / $grid-columns)); }
.col-ms-3 { width: percentage((3 / $grid-columns)); }
.col-ms-4 { width: percentage((4 / $grid-columns)); }
.col-ms-5 { width: percentage((5 / $grid-columns)); }
.col-ms-6 { width: percentage((6 / $grid-columns)); }
.col-ms-7 { width: percentage((7 / $grid-columns)); }
.col-ms-8 { width: percentage((8 / $grid-columns)); }
.col-ms-9 { width: percentage((9 / $grid-columns)); }
.col-ms-10 { width: percentage((10/ $grid-columns)); }
.col-ms-11 { width: percentage((11/ $grid-columns)); }
.col-ms-12 { width: 100%; }
// Push and pull columns for source order changes
.col-ms-push-1 { left: percentage((1 / $grid-columns)); }
.col-ms-push-2 { left: percentage((2 / $grid-columns)); }
.col-ms-push-3 { left: percentage((3 / $grid-columns)); }
.col-ms-push-4 { left: percentage((4 / $grid-columns)); }
.col-ms-push-5 { left: percentage((5 / $grid-columns)); }
.col-ms-push-6 { left: percentage((6 / $grid-columns)); }
.col-ms-push-7 { left: percentage((7 / $grid-columns)); }
.col-ms-push-8 { left: percentage((8 / $grid-columns)); }
.col-ms-push-9 { left: percentage((9 / $grid-columns)); }
.col-ms-push-10 { left: percentage((10/ $grid-columns)); }
.col-ms-push-11 { left: percentage((11/ $grid-columns)); }
.col-ms-pull-1 { right: percentage((1 / $grid-columns)); }
.col-ms-pull-2 { right: percentage((2 / $grid-columns)); }
.col-ms-pull-3 { right: percentage((3 / $grid-columns)); }
.col-ms-pull-4 { right: percentage((4 / $grid-columns)); }
.col-ms-pull-5 { right: percentage((5 / $grid-columns)); }
.col-ms-pull-6 { right: percentage((6 / $grid-columns)); }
.col-ms-pull-7 { right: percentage((7 / $grid-columns)); }
.col-ms-pull-8 { right: percentage((8 / $grid-columns)); }
.col-ms-pull-9 { right: percentage((9 / $grid-columns)); }
.col-ms-pull-10 { right: percentage((10/ $grid-columns)); }
.col-ms-pull-11 { right: percentage((11/ $grid-columns)); }
// Offsets
.col-ms-offset-1 { margin-left: percentage((1 / $grid-columns)); }
.col-ms-offset-2 { margin-left: percentage((2 / $grid-columns)); }
.col-ms-offset-3 { margin-left: percentage((3 / $grid-columns)); }
.col-ms-offset-4 { margin-left: percentage((4 / $grid-columns)); }
.col-ms-offset-5 { margin-left: percentage((5 / $grid-columns)); }
.col-ms-offset-6 { margin-left: percentage((6 / $grid-columns)); }
.col-ms-offset-7 { margin-left: percentage((7 / $grid-columns)); }
.col-ms-offset-8 { margin-left: percentage((8 / $grid-columns)); }
.col-ms-offset-9 { margin-left: percentage((9 / $grid-columns)); }
.col-ms-offset-10 { margin-left: percentage((10/ $grid-columns)); }
.col-ms-offset-11 { margin-left: percentage((11/ $grid-columns)); }
}
@zzseba78

This comment has been minimized.

Show comment
Hide comment
@zzseba78

zzseba78 Sep 27, 2013

Hi, i´m new in bootstrap 3, think it´s amazing but i need to implement your hack since i have to creat a breakpoint in 480. Can you explain how to implement this hack? i´ve css/ js/ folders only, where and how i have to put this code?
Thanks!!

zzseba78 commented Sep 27, 2013

Hi, i´m new in bootstrap 3, think it´s amazing but i need to implement your hack since i have to creat a breakpoint in 480. Can you explain how to implement this hack? i´ve css/ js/ folders only, where and how i have to put this code?
Thanks!!

@aaronsbrown

This comment has been minimized.

Show comment
Hide comment
@aaronsbrown

aaronsbrown Nov 27, 2013

works great!

aaronsbrown commented Nov 27, 2013

works great!

@sujin2f

This comment has been minimized.

Show comment
Hide comment
@sujin2f

sujin2f Jan 23, 2014

Oh! Thank you :)

sujin2f commented Jan 23, 2014

Oh! Thank you :)

@joeczucha

This comment has been minimized.

Show comment
Hide comment
@joeczucha

joeczucha Feb 14, 2014

I'm using the SCSS version of bootstrap. I don't seem to be able to @import this after the bootstrap.scss @import as while the ms styles work, the md and lg styles then don't (as the ms are being defined afterwards). Is there a better way of using this without messing with the bootstrap core files?

joeczucha commented Feb 14, 2014

I'm using the SCSS version of bootstrap. I don't seem to be able to @import this after the bootstrap.scss @import as while the ms styles work, the md and lg styles then don't (as the ms are being defined afterwards). Is there a better way of using this without messing with the bootstrap core files?

@mitramejia

This comment has been minimized.

Show comment
Hide comment
@mitramejia

mitramejia commented Mar 13, 2014

AWESOME!!

@Jakobud

This comment has been minimized.

Show comment
Hide comment
@Jakobud

Jakobud Apr 7, 2014

This appears to break the small, medium and large layouts when I add it. I removed the @import "bootstrap"; from the code, and then added the following at the bottom of bootstrap.scss:

@import "bootstrap/grid-ms";

Then I tried the following code:

<div class='container'>
    <div class='row'>
        <div class='col-xs-2 col-ms-4 col-sm-6 col-md-8 col-lg-10' style='background: red'>
            test
        </div>
        <div class='col-xs-10 col-ms-8 col-sm-6 col-md-4 col-lg-2' style='background: blue'>
            test
        </div>
    </div>
</div>

I see the xsmall and midsmall breakpoints work, but small, medium, and large don't work anymore. What did I do wrong here?

Jakobud commented Apr 7, 2014

This appears to break the small, medium and large layouts when I add it. I removed the @import "bootstrap"; from the code, and then added the following at the bottom of bootstrap.scss:

@import "bootstrap/grid-ms";

Then I tried the following code:

<div class='container'>
    <div class='row'>
        <div class='col-xs-2 col-ms-4 col-sm-6 col-md-8 col-lg-10' style='background: red'>
            test
        </div>
        <div class='col-xs-10 col-ms-8 col-sm-6 col-md-4 col-lg-2' style='background: blue'>
            test
        </div>
    </div>
</div>

I see the xsmall and midsmall breakpoints work, but small, medium, and large don't work anymore. What did I do wrong here?

@noctivityinc

This comment has been minimized.

Show comment
Hide comment
@noctivityinc

noctivityinc May 28, 2014

Can you PLEASE add visibility helper classes to this?

noctivityinc commented May 28, 2014

Can you PLEASE add visibility helper classes to this?

@stevebrowndotco

This comment has been minimized.

Show comment
Hide comment
@stevebrowndotco

stevebrowndotco Jun 18, 2014

Great solution, to support visibility helper classes, you can add this at the top (providing you include bootstrap.less).
Note this is done in less.

@screen-xs-max: 480px; //overrides responsive-utilities
@screen-ms-max: 768px;

.visible-ms {
  @media (max-width: @screen-ms-max) {
    .responsive-visibility();
  }
}

.hidden-ms {
  @media (max-width: @screen-ms-max) {
    .responsive-invisibility();
  }
}

This is a hack for now because it's not supported in the main library.

stevebrowndotco commented Jun 18, 2014

Great solution, to support visibility helper classes, you can add this at the top (providing you include bootstrap.less).
Note this is done in less.

@screen-xs-max: 480px; //overrides responsive-utilities
@screen-ms-max: 768px;

.visible-ms {
  @media (max-width: @screen-ms-max) {
    .responsive-visibility();
  }
}

.hidden-ms {
  @media (max-width: @screen-ms-max) {
    .responsive-invisibility();
  }
}

This is a hack for now because it's not supported in the main library.

@hballesteros

This comment has been minimized.

Show comment
Hide comment
@hballesteros

hballesteros Jun 22, 2014

Solution to Jakobud

replace

@media (min-width: $screen-xs) {
 .container { 
  @media (max-width: $screen-sm ) {
     max-width: $screen-sm - 20px;
   }
 }

to

@media (min-width: $screen-xs) and (max-width: $screen-xs-max) {
 .container { 
  @media (max-width: $screen-sm ) {
     max-width: $screen-sm - 20px;
   }
 }

hballesteros commented Jun 22, 2014

Solution to Jakobud

replace

@media (min-width: $screen-xs) {
 .container { 
  @media (max-width: $screen-sm ) {
     max-width: $screen-sm - 20px;
   }
 }

to

@media (min-width: $screen-xs) and (max-width: $screen-xs-max) {
 .container { 
  @media (max-width: $screen-sm ) {
     max-width: $screen-sm - 20px;
   }
 }
@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Jul 14, 2014

Is this hack still working on Boostrap 3.2.0 ?

ghost commented Jul 14, 2014

Is this hack still working on Boostrap 3.2.0 ?

@zakariyaInnoveins

This comment has been minimized.

Show comment
Hide comment
@zakariyaInnoveins

zakariyaInnoveins Aug 5, 2014

I think at line 18 the code should be :

@media (min-width: 480px) and (max-width: 768px) {

I'm working with BS 3.2.0 No issue yet after making this change.

zakariyaInnoveins commented Aug 5, 2014

I think at line 18 the code should be :

@media (min-width: 480px) and (max-width: 768px) {

I'm working with BS 3.2.0 No issue yet after making this change.

@ddx32

This comment has been minimized.

Show comment
Hide comment
@ddx32

ddx32 Oct 2, 2014

Thank you for this hack.
It's also quite easy to implement this mixin version for us semantics nerds (in LESS):

@screen-ms-min: 480px;

.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));
  }
}
.make-ms-column-offset(@columns) {
  @media (min-width: @screen-ms-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-ms-column-push(@columns) {
  @media (min-width: @screen-ms-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-ms-column-pull(@columns) {
  @media (min-width: @screen-ms-min) {
    right: percentage((@columns / @grid-columns));
  }
}

ddx32 commented Oct 2, 2014

Thank you for this hack.
It's also quite easy to implement this mixin version for us semantics nerds (in LESS):

@screen-ms-min: 480px;

.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));
  }
}
.make-ms-column-offset(@columns) {
  @media (min-width: @screen-ms-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-ms-column-push(@columns) {
  @media (min-width: @screen-ms-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-ms-column-pull(@columns) {
  @media (min-width: @screen-ms-min) {
    right: percentage((@columns / @grid-columns));
  }
}
@satyapatidar

This comment has been minimized.

Show comment
Hide comment
@satyapatidar

satyapatidar Oct 22, 2014

Really very helpful, thanks a ton!!

satyapatidar commented Oct 22, 2014

Really very helpful, thanks a ton!!

@simozecchi

This comment has been minimized.

Show comment
Hide comment
@simozecchi

simozecchi Oct 28, 2014

This seems pretty useful but it doesn't include any licencing information. How do I know if I can use it?

simozecchi commented Oct 28, 2014

This seems pretty useful but it doesn't include any licencing information. How do I know if I can use it?

@seyDoggy

This comment has been minimized.

Show comment
Hide comment
@seyDoggy

seyDoggy Nov 22, 2014

I've forked this gist and changed the following:

  • added $screen-ms variables (min = 640, max = $screen-sm - 1)
  • added $container-ms variable
  • globally changed the $screen-xs-max to equal $screen-ms-min - 1 (so col-xs covers 480 to 639 as far as helpers are concerned)
  • added .visible-ms-* helpers
  • added .hidden-ms helper
  • container size reads from $container-ms

Gist: https://gist.github.com/seyDoggy/4f370a676f5db6df2d1d

seyDoggy commented Nov 22, 2014

I've forked this gist and changed the following:

  • added $screen-ms variables (min = 640, max = $screen-sm - 1)
  • added $container-ms variable
  • globally changed the $screen-xs-max to equal $screen-ms-min - 1 (so col-xs covers 480 to 639 as far as helpers are concerned)
  • added .visible-ms-* helpers
  • added .hidden-ms helper
  • container size reads from $container-ms

Gist: https://gist.github.com/seyDoggy/4f370a676f5db6df2d1d

@mewsoft

This comment has been minimized.

Show comment
Hide comment
@mewsoft

mewsoft Jan 13, 2015

I am facing the same need for this breakpoint. The xs range is too wide up to 768px, remember that some desktops until few years were 640px. the range 480px to 768px is a good viewport for many uses not as a phone stacked range < 480px.

mewsoft commented Jan 13, 2015

I am facing the same need for this breakpoint. The xs range is too wide up to 768px, remember that some desktops until few years were 640px. the range 480px to 768px is a good viewport for many uses not as a phone stacked range < 480px.

@Noctim

This comment has been minimized.

Show comment
Hide comment
@Noctim

Noctim Feb 18, 2015

I'm facing the same problem as Jakobud!

the "col-ms-x" rule seems to overwrite everything "above" it. It's impossible to combine it with "col-sm-x" or "col-md-x", because they're getting completely ignored. Smaller sizes like "col-xs-x" seem to work.

Any workaround / fix so far?

Noctim commented Feb 18, 2015

I'm facing the same problem as Jakobud!

the "col-ms-x" rule seems to overwrite everything "above" it. It's impossible to combine it with "col-sm-x" or "col-md-x", because they're getting completely ignored. Smaller sizes like "col-xs-x" seem to work.

Any workaround / fix so far?

@mediastuttgart

This comment has been minimized.

Show comment
Hide comment
@mediastuttgart

mediastuttgart Mar 1, 2015

Thanks for the gist and inspiration. I changed the naming to sx since for me ms always felt larger than sm. Here's my scss mixin https://gist.github.com/mediastuttgart/caa6e410c5aed8eebd92.

mediastuttgart commented Mar 1, 2015

Thanks for the gist and inspiration. I changed the naming to sx since for me ms always felt larger than sm. Here's my scss mixin https://gist.github.com/mediastuttgart/caa6e410c5aed8eebd92.

@beatrizdominguez

This comment has been minimized.

Show comment
Hide comment
@beatrizdominguez

beatrizdominguez May 19, 2015

Great!! Thanks.

You can also add visibility adding this

.visible-ms {
display: block !important;
}

beatrizdominguez commented May 19, 2015

Great!! Thanks.

You can also add visibility adding this

.visible-ms {
display: block !important;
}

@dorthrithil

This comment has been minimized.

Show comment
Hide comment
@dorthrithil

dorthrithil Jun 11, 2015

Thanks a lot!

@Noctim: try hballesteros fix - it works for me.

dorthrithil commented Jun 11, 2015

Thanks a lot!

@Noctim: try hballesteros fix - it works for me.

@AndersDJohnson

This comment has been minimized.

Show comment
Hide comment
@AndersDJohnson

AndersDJohnson commented Sep 8, 2015

FYI I've published similar code as https://github.com/adjohnson916/bootstrap-grid-ms.

@dorthrithil

This comment has been minimized.

Show comment
Hide comment
@dorthrithil

dorthrithil Sep 10, 2015

Thanks! I'm using them in my current project.

dorthrithil commented Sep 10, 2015

Thanks! I'm using them in my current project.

@VanTudor

This comment has been minimized.

Show comment
Hide comment
@VanTudor

VanTudor Nov 21, 2015

I had the same issues as Jakobud. What i did was dumping the whole code into a .scss file, deleting the @import 'bootstrap' thing and replacing this

@media (min-width: $screen-xs) {
  .container {
    @media (max-width: $screen-sm ) {
      max-width: $screen-sm - 20px;
    }
  }

with this

@media (max-width: $screen-xs) {
  .container {
    @media (max-width: $screen-sm ) {
      max-width: $screen-sm - 20px;
    }
  }

Cheers mate. Thanks for the code.

VanTudor commented Nov 21, 2015

I had the same issues as Jakobud. What i did was dumping the whole code into a .scss file, deleting the @import 'bootstrap' thing and replacing this

@media (min-width: $screen-xs) {
  .container {
    @media (max-width: $screen-sm ) {
      max-width: $screen-sm - 20px;
    }
  }

with this

@media (max-width: $screen-xs) {
  .container {
    @media (max-width: $screen-sm ) {
      max-width: $screen-sm - 20px;
    }
  }

Cheers mate. Thanks for the code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment