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') 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 7cc086e2c1934fdf6dec5809f122f704e34e9892 Mon Sep 17 00:00:00 2001 From: judetucker Date: Wed, 26 Oct 2016 22:05:46 -0700 Subject: change the header nav description to include the new float --- docs/components/card.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs') diff --git a/docs/components/card.md b/docs/components/card.md index be9846a30..1bb0866fe 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -226,7 +226,7 @@ Card headers can be styled by adding `.card-header` to `` elements. ## Header nav -Use Bootstrap's nav pills or tabs within a card header. Be sure to always include a `.pull-*-*` utility class for proper alignment. +Use Bootstrap's nav pills or tabs within a card header. Be sure to always include a `.float-*-*` utility class for proper alignment. {% example html %}
-- cgit v1.2.3 From 45cbbad87113053d6adb97e260c8689f77a3a8cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Einar=20Gangs=C3=B8?= Date: Thu, 27 Oct 2016 10:12:14 +0200 Subject: Docfix: Typo default -> secondary, and reorder --- docs/components/dropdowns.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'docs') diff --git a/docs/components/dropdowns.md b/docs/components/dropdowns.md index 621b666f1..3e9948b3d 100644 --- a/docs/components/dropdowns.md +++ b/docs/components/dropdowns.md @@ -53,7 +53,7 @@ The best part is you can do this with any button variant, too:
- +
Action Another action @@ -63,7 +63,7 @@ The best part is you can do this with any button variant, too:
- +
Action Another action @@ -138,8 +138,8 @@ We use this extra class to reduce the horizontal `padding` on either side of the
- - +
@@ -151,8 +151,8 @@ We use this extra class to reduce the horizontal `padding` on either side of the
- - +
-- cgit v1.2.3 From ab49e3f7e69e7f10a1730a5d52ffd155b5b736de Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 27 Oct 2016 08:58:12 -0700 Subject: fixes #21000: Remove margin from static form control example --- docs/components/forms.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs') diff --git a/docs/components/forms.md b/docs/components/forms.md index 99f0d9a63..040f4f7e5 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -539,7 +539,7 @@ When you need to place plain text next to a form label within a form, use the `.
-

email@example.com

+

email@example.com

-- 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') 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 8ed7ebcd6344943edf68fd6d8a159190eb105a34 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 27 Oct 2016 09:19:07 -0700 Subject: fixes #18565: mention carousel sizing in docs --- docs/components/carousel.md | 2 ++ 1 file changed, 2 insertions(+) (limited to 'docs') diff --git a/docs/components/carousel.md b/docs/components/carousel.md index 64b012b0e..1e8d40113 100644 --- a/docs/components/carousel.md +++ b/docs/components/carousel.md @@ -14,6 +14,8 @@ A slideshow component for cycling through elements—images or slides of text— ## Example +When building carousels, be sure your slides are the same size as one another. The carousel doesn't automatically crop images to the same dimensions for you across slides. + {% example html %}