Skip to content

Instantly share code, notes, and snippets.

@firepol
Forked from andyl/bootstrap_ms.css
Last active September 23, 2020 19:14
Show Gist options
  • Star 44 You must be signed in to star a gist
  • Fork 15 You must be signed in to fork a gist
  • Save firepol/7942411 to your computer and use it in GitHub Desktop.
Save firepol/7942411 to your computer and use it in GitHub Desktop.
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;}
}
@eSerenity
Copy link

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

@codigovision
Copy link

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
Copy link

Thank you, I was looking for this!

@mi5ha
Copy link

mi5ha 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
Copy link

Very nice! Thanks.

@voiprodrigo
Copy link

Life saver. Thanks!

@thebouv
Copy link

thebouv 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
Copy link

Awesome, thanks for this!

@francipesca
Copy link

Works brilliantly! Thank you!

@BegoMG
Copy link

BegoMG commented May 11, 2015

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

@Weaknessy
Copy link

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
Copy link

@Weaknessy @eSerenity

.visable-ms{
display:block;
}

.hidden-ms{
display:none;
}

@Willi-Reebonz
Copy link

Perfect.
Thank you very much.

@MathiasZaja
Copy link

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
Copy link

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
Copy link

@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
Copy link

Thanks!

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