Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
updated max-width: 767px to avoid breaking the existing behavior on col-sm
.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;
min-height: 1px;
padding-left: 15px;
padding-right: 15px; }
@media (min-width: 480px) and (max-width: 767px) {
.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: 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-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-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-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%; }
}
@media (min-width: 480px) and (max-width: 767px) {
.container {
max-width: 748px; }
.form-horizontal .form-group .control-label {text-align:right;}
}
@vrocescoca

This comment has been minimized.

Copy link

commented Feb 1, 2014

Very nice, thanks very much

@eSerenity

This comment has been minimized.

Copy link

commented Feb 16, 2014

Thank you, this is great! Do you plan on adding hidden-ms and visible-ms? It woould be extremely useful.

@codigovision

This comment has been minimized.

Copy link

commented Mar 17, 2014

Thanks for posting this! I spent hours searching for the best solution and this is definitely the quickest and easiest. Also I think the only one that works if you're using the compiled Bootstrap version from a cdn. So just wanted to say thanks, and confirm it is working great.

@lawnzapper

This comment has been minimized.

Copy link

commented May 27, 2014

Thank you, I was looking for this!

@mi5ha

This comment has been minimized.

Copy link

commented Aug 1, 2014

I was on a verge of replacing Bootstrap with something else if I didnt find this. thank you!

Adding new brekapoint to Bootstrap definitely is NOT trivial, and the lack of 480px breakpoint is quite strange?

@luci79rom

This comment has been minimized.

Copy link

commented Aug 1, 2014

Very nice! Thanks.

@voiprodrigo

This comment has been minimized.

Copy link

commented Nov 19, 2014

Life saver. Thanks!

@thebouv

This comment has been minimized.

Copy link

commented Feb 5, 2015

Love this btw, but had to fork and add the following so you can reset offset like you can with the others:

.col-ms-offset-0 {
    margin-left: 0; 
}
@hyharryhuang

This comment has been minimized.

Copy link

commented Apr 9, 2015

Awesome, thanks for this!

@francipesca

This comment has been minimized.

Copy link

commented May 6, 2015

Works brilliantly! Thank you!

@BegoMG

This comment has been minimized.

Copy link

commented May 11, 2015

I'm feeling a lot of love right now...
Thanks!!!!

@Weaknessy

This comment has been minimized.

Copy link

commented Aug 29, 2015

Excellent fork for excellent solution!
Please hint me how to add responsive utilities: hidden-ms and visible-ms,
I could probably add them myself, just need a little hint xD

@samjonesigd

This comment has been minimized.

Copy link

commented Jan 6, 2016

@Weaknessy @eSerenity

.visable-ms{
display:block;
}

.hidden-ms{
display:none;
}

@Willi-Reebonz

This comment has been minimized.

Copy link

commented Mar 5, 2016

Perfect.
Thank you very much.

@MathiasZaja

This comment has been minimized.

Copy link

commented Aug 14, 2016

It is a usefull correction to orginal @andyl solution, thanks.
However one problem stiil remains: bootstrap scaling up functionality as mentionned in https://getbootstrap.com/examples/grid/

Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.
This is lost when adding bootstrap_ms.css.

will not propagate for col-sm-6; we have to specify it explicitely with:
Could it be fixed ? Regards
@MathiasZaja

This comment has been minimized.

Copy link

commented Aug 14, 2016

Typographical correction, sorry:
<div class="col-xs-12 col-ms-6"> will not propagate for col-sm-6;
we have to specify it explicitely with: <div class="col-xs-12 col-ms-6 col-sm-6">

@wobblymusic

This comment has been minimized.

Copy link

commented Sep 4, 2016

@MathiasZaja - ms is bigger than sm here. Therefore, the correct propagation would be for <div class="col-xs-12 col-ms-6"> to propagate col-sm-12, not col-sm-6.

@BruceBenjaminThomas

This comment has been minimized.

Copy link

commented Apr 5, 2018

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.