How to extend Bootstrap for an extra extra small grid. A grid for differentiating between landscape and portrait on a smart phone.


//The following css style is meant to extend the Bootstrap framework. If you ever wanted to hid something in a portrait view (Under 480px) that you wanted to show on a landscape view on a smartphone like the Iphone4 then this is for you. 

The added classes extend the column grid and hidden/visible aspects of Bootstrap using the same naming convention as bootstrap. Simply use hidden-xxs, visible-xxs, or col-xxs-12, col-xxs-6, etc. 

//Make sure to include the script in your bootstrap.css file or link to this css as a seperate file.

/**
* BootstrapMMExtend_V1.0 (An extension for bootstrap 3.3.4)
* About BootstrapMMExtend_V1.0: 'for Control of grid and visibility between Portrait and landscape views on devices less than 768px in width'
*
* Copyright 2015 by Mark Miller <mark@markanthonymiller.com>
*
* BootstrapMMExtend_V1.0 is free software: you can redistribute
* it and/or modify it under the terms of the GNU General Public
* License as published by the Free Software Foundation, either
* version 3 of the License, or (at your option) any later version.
*
* BootstrapMMExtend_V1.0 application is distributed in the hope that it will
* be useful, but WITHOUT ANY WARRANTY; without even the implied warranty
* of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* @license GPL-3.0+ <http://spdx.org/licenses/GPL-3.0+>
*/
.visible-xxs {
display: none !important;
visibility: hidden;
}

.hidden-xxs {
display: block;
visibility: visible;
}

/*XXS Portrait Smartphone*/
@media screen and (max-width: 479px) {
.visible-xxs {
display: block !important;
visibility: visible !important;
}

.hidden-xxs {
display: none !important;
visibility: hidden !important;
}

.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 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}

.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-xxs-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%;
}
}

Tags: Bootstrap, Responsive Design
Last update:
2015-04-08 16:59
Author:
Mark
Revision:
1.0
Average rating:0 (0 Votes)

You cannot comment on this entry

Chuck Norris has counted to infinity. Twice.