Menu
I've been using Bootstrap 3 for a while and now I need to make a new set of extra small columns for horizontal mobiles (e.g. 384px screen width) and after this use it as follows:
col-xxs-1, col-xxs-2, col-xxs-offset-5, hidden-xxs, etc.
Are there some Bootstrap Less mixins for this purpose? I'm not sure how to use them
edit:
There is a Bootstrap mixin called .make-grid(), but I can't make it work.
399
Basic Structure of a Bootstrap Grid So, to create the layout you want, create a container ( <div class="container"> ). Next, create a row ( <div class="row"> ). Then, add the desired number of columns (tags with appropriate .col-*-* classes). Note that numbers in .col-*-* should always add up to 12 for each row.
By using col-lg-push and col-lg-pull we can reorder the columns in large screens and display sidebar on the left and main content on the right.
Code for col-xxs-x,col-xxs-offset,col-xxs-push,col-xxs-pull:
Add this code:
.col-xxs-1, .col-xxs-2, .col-xxs-3, .col-xxs-4, .col-xxs-5, .col-xxs-6, .col-xxs-7, .col-xxs-8, .col-xxs-9, .col-xxs-10, .col-xxs-11, .col-xxs-12 { min-height: 1px; padding-left: 15px; padding-right: 15px; position: relative; } @media (max-width: 384px) { .col-xxs-1, .col-xxs-2, .col-xxs-3, .col-xxs-4, .col-xxs-5, .col-xxs-6, .col-xxs-7, .col-xxs-8, .col-xxs-9, .col-xxs-10, .col-xxs-11 { float: left; } .col-xxs-1 { width: 8.333333333333332%; } .col-xxs-2 { width: 16.666666666666664%; } .col-xxs-3 { width: 25%; } .col-xxs-4 { width: 33.33333333333333%; } .col-xxs-5 { width: 41.66666666666667%; } .col-xxs-6 { width: 50%; } .col-xxs-7 { width: 58.333333333333336%; } .col-xxs-8 { width: 66.66666666666666%; } .col-xxs-9 { width: 75%; } .col-xxs-10 { width: 83.33333333333334%; } .col-xxs-11 { width: 91.66666666666666%; } .col-xxs-12 { width: 100%; } .col-xxs-push-1 { left: 8.333333333333332%; } .col-xxs-push-2 { left: 16.666666666666664%; } .col-xxs-push-3 { left: 25%; } .col-xss-push-4 { left: 33.33333333333333%; } .col-xxs-push-5 { left: 41.66666666666667%; } .col-xxs-push-6 { left: 50%; } .col-xxs-push-7 { left: 58.333333333333336%; } .col-xxs-push-8 { left: 66.66666666666666%; } .col-xxs-push-9 { left: 75%; } .col-xxs-push-10 { left: 83.33333333333334%; } .col-xxs-push-11 { left: 91.66666666666666%; } .col-xxs-pull-1 { right: 8.333333333333332%; } .col-xxs-pull-2 { right: 16.666666666666664%; } .col-xxs-pull-3 { right: 25%; } .col-xxs-pull-4 { right: 33.33333333333333%; } .col-xxs-pull-5 { right: 41.66666666666667%; } .col-xxs-pull-6 { right: 50%; } .col-xxs-pull-7 { right: 58.333333333333336%; } .col-xxs-pull-8 { right: 66.66666666666666%; } .col-xxs-pull-9 { right: 75%; } .col-xxs-pull-10 { right: 83.33333333333334%; } .col-xxs-pull-11 { right: 91.66666666666666%; } .col-xxs-offset-1 { margin-left: 8.333333333333332%; } .col-xxs-offset-2 { margin-left: 16.666666666666664%; } .col-xxs-offset-3 { margin-left: 25%; } .col-xxs-offset-4 { margin-left: 33.33333333333333%; } .col-xxs-offset-5 { margin-left: 41.66666666666667%; } .col-xxs-offset-6 { margin-left: 50%; } .col-xxs-offset-7 { margin-left: 58.333333333333336%; } .col-xxs-offset-8 { margin-left: 66.66666666666666%; } .col-xxs-offset-9 { margin-left: 75%; } .col-xxs-offset-10 { margin-left: 83.33333333333334%; } .col-xxs-offset-11 { margin-left: 91.66666666666666%; } } Code for hidden-xxs:
Add this code:
.hidden-xxs { display: block !important; } tr.hidden-xxs { display: table-row !important; } th.hidden-xxs, td.hidden-xxs { display: table-cell !important; } @media (max-width: 384px) { .hidden-xxs { display: none !important; } tr.hidden-xxs { display: none !important; } th.hidden-xxs, td.hidden-xxs { display: none !important; } } @media (min-width: 385px) and (max-width: 767px) { .hidden-xxs.hidden-xs { display: none !important; } tr.hidden-xxs.hidden-xs { display: none !important; } th.hidden-xxs.hidden-xs, td.hidden-xxs.hidden-xs { display: none !important; } } @media (min-width: 768px) and (max-width: 991px) { .hidden-xxs.hidden-sm { display: none !important; } tr.hidden-xxs.hidden-sm { display: none !important; } th.hidden-xxs.hidden-sm, td.hidden-xxs.hidden-sm { display: none !important; } } @media (min-width: 992px) and (max-width: 1199px) { .hidden-xxs.hidden-md { display: none !important; } tr.hidden-xxs.hidden-md { display: none !important; } th.hidden-xxs.hidden-md, td.hidden-xxs.hidden-md { display: none !important; } } @media (min-width: 1200px) { .hidden-xxs.hidden-lg { display: none !important; } tr.hidden-xxs.hidden-lg { display: none !important; } th.hidden-xxs.hidden-lg, td.hidden-xxs.hidden-lg { display: none !important; } } @media (max-width: 384px) { .hidden-xs.hidden-xxs { display: none !important; } tr.hidden-xs.hidden-xxs { display: none !important; } th.hidden-xs.hidden-xxs, td.hidden-xs.hidden-xxs { display: none !important; } } @media (max-width: 384px) { .hidden-sm.hidden-xxs { display: none !important; } tr.hidden-sm.hidden-xxs { display: none !important; } th.hidden-sm.hidden-xxs, td.hidden-sm.hidden-xxs { display: none !important; } } @media (max-width: 384px) { .hidden-md.hidden-xxs { display: none !important; } tr.hidden-md.hidden-xxs { display: none !important; } th.hidden-md.hidden-xxs, td.hidden-md.hidden-xxs { display: none !important; } } @media (max-width: 384px) { .hidden-lg.hidden-xxs { display: none !important; } tr.hidden-lg.hidden-xxs { display: none !important; } th.hidden-lg.hidden-xxs, td.hidden-lg.hidden-xxs { display: none !important; } } And also replace :
@media (max-width: 767px) { with:
@media (min-width: 385px) and (max-width: 767px) { inside bootstrap.css at this 4 blocks:
@media (max-width: 767px) { //line 5640 in default bootstrap.css v3.0.0 .hidden-xs { display: none !important; } tr.hidden-xs { display: none !important; } th.hidden-xs, td.hidden-xs { display: none !important; } } @media (max-width: 767px) { //line 5698 in default bootstrap.css v3.0.0 .hidden-sm.hidden-xs { display: none !important; } tr.hidden-sm.hidden-xs { display: none !important; } th.hidden-sm.hidden-xs, td.hidden-sm.hidden-xs { display: none !important; } } @media (max-width: 767px) { //line 5756 in default bootstrap.css v3.0.0 .hidden-md.hidden-xs { display: none !important; } tr.hidden-md.hidden-xs { display: none !important; } th.hidden-md.hidden-xs, td.hidden-md.hidden-xs { display: none !important; } } @media (max-width: 767px) { //line 5814 in default bootstrap.css v3.0.0 .hidden-lg.hidden-xs { display: none !important; } tr.hidden-lg.hidden-xs { display: none !important; } th.hidden-lg.hidden-xs, td.hidden-lg.hidden-xs { display: none !important; } } Code for visible-xxs:
Add this code:
.visible-xxs { display: none !important; } tr.visible-xxs { display: none !important; } th.visible-xxs, td.visible-xxs { display: none !important; } @media (max-width: 384px) { .visible-xxs { display: block !important; } tr.visible-xxs { display: table-row !important; } th.visible-xxs, td.visible-xxs { display: table-cell !important; } } @media (min-width: 385px) and (max-width: 767px) { .visible-xxs.visible-xs { display: block !important; } tr.visible-xxs.visible-xs { display: table-row !important; } th.visible-xxs.visible-xs, td.visible-xxs.visible-xs { display: table-cell !important; } } @media (min-width: 768px) and (max-width: 991px) { .visible-xxs.visible-sm { display: block !important; } tr.visible-xxs.visible-sm { display: table-row !important; } th.visible-xxs.visible-sm, td.visible-xxs.visible-sm { display: table-cell !important; } } @media (min-width: 992px) and (max-width: 1199px) { .visible-xxs.visible-md { display: block !important; } tr.visible-xxs.visible-md { display: table-row !important; } th.visible-xxs.visible-md, td.visible-xxs.visible-md { display: table-cell !important; } } @media (min-width: 1200px) { .visible-xxs.visible-lg { display: block !important; } tr.visible-xxs.visible-lg { display: table-row !important; } th.visible-xxs.visible-lg, td.visible-xxs.visible-lg { display: table-cell !important; } } @media (max-width: 384px) { .visible-xs.visible-xxs { display: block !important; } tr.visible-xs.visible-xxs { display: table-row !important; } th.visible-xs.visible-xxs, td.visible-xs.visible-xxs { display: table-cell !important; } } @media (max-width: 384px) { .visible-sm.visible-xxs { display: block !important; } tr.visible-sm.visible-xxs { display: table-row !important; } th.visible-sm.visible-xxs, td.visible-sm.visible-xxs { display: table-cell !important; } } @media (max-width: 384px) { .visible-md.visible-xxs { display: block !important; } tr.visible-md.visible-xxs { display: table-row !important; } th.visible-md.visible-xxs, td.visible-md.visible-xxs { display: table-cell !important; } } @media (max-width: 384px) { .visible-lg.visible-xxs { display: block !important; } tr.visible-lg.visible-xxs { display: table-row !important; } th.visible-lg.visible-xxs, td.visible-lg.visible-xxs { display: table-cell !important; } } And also replace :
@media (max-width: 767px) { with:
@media (min-width: 385px) and (max-width: 767px) { inside bootstrap.css at this 4 blocks:
@media (max-width: 767px) { //line 5408 in default bootstrap.css v3.0.0 .visible-xs { display: block !important; } tr.visible-xs { display: table-row !important; } th.visible-xs, td.visible-xs { display: table-cell !important; } } @media (max-width: 767px) { //line 5466 in default bootstrap.css v3.0.0 .visible-sm.visible-xs { display: block !important; } tr.visible-sm.visible-xs { display: table-row !important; } th.visible-sm.visible-xs, td.visible-sm.visible-xs { display: table-cell !important; } } @media (max-width: 767px) { //line 5524 in default bootstrap.css v3.0.0 .visible-md.visible-xs { display: block !important; } tr.visible-md.visible-xs { display: table-row !important; } th.visible-md.visible-xs, td.visible-md.visible-xs { display: table-cell !important; } } @media (max-width: 767px) { //line 5582 in default bootstrap.css v3.0.0 .visible-lg.visible-xs { display: block !important; } tr.visible-lg.visible-xs { display: table-row !important; } th.visible-lg.visible-xs, td.visible-lg.visible-xs { display: table-cell !important; } } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
