diff options
Diffstat (limited to 'docs/layout')
| -rw-r--r-- | docs/layout/flexbox-grid.md | 6 | ||||
| -rw-r--r-- | docs/layout/grid.md | 22 | ||||
| -rw-r--r-- | docs/layout/media-object.md | 10 |
3 files changed, 19 insertions, 19 deletions
diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 0eae713b3..80db93c93 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -5,9 +5,9 @@ description: Documentation and examples for using Bootstrap's optional flexbox g group: layout --- -Fancy a more modern grid system? [Enable flexbox support in Bootstrap](/getting-started/flexbox) to take full advantage of CSS's Flexible Box module for even more control over your site's layout, alignment, and distribution of content. +Fancy a more modern grid system? [Enable flexbox support in Bootstrap]({{ site.baseurl }}/getting-started/flexbox/) to take full advantage of CSS's Flexible Box module for even more control over your site's layout, alignment, and distribution of content. -Bootstrap's flexbox grid includes support for every feature from our [default grid system](/layout/grid), and then some. Please read the [default grid system docs](/layout/grid) before proceeding through this page. Features that are covered there are only summarized here. Please note that **Internet Explorer 9 does not support flexbox**, so proceed with caution when enabling it. +Bootstrap's flexbox grid includes support for every feature from our [default grid system]({{ site.baseurl }}/layout/grid/), and then some. Please read the [default grid system docs]({{ site.baseurl }}/layout/grid/) before proceeding through this page. Features that are covered there are only summarized here. Please note that **Internet Explorer 9 does not support flexbox**, so proceed with caution when enabling it. {% callout warning %} **Heads up!** This flexbox grid documentation is powered by an additional CSS file that overrides our default grid system's CSS. This is only available in our hosted docs and is disabled in development. @@ -22,7 +22,7 @@ Bootstrap's flexbox grid includes support for every feature from our [default gr The flexbox grid system behaves similar to our default grid system, but with a few notable differences: -- [Grid mixins](/layout/grid#sass-mixins) and [predefined classes](/layout/grid#predefined-classes) include support for flexbox. Just [enable flexbox support](/getting-started/flexbox) to utilize them as you would otherwise. +- [Grid mixins]({{ site.baseurl }}/layout/grid#sass-mixins) and [predefined classes]({{ site.baseurl }}/layout/grid#predefined-classes) include support for flexbox. Just [enable flexbox support]({{ site.baseurl }}/getting-started/flexbox/) to utilize them as you would otherwise. - Nesting, offsets, pushes, and pulls are all supported in the flexbox grid system. - Flexbox grid columns without a set width will automatically layout with equal widths. For example, four columns will each automatically be 25% wide. - Flexbox grid columns have significantly more alignment options available, including vertical alignment. diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 0466fc7bf..55607e464 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -64,11 +64,11 @@ See how aspects of the Bootstrap grid system work across multiple devices with a <th></th> <th class="text-xs-center"> Extra small<br> - <small><544px</small> + <small><576px</small> </th> <th class="text-xs-center"> Small<br> - <small>≥544px</small> + <small>≥576px</small> </th> <th class="text-xs-center"> Medium<br> @@ -91,11 +91,11 @@ See how aspects of the Bootstrap grid system work across multiple devices with a <td colspan="4">Collapsed to start, horizontal above breakpoints</td> </tr> <tr> - <th class="text-nowrap" scope="row">Container width</th> + <th class="text-nowrap" scope="row">Max container width</th> <td>None (auto)</td> - <td>576px</td> + <td>540px</td> <td>720px</td> - <td>940px</td> + <td>960px</td> <td>1140px</td> </tr> <tr> @@ -112,7 +112,7 @@ See how aspects of the Bootstrap grid system work across multiple devices with a </tr> <tr> <th class="text-nowrap" scope="row">Gutter width</th> - <td colspan="5">1.875rem / 30px (15px on each side of a column)</td> + <td colspan="5">30px (15px on each side of a column)</td> </tr> <tr> <th class="text-nowrap" scope="row">Nestable</th> @@ -154,7 +154,7 @@ $grid-breakpoints: ( // Extra small screen / phone xs: 0, // Small screen / phone - sm: 544px, + sm: 576px, // Medium screen / tablet md: 768px, // Large screen / desktop @@ -164,9 +164,9 @@ $grid-breakpoints: ( ); $container-max-widths: ( - sm: 576px, + sm: 540px, md: 720px, - lg: 940px, + lg: 960px, xl: 1140px ); {% endhighlight %} @@ -246,7 +246,7 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between. -See it in action in <a href="http://jsbin.com/ruxona/edit">this rendered example</a>. +See it in action in <a href="https://jsbin.com/ruxona/edit?html,output">this rendered example</a>. {% highlight scss %} .container { @@ -512,7 +512,7 @@ $grid-breakpoints: ( $container-max-widths: ( sm: 420px, md: 720px, - lg: 940px + lg: 960px ); {% endhighlight %} diff --git a/docs/layout/media-object.md b/docs/layout/media-object.md index 95dbceb40..b998490d3 100644 --- a/docs/layout/media-object.md +++ b/docs/layout/media-object.md @@ -46,7 +46,7 @@ Media components can also be nested. <div class="media-body"> <h4 class="media-heading">Media heading</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. - <div class="media m-t-2"> + <div class="media mt-2"> <a class="media-left" href="#"> <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image"> </a> @@ -124,7 +124,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th <h4 class="media-heading">Media heading</h4> <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p> <!-- Nested media object --> - <div class="media m-t-2"> + <div class="media mt-2"> <a class="media-left" href="#"> <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image"> </a> @@ -132,7 +132,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th <h4 class="media-heading">Nested media heading</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. <!-- Nested media object --> - <div class="media m-t-2"> + <div class="media mt-2"> <div class="media-left"> <a href="#"> <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image"> @@ -146,7 +146,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th </div> </div> <!-- Nested media object --> - <div class="media m-t-2"> + <div class="media mt-2"> <div class="media-left"> <a href="#"> <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image"> @@ -159,7 +159,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th </div> </div> </li> - <li class="media m-t-2"> + <li class="media mt-2"> <div class="media-body"> <h4 class="media-heading">Media heading</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. |