.col-9,
.col-10,
.col-11,
+.col-12,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-8,
.col-lg-9,
.col-lg-10,
-.col-lg-11 {
+.col-lg-11,
+.col-lg-12 {
position: relative;
float: left;
width: 100%;
width: 91.66666666666666%;
}
+.col-12 {
+ width: 100%;
+}
+
@media (min-width: 768px) {
.col-md-1 {
width: 8.333333333333332%;
.col-md-11 {
width: 91.66666666666666%;
}
+ .col-md-12 {
+ width: 100%;
+ }
.col-offset-1 {
margin-left: 8.333333333333332%;
}
.col-lg-11 {
width: 91.66666666666666%;
}
+ .col-lg-12 {
+ width: 100%;
+ }
}
@media screen and (min-width: 768px) {
.col-9,
.col-10,
.col-11,
+.col-12,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-8,
.col-lg-9,
.col-lg-10,
-.col-lg-11 {
+.col-lg-11,
+.col-lg-12 {
position: relative;
// Float and set width: 100%; for easy stacking on mobile devices
float: left;
.col-9 { width: percentage((9 / @grid-columns)); }
.col-10 { width: percentage((10/ @grid-columns)); }
.col-11 { width: percentage((11/ @grid-columns)); }
+.col-12 { width: 100%; }
// Medium columns (tablets and up)
@media (min-width: @screen-tablet) {
.col-md-9 { width: percentage((9 / @grid-columns)); }
.col-md-10 { width: percentage((10/ @grid-columns)); }
.col-md-11 { width: percentage((11/ @grid-columns)); }
+ .col-md-12 { width: 100%; }
// Offsets
.col-offset-1 { margin-left: percentage((1 / @grid-columns)); }
.col-lg-9 { width: percentage((9 / @grid-columns)); }
.col-lg-10 { width: percentage((10/ @grid-columns)); }
.col-lg-11 { width: percentage((11/ @grid-columns)); }
+ .col-lg-12 { width: 100%; }
}
// Responsive: Tablets and up