From a48e8199219d6bbe95079fa8fb206db1b2f5f2bf Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 11 Sep 2016 22:31:26 -0700 Subject: Fixes #19466: Document the flexbox order utils (#20697) --- docs/layout/flexbox-grid.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) (limited to 'docs/layout/flexbox-grid.md') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index ec5a7365e..d15d6fb99 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -221,3 +221,25 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt {% endexample %} + +## Reordering + +Flexbox utilities for controlling the **visual order** of your content. + +
+{% example html %} +
+
+
+ First, but unordered +
+
+ Second, but last +
+
+ Third, but first +
+
+
+{% endexample %} +
-- cgit v1.2.3 From 7bf868a709d5e278048f7fe5fd62d2fa9365d5bc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 2 Oct 2016 18:19:47 -0700 Subject: v4: Social meta tags (#20825) * descriptions for getting started pages * descriptions for layout * add content page descriptions * more descriptions, updates to some existing ones * correct site url * add social stuff to config for twitter cards * add twitter meta tags; use large image for homepage and regular card for all others * add the assets * more site config * more social shiz to partial, remove existing meta for the partial, remove page title from homepage for simpler if statements --- docs/layout/flexbox-grid.md | 1 + 1 file changed, 1 insertion(+) (limited to 'docs/layout/flexbox-grid.md') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index d15d6fb99..0eae713b3 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -1,6 +1,7 @@ --- layout: docs title: Flexbox grid system +description: Documentation and examples for using Bootstrap's optional flexbox grid system. group: layout --- -- cgit v1.2.3 From 2e69dfa8c1679238579ef6f5ec85deb755e4fb6d Mon Sep 17 00:00:00 2001 From: Bardi Harborow Date: Tue, 4 Oct 2016 02:55:59 +1000 Subject: Fix broken/redirected links, moving to HTTPS where possible. (#20557) --- docs/layout/flexbox-grid.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'docs/layout/flexbox-grid.md') 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. -- cgit v1.2.3 From 4538ac9b56e6390b4b4ca745dc749195859cb8f3 Mon Sep 17 00:00:00 2001 From: Alan Mooiman Date: Mon, 24 Oct 2016 11:23:56 -0400 Subject: Add documentation for col-{breakpoint}-auto --- docs/layout/flexbox-grid.md | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) (limited to 'docs/layout/flexbox-grid.md') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 80db93c93..6fa04bf88 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -91,6 +91,37 @@ Auto-layout for flexbox grid columns also means you can set the width of one col {% endexample %} +Sometimes it's useful to have a column that lays itself out based on the natural width of its content, especially single line content like inputs, numbers, etc. Using the `col-{breakpoint}-auto` classes, you can guide this behavior as desired. This, in conjunction with [horizontal alignment](#horizontal-alignment) classes, is very useful for centering layouts with uneven column sizes as viewport width grows. + +
+{% example html %} +
+
+
+ 1 of 3 +
+
+ Variable width content +
+
+ 3 of 3 +
+
+
+
+ 1 of 3 +
+
+ Variable width content +
+
+ 3 of 3 +
+
+
+{% endexample %} +
+ ## Responsive flexbox Unlike the default grid system, the flexbox grid requires a class for full-width columns. If you have a `.col-sm-6` and don't add `.col-xs-12`, your `xs` grid will not render correctly. Note that flexbox grid tiers still scale up across breakpoints, so if you want two 50% wide columns across `sm`, `md`, and `lg`, you only need to set `.col-sm-6`. -- cgit v1.2.3 From abc9a526d525dad86e6fbe062161a66853227c78 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 27 Oct 2016 09:03:45 -0700 Subject: Fixes #20498: Warn about flexbox bugs in our flex grid docs --- docs/layout/flexbox-grid.md | 1 + 1 file changed, 1 insertion(+) (limited to 'docs/layout/flexbox-grid.md') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 80db93c93..4f456e273 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -27,6 +27,7 @@ The flexbox grid system behaves similar to our default grid system, but with a f - 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. - Unlike the default grid system where a grid column starts as full-width in the `xs` tier, flexbox requires a `.col-{breakpoint}` class for each tier. +- Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers). Chill? Awesome—keep reading for more information and some code snippets. -- cgit v1.2.3 From 26c33fa5ed0385d486d6a0ed5b79e9bae11dc055 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 27 Oct 2016 09:49:57 -0700 Subject: unrelated change; bold that stuff to emphasize it --- docs/layout/flexbox-grid.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/layout/flexbox-grid.md') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 4412466f6..467c3030b 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -26,8 +26,8 @@ The flexbox grid system behaves similar to our default grid system, but with a f - 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. -- Unlike the default grid system where a grid column starts as full-width in the `xs` tier, flexbox requires a `.col-{breakpoint}` class for each tier. -- Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers). +- Unlike the default grid system where a grid column starts as full-width in the `xs` tier, **flexbox requires a `.col-{breakpoint}` class for each tier.** +- Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers). Chill? Awesome—keep reading for more information and some code snippets. -- cgit v1.2.3 From a26080c04723e23da352e8115a108130725faff2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 27 Oct 2016 09:50:25 -0700 Subject: rework flex grid autolayout docs Adds clearer headings to each section, reworks some copy to be more direct. --- docs/layout/flexbox-grid.md | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) (limited to 'docs/layout/flexbox-grid.md') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 467c3030b..a26314cd6 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -33,7 +33,11 @@ Chill? Awesome—keep reading for more information and some code snippets. ## Auto-layout columns -When flexbox support is enabled, you can utilize breakpoint-specific column classes for equal-width columns. Add any number of `.col-{breakpoint}`s for each breakpoint you need and you're good to go. For example, here's are two grid layouts that apply to every device and viewport possible. +When flexbox support is enabled, you can utilize breakpoint-specific column classes for equal-width columns. Add any number of `.col-{breakpoint}`s for each breakpoint you need and every column will be the same width. + +### Equal-width + +For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xl`.
{% example html %} @@ -61,6 +65,8 @@ When flexbox support is enabled, you can utilize breakpoint-specific column clas {% endexample %}
+### Setting one column width + Auto-layout for flexbox grid columns also means you can set the width of one column and the others will automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.
@@ -92,7 +98,9 @@ Auto-layout for flexbox grid columns also means you can set the width of one col {% endexample %}
-Sometimes it's useful to have a column that lays itself out based on the natural width of its content, especially single line content like inputs, numbers, etc. Using the `col-{breakpoint}-auto` classes, you can guide this behavior as desired. This, in conjunction with [horizontal alignment](#horizontal-alignment) classes, is very useful for centering layouts with uneven column sizes as viewport width grows. +### Variable width content + +Using the `col-{breakpoint}-auto` classes, columns can size itself based on the natural width of its content. This is super handy with single line content like inputs, numbers, etc. This, in conjunction with [horizontal alignment](#horizontal-alignment) classes, is very useful for centering layouts with uneven column sizes as viewport width changes.
{% example html %} -- cgit v1.2.3 From cec0c7c6d6c6926dd372a91172c0081bb09fcc09 Mon Sep 17 00:00:00 2001 From: Eric Nolte Date: Fri, 4 Nov 2016 10:54:34 -0600 Subject: Update docs to reflect new breakpoint naming convention --- docs/layout/flexbox-grid.md | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) (limited to 'docs/layout/flexbox-grid.md') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index a26314cd6..eafe7b59c 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -76,7 +76,7 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
1 of 3
-
+
2 of 3 (wider)
@@ -87,7 +87,7 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
1 of 3
-
+
2 of 3 (wider)
@@ -109,7 +109,7 @@ Using the `col-{breakpoint}-auto` classes, columns can size itself based on the
1 of 3
-
+
Variable width content
@@ -120,7 +120,7 @@ Using the `col-{breakpoint}-auto` classes, columns can size itself based on the
1 of 3
-
+
Variable width content
@@ -133,16 +133,16 @@ Using the `col-{breakpoint}-auto` classes, columns can size itself based on the ## Responsive flexbox -Unlike the default grid system, the flexbox grid requires a class for full-width columns. If you have a `.col-sm-6` and don't add `.col-xs-12`, your `xs` grid will not render correctly. Note that flexbox grid tiers still scale up across breakpoints, so if you want two 50% wide columns across `sm`, `md`, and `lg`, you only need to set `.col-sm-6`. +Unlike the default grid system, the flexbox grid requires a class for full-width columns. If you have a `.col-sm-6` and don't add `.col-12`, your `xs` grid will not render correctly. Note that flexbox grid tiers still scale up across breakpoints, so if you want two 50% wide columns across `sm`, `md`, and `lg`, you only need to set `.col-sm-6`.
{% example html %}
-
+
1 of 2 (stacked on mobile)
-
+
1 of 2 (stacked on mobile)
@@ -220,42 +220,42 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt {% example html %}
-
+
One of two columns
-
+
One of two columns
-
+
One of two columns
-
+
One of two columns
-
+
One of two columns
-
+
One of two columns
-
+
One of two columns
-
+
One of two columns
-
+
One of two columns
-
+
One of two columns
-- cgit v1.2.3 From 8d031090d0f2a42b392b3452416539334562e3a7 Mon Sep 17 00:00:00 2001 From: Starsam80 Date: Sun, 27 Nov 2016 16:19:27 -0700 Subject: Rename `.flex-xs-*` and `.flex-items-xs-*` to `.flex-*` and `.flex-items-*` (#21218) * Clean up _flex.scss a little This commit just cleans up the formating of _flex.scss by changing it so that it uses a single `@include media-breakpoint-up` instead of multiple. It also aligns all of the CSS properties so it looks a bit nicer. * Remove `-xs` from flex classes --- docs/layout/flexbox-grid.md | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) (limited to 'docs/layout/flexbox-grid.md') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index eafe7b59c..482392504 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -157,7 +157,7 @@ Use the flexbox alignment utilities to vertically align columns.
{% example html %}
-
+
One of three columns
@@ -168,7 +168,7 @@ Use the flexbox alignment utilities to vertically align columns. One of three columns
-
+
One of three columns
@@ -179,7 +179,7 @@ Use the flexbox alignment utilities to vertically align columns. One of three columns
-
+
One of three columns
@@ -198,13 +198,13 @@ Use the flexbox alignment utilities to vertically align columns. {% example html %}
-
+
One of three columns
-
+
One of three columns
-
+
One of three columns
@@ -219,7 +219,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
{% example html %}
-
+
One of two columns
@@ -227,7 +227,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt One of two columns
-
+
One of two columns
@@ -235,7 +235,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt One of two columns
-
+
One of two columns
@@ -243,7 +243,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt One of two columns
-
+
One of two columns
@@ -251,7 +251,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt One of two columns
-
+
One of two columns
@@ -271,13 +271,13 @@ Flexbox utilities for controlling the **visual order** of your content. {% example html %}
-
+
First, but unordered
-
+
Second, but last
-
+
Third, but first
-- cgit v1.2.3 From 08e36a3cc9f88077806efb5c69f02e1ca6e0b449 Mon Sep 17 00:00:00 2001 From: Starsam80 Date: Sun, 27 Nov 2016 23:47:00 -0700 Subject: Rename `.col-xs` to `.col` + some other cleanup (#21222) * Use `breakpoint-min` instead of a counter * Remove 'xs' from flexbox grid --- docs/layout/flexbox-grid.md | 56 ++++++++++++++++++++++----------------------- 1 file changed, 28 insertions(+), 28 deletions(-) (limited to 'docs/layout/flexbox-grid.md') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 482392504..c6430424a 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -43,21 +43,21 @@ For example, here are two grid layouts that apply to every device and viewport, {% example html %}
-
+
1 of 2
-
+
1 of 2
-
+
1 of 3
-
+
1 of 3
-
+
1 of 3
@@ -73,24 +73,24 @@ Auto-layout for flexbox grid columns also means you can set the width of one col {% example html %}
-
+
1 of 3
2 of 3 (wider)
-
+
3 of 3
-
+
1 of 3
2 of 3 (wider)
-
+
3 of 3
@@ -106,24 +106,24 @@ Using the `col-{breakpoint}-auto` classes, columns can size itself based on the {% example html %}
-
+
1 of 3
Variable width content
-
+
3 of 3
-
+
1 of 3
Variable width content
-
+
3 of 3
@@ -158,35 +158,35 @@ Use the flexbox alignment utilities to vertically align columns. {% example html %}
-
+
One of three columns
-
+
One of three columns
-
+
One of three columns
-
+
One of three columns
-
+
One of three columns
-
+
One of three columns
-
+
One of three columns
-
+
One of three columns
-
+
One of three columns
@@ -198,13 +198,13 @@ Use the flexbox alignment utilities to vertically align columns. {% example html %}
-
+
One of three columns
-
+
One of three columns
-
+
One of three columns
@@ -271,13 +271,13 @@ Flexbox utilities for controlling the **visual order** of your content. {% example html %}
-
+
First, but unordered
-
+
Second, but last
-
+
Third, but first
-- cgit v1.2.3 From eb2e1102be0f4641ee3e5c4e7853360d5a04e3d8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 21 Dec 2016 20:26:17 -0800 Subject: Flexbox all the time (Drop IE9 support and remove $enable-flex option) (#21389) * remove the $enable-flex variable option * remove bootstrap-flex.css dist file and it's grunt task * remove the separate flex css file for docs; it's all the same now * remove flexbox docs (porting some to the main grid docs in next commit) * clean up few grid docs bits to simplify copy, start to mention flexbox * port relevant flexbox-grid.md content to grid.md - clean up mixins - update how it works section - bring over sizing and alignment sections * remove the $enable-flex from the options.md page * update lead paragraph to mention flexbox * update migration to mention loss of ie9 support * remove mention of flexbox dist file * clarify IE support * making a note * remove flexbox variant mentions from component docs - updates docs for media object, navs, list group, and cards to consolidate docs - no more need to callout flexbox variants since it's now the default * remove $enable-flex if/else from sass files * remove flex dist files * update scss lint property order to account for flex properties * linting * change to numberless classes for autosizing, wrap in highlighting div * bump gruntfile and postcss to ie10 * redo intro sections * rearrange * phew, redo hella grid docs - rearrange all the things - consolidate some bits * remove reference to flexbox mode * more border action for demo * Make some changes to the .card's in .card-deck's to ensure footers align to the bottom --- docs/layout/flexbox-grid.md | 286 -------------------------------------------- 1 file changed, 286 deletions(-) delete mode 100644 docs/layout/flexbox-grid.md (limited to 'docs/layout/flexbox-grid.md') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md deleted file mode 100644 index c6430424a..000000000 --- a/docs/layout/flexbox-grid.md +++ /dev/null @@ -1,286 +0,0 @@ ---- -layout: docs -title: Flexbox grid system -description: Documentation and examples for using Bootstrap's optional flexbox grid system. -group: layout ---- - -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]({{ 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. -{% endcallout %} - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - -## How it works - -The flexbox grid system behaves similar to our default grid system, but with a few notable differences: - -- [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. -- Unlike the default grid system where a grid column starts as full-width in the `xs` tier, **flexbox requires a `.col-{breakpoint}` class for each tier.** -- Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers). - -Chill? Awesome—keep reading for more information and some code snippets. - -## Auto-layout columns - -When flexbox support is enabled, you can utilize breakpoint-specific column classes for equal-width columns. Add any number of `.col-{breakpoint}`s for each breakpoint you need and every column will be the same width. - -### Equal-width - -For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xl`. - -
-{% example html %} -
-
-
- 1 of 2 -
-
- 1 of 2 -
-
-
-
- 1 of 3 -
-
- 1 of 3 -
-
- 1 of 3 -
-
-
-{% endexample %} -
- -### Setting one column width - -Auto-layout for flexbox grid columns also means you can set the width of one column and the others will automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column. - -
-{% example html %} -
-
-
- 1 of 3 -
-
- 2 of 3 (wider) -
-
- 3 of 3 -
-
-
-
- 1 of 3 -
-
- 2 of 3 (wider) -
-
- 3 of 3 -
-
-
-{% endexample %} -
- -### Variable width content - -Using the `col-{breakpoint}-auto` classes, columns can size itself based on the natural width of its content. This is super handy with single line content like inputs, numbers, etc. This, in conjunction with [horizontal alignment](#horizontal-alignment) classes, is very useful for centering layouts with uneven column sizes as viewport width changes. - -
-{% example html %} -
-
-
- 1 of 3 -
-
- Variable width content -
-
- 3 of 3 -
-
-
-
- 1 of 3 -
-
- Variable width content -
-
- 3 of 3 -
-
-
-{% endexample %} -
- -## Responsive flexbox - -Unlike the default grid system, the flexbox grid requires a class for full-width columns. If you have a `.col-sm-6` and don't add `.col-12`, your `xs` grid will not render correctly. Note that flexbox grid tiers still scale up across breakpoints, so if you want two 50% wide columns across `sm`, `md`, and `lg`, you only need to set `.col-sm-6`. - -
-{% example html %} -
-
-
- 1 of 2 (stacked on mobile) -
-
- 1 of 2 (stacked on mobile) -
-
-
-{% endexample %} -
- -## Vertical alignment - -Use the flexbox alignment utilities to vertically align columns. - -
-{% example html %} -
-
-
- One of three columns -
-
- One of three columns -
-
- One of three columns -
-
-
-
- One of three columns -
-
- One of three columns -
-
- One of three columns -
-
-
-
- One of three columns -
-
- One of three columns -
-
- One of three columns -
-
-
-{% endexample %} -
- -
-{% example html %} -
-
-
- One of three columns -
-
- One of three columns -
-
- One of three columns -
-
-
-{% endexample %} -
- -## Horizontal alignment - -Flexbox utilities for horizontal alignment also exist for a number of layout options. - -
-{% example html %} -
-
-
- One of two columns -
-
- One of two columns -
-
-
-
- One of two columns -
-
- One of two columns -
-
-
-
- One of two columns -
-
- One of two columns -
-
-
-
- One of two columns -
-
- One of two columns -
-
-
-
- One of two columns -
-
- One of two columns -
-
-
-{% endexample %} -
- -## Reordering - -Flexbox utilities for controlling the **visual order** of your content. - -
-{% example html %} -
-
-
- First, but unordered -
-
- Second, but last -
-
- Third, but first -
-
-
-{% endexample %} -
-- cgit v1.2.3