Last active
June 30, 2017 11:51
-
-
Save iftee/b5c694e8d59eb02cfe62 to your computer and use it in GitHub Desktop.
Custom Bootstrap 3 Grid for 480-767px Layout
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Custom Bootstrap 3 grid for 480-767px layout | |
* Author: Iftakhar Hasan | |
* | |
* A new set of column classes (with class prefix .col-ms- ) for Bootstrap 3 | |
* to make Medium Small grids for supporting 480-767px | |
* | |
* This will push the default Bootstrap 3 Extra Small column (class prefix .col-xs- ) | |
* to support 1-479px instead of 1-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, | |
.col-ms-12 {position:relative; padding-left:15px; padding-right:15px;} | |
@media (min-width: 480px) and (max-width: 767px) { | |
.container {max-width:748px;} | |
.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.33333333%;} | |
.col-ms-2 {width:16.66666667%;} | |
.col-ms-3 {width:25%;} | |
.col-ms-4 {width:33.33333333%;} | |
.col-ms-5 {width:41.66666667%;} | |
.col-ms-6 {width:50%;} | |
.col-ms-7 {width:58.33333333%;} | |
.col-ms-8 {width:66.66666667%;} | |
.col-ms-9 {width:75%;} | |
.col-ms-10 {width:83.33333333%;} | |
.col-ms-11 {width:91.66666667%;} | |
.col-ms-12 {width:100%;} | |
.col-ms-pull-0 {right:auto;} | |
.col-ms-pull-1 {right:8.33333333%;} | |
.col-ms-pull-2 {right:16.66666667%;} | |
.col-sm-pull-3 {right:25%;} | |
.col-sm-pull-4 {right:33.33333333%;} | |
.col-sm-pull-5 {right:41.66666667%;} | |
.col-sm-pull-6 {right:50%;} | |
.col-sm-pull-7 {right:58.33333333%;} | |
.col-ms-pull-8 {right:66.66666667%;} | |
.col-ms-pull-9 {right:75%;} | |
.col-ms-pull-10 {right:83.33333333%;} | |
.col-ms-pull-11 {right:91.66666667%;} | |
.col-ms-pull-12 {right:100%;} | |
.col-ms-push-0 {left:auto;} | |
.col-ms-push-1 {left:8.33333333%;} | |
.col-ms-push-2 {left:16.66666667%;} | |
.col-sm-push-3 {left:25%;} | |
.col-sm-push-4 {left:33.33333333%;} | |
.col-sm-push-5 {left:41.66666667%;} | |
.col-sm-push-6 {left:50%;} | |
.col-sm-push-7 {left:58.33333333%;} | |
.col-ms-push-8 {left:66.66666667%;} | |
.col-ms-push-9 {left:75%;} | |
.col-ms-push-10 {left:83.33333333%;} | |
.col-ms-push-11 {left:91.66666667%;} | |
.col-ms-push-12 {left:100%;} | |
.col-ms-offset-0 {margin-left:0;} | |
.col-ms-offset-1 {margin-left:8.33333333%;} | |
.col-ms-offset-2 {margin-left:16.66666667%;} | |
.col-ms-offset-3 {margin-left:25%;} | |
.col-ms-offset-4 {margin-left:33.33333333%;} | |
.col-ms-offset-5 {margin-left:41.66666667%;} | |
.col-ms-offset-6 {margin-left:50%;} | |
.col-ms-offset-7 {margin-left:58.33333333%;} | |
.col-ms-offset-8 {margin-left:66.66666667%;} | |
.col-ms-offset-9 {margin-left:75%;} | |
.col-ms-offset-10 {margin-left:83.33333333%;} | |
.col-ms-offset-11 {margin-left:91.66666667%;} | |
.col-ms-offset-12 {margin-left:100%;} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is great. Adding support for hidden-ms would make it even better!
.hidden-ms { display: none !important; }
Add this between line 87 and 88.
Please be aware when using this code, you must also include a matching col-sm-* class, otherwise, when the screen gets bigger than 768, the elements will collapse to the same format as the col-xs-*.
For Example:
<div class="col-xs-12 col-ms-6 col-sm-6">
will be the entire width on phone(portrait), and half-width on phone(landscape) and larger.<div class="col-xs-12 col-ms-6">
will be the entire width on phone(portrait), and half-width on phone(landscape). It will go back to being entire width (occupy 12 spaces in the grid) when the screen size changes to tablet or larger.Bootstrap-v4 is changing the screen breakpoints to address the problem being solved by this gist.
https://v4-alpha.getbootstrap.com/layout/grid/#grid-options
http://getbootstrap.com/css/#grid-options