diff --git a/docs/_includes/css/grid.html b/docs/_includes/css/grid.html index 992612e857..0deb124586 100644 --- a/docs/_includes/css/grid.html +++ b/docs/_includes/css/grid.html @@ -13,6 +13,7 @@
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
  • The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
    • +
  • If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
  • Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.

    • Look to the examples for applying these principles to your code.

    @@ -252,6 +253,23 @@
    .col-xs-6 .col-sm-4
    +{% endhighlight %} + +

    Example: Column wrapping

    +

    If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

    +
    +
    +
    .col-xs-9
    +
    .col-xs-4
    Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
    +
    .col-xs-6
    Subsequent columns continue along the new line.
    +
    +
    +{% highlight html %} +
    +
    .col-xs-9
    +
    .col-xs-4
    Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
    +
    .col-xs-6
    Subsequent columns continue along the new line.
    +
    {% endhighlight %}

    Responsive column resets

    diff --git a/docs/_includes/nav/css.html b/docs/_includes/nav/css.html index d67ad20be4..f2b1b54204 100644 --- a/docs/_includes/nav/css.html +++ b/docs/_includes/nav/css.html @@ -18,6 +18,7 @@
  • Ex: Fluid container
  • Ex: Mobile and desktops
  • Ex: Mobile, tablet, desktops
    • +
  • Ex: Column wrapping
  • Responsive column resets
  • Offsetting columns
  • Nesting columns