diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 8642bf95db..4d65d053bd 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -787,6 +787,18 @@ pre code {
.col-10,
.col-11,
.col-12,
+.col-sm-1,
+.col-sm-2,
+.col-sm-3,
+.col-sm-4,
+.col-sm-5,
+.col-sm-6,
+.col-sm-7,
+.col-sm-8,
+.col-sm-9,
+.col-sm-10,
+.col-sm-11,
+.col-sm-12,
.col-lg-1,
.col-lg-2,
.col-lg-3,
@@ -856,40 +868,43 @@ pre code {
}
@media (min-width: 768px) {
- .col-md-1 {
+ .container {
+ max-width: 728px;
+ }
+ .col-sm-1 {
width: 8.333333333333332%;
}
- .col-md-2 {
+ .col-sm-2 {
width: 16.666666666666664%;
}
- .col-md-3 {
+ .col-sm-3 {
width: 25%;
}
- .col-md-4 {
+ .col-sm-4 {
width: 33.33333333333333%;
}
- .col-md-5 {
+ .col-sm-5 {
width: 41.66666666666667%;
}
- .col-md-6 {
+ .col-sm-6 {
width: 50%;
}
- .col-md-7 {
+ .col-sm-7 {
width: 58.333333333333336%;
}
- .col-md-8 {
+ .col-sm-8 {
width: 66.66666666666666%;
}
- .col-md-9 {
+ .col-sm-9 {
width: 75%;
}
- .col-md-10 {
+ .col-sm-10 {
width: 83.33333333333334%;
}
- .col-md-11 {
+ .col-sm-11 {
width: 91.66666666666666%;
}
- .col-md-12 {
+ .col-sm-12 {
width: 100%;
}
.col-offset-1 {
@@ -994,6 +1009,9 @@ pre code {
}
@media (min-width: 992px) {
+ .container {
+ max-width: 940px;
+ }
.col-lg-1 {
width: 8.333333333333332%;
}
@@ -1032,19 +1050,7 @@ pre code {
}
}
-@media screen and (min-width: 768px) {
- .container {
- max-width: 728px;
- }
-}
-
-@media screen and (min-width: 992px) {
- .container {
- max-width: 940px;
- }
-}
-
-@media screen and (min-width: 1200px) {
+@media (min-width: 1200px) {
.container {
max-width: 1170px;
}
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 6a608b4da8..811961d609 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -520,6 +520,7 @@ body {
/* Utility classes table
------------------------- */
+.bs-table th small,
.responsive-utilities th small {
display: block;
font-weight: normal;
diff --git a/docs/css.html b/docs/css.html
index 981626c607..dfab315230 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -63,9 +63,64 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
- Bootstrap includes a responsive, percent-based grid system that appropriately scales up to 12 columns as the device or viewport size increases—in other words, it's mobile first. It includes predefined classes for this, as well as powerful mixins for generating semantic layouts.
+ Bootstrap includes a responsive, mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
+
+ Grid options
+ Multiple device grids, columns, offsets, and column ordering.
+
+
+
+ |
+
+ Tiny grid
+ Phones (<480px)
+ |
+
+ Small grid
+ Tablets (<768px)
+ |
+
+ Medium-large grid
+ Destkops (>768px)
+ |
+
+
+
+
+ | Grid behavior |
+ Horizontal at all times |
+ Collapsed to start, horizontal above breakpoints |
+
+
+ | Class prefix |
+ .col- |
+ .col-sm- |
+ .col-lg- |
+
+
+ | # of columns |
+ 12 |
+
+
+ | Nestable |
+ Yes |
+
+
+ | Offsets |
+ N/A |
+ Yes |
+
+
+ | Column ordering |
+ N/A |
+ Yes |
+
+
+
+
+ Grid examples
+ Bootstrap's grid system includes three levels of column sizing—phone, tablet, and desktop and up. Use each level in conjunction with the others for more control, or stick to the desktop classes for single-column, stacked mobile views.
- Grid example
On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply floats and widths. To create a basic grid layout, wrap a series of .col-lg-* elements within a .row. As this is a 12-column grid, each .col-lg-* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.
Be sure to checkout the full-page grid example as well.
diff --git a/less/grid.less b/less/grid.less
index bb99dff7e1..b97d1d5c4a 100644
--- a/less/grid.less
+++ b/less/grid.less
@@ -26,6 +26,18 @@
.col-10,
.col-11,
.col-12,
+.col-sm-1,
+.col-sm-2,
+.col-sm-3,
+.col-sm-4,
+.col-sm-5,
+.col-sm-6,
+.col-sm-7,
+.col-sm-8,
+.col-sm-9,
+.col-sm-10,
+.col-sm-11,
+.col-sm-12,
.col-lg-1,
.col-lg-2,
.col-lg-3,
@@ -49,9 +61,13 @@
padding-right: (@grid-gutter-width / 2);
}
-// Grid column sizing
-// Small columns (phones and up)
+
+//
+// Container and grid column sizing
+//
+
+// Tiny device columns (smartphones)
.col-1 { width: percentage((1 / @grid-columns)); }
.col-2 { width: percentage((2 / @grid-columns)); }
.col-3 { width: percentage((3 / @grid-columns)); }
@@ -65,20 +81,24 @@
.col-11 { width: percentage((11/ @grid-columns)); }
.col-12 { width: 100%; }
-// Medium columns (tablets and up)
+// Small device columns (phones to tablets)
@media (min-width: @screen-tablet) {
- .col-md-1 { width: percentage((1 / @grid-columns)); }
- .col-md-2 { width: percentage((2 / @grid-columns)); }
- .col-md-3 { width: percentage((3 / @grid-columns)); }
- .col-md-4 { width: percentage((4 / @grid-columns)); }
- .col-md-5 { width: percentage((5 / @grid-columns)); }
- .col-md-6 { width: percentage((6 / @grid-columns)); }
- .col-md-7 { width: percentage((7 / @grid-columns)); }
- .col-md-8 { width: percentage((8 / @grid-columns)); }
- .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%; }
+ .container {
+ max-width: @container-tablet;
+ }
+
+ .col-sm-1 { width: percentage((1 / @grid-columns)); }
+ .col-sm-2 { width: percentage((2 / @grid-columns)); }
+ .col-sm-3 { width: percentage((3 / @grid-columns)); }
+ .col-sm-4 { width: percentage((4 / @grid-columns)); }
+ .col-sm-5 { width: percentage((5 / @grid-columns)); }
+ .col-sm-6 { width: percentage((6 / @grid-columns)); }
+ .col-sm-7 { width: percentage((7 / @grid-columns)); }
+ .col-sm-8 { width: percentage((8 / @grid-columns)); }
+ .col-sm-9 { width: percentage((9 / @grid-columns)); }
+ .col-sm-10 { width: percentage((10/ @grid-columns)); }
+ .col-sm-11 { width: percentage((11/ @grid-columns)); }
+ .col-sm-12 { width: 100%; }
// Offsets
.col-offset-1 { margin-left: percentage((1 / @grid-columns)); }
@@ -119,8 +139,11 @@
.col-pull-11 { right: percentage((11/ @grid-columns)); }
}
+// Medium and large device columns (desktop and up)
@media (min-width: @screen-desktop) {
- // Large columns (desktop and up)
+ .container {
+ max-width: @container-desktop;
+ }
.col-lg-1 { width: percentage((1 / @grid-columns)); }
.col-lg-2 { width: percentage((2 / @grid-columns)); }
.col-lg-3 { width: percentage((3 / @grid-columns)); }
@@ -135,22 +158,8 @@
.col-lg-12 { width: 100%; }
}
-// Responsive: Tablets and up
-@media screen and (min-width: @screen-tablet) {
- .container {
- max-width: @container-tablet;
- }
-}
-
-// Responsive: Desktops and up
-@media screen and (min-width: @screen-desktop) {
- .container {
- max-width: @container-desktop;
- }
-}
-
-// Responsive: Large desktops and up
-@media screen and (min-width: @screen-large-desktop) {
+// Large desktops and up
+@media (min-width: @screen-large-desktop) {
.container {
max-width: @container-large-desktop;
}