diff --git a/assets/css/docs.css b/assets/css/docs.css index 8783e81498..307e8d07e3 100644 --- a/assets/css/docs.css +++ b/assets/css/docs.css @@ -545,6 +545,36 @@ body { /* Responsive docs -------------------------------------------------- */ +/* Responsive (scrollable) doc tables */ +@media (max-width: 768px) { + .bs-table-scrollable { + width: 100%; + overflow-y: hidden; + overflow-x: scroll; + border: 1px solid #ddd; + } + .bs-table-scrollable .bs-table { + margin-bottom: 0; + border: 0; + } + .bs-table-scrollable .bs-table th, + .bs-table-scrollable .bs-table td { + white-space: nowrap; + } + .bs-table-scrollable .bs-table th:first-child, + .bs-table-scrollable .bs-table td:first-child { + border-left: 0; + } + .bs-table-scrollable .bs-table th:last-child, + .bs-table-scrollable .bs-table td:last-child { + border-right: 0; + } + .bs-table-scrollable .bs-table tr:last-child th, + .bs-table-scrollable .bs-table tr:last-child td { + border-bottom: 0; + } +} + /* Related: responsive utilities tables */ .table code { font-size: 13px; diff --git a/css.html b/css.html index 0c41d4af01..35148bcaba 100644 --- a/css.html +++ b/css.html @@ -78,56 +78,58 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e

Grid options

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Tiny grid - Phones (<480px) - - Small grid - Tablets (<768px) - - Medium-large grid - Destkops (>768px) -
Grid behaviorHorizontal at all timesCollapsed to start, horizontal above breakpoints
Class prefix.col-.col-sm-.col-lg-
# of columns12
NestableYes
OffsetsN/AYes
Column orderingN/AYes
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Tiny grid + Phones (<480px) + + Small grid + Tablets (<768px) + + Medium-large grid + Destkops (>768px) +
Grid behaviorHorizontal at all timesCollapsed to start, horizontal above breakpoints
Class prefix.col-.col-sm-.col-lg-
# of columns12
NestableYes
OffsetsN/AYes
Column orderingN/AYes
+

Example: Stacked-to-horizontal

Using a single set of grid classes, you can create a basic grid system that starts out stacked on mobile and tablet devices before becoming horizontal on desktop devices.