From: Mark Otto Date: Fri, 23 Dec 2016 00:44:12 +0000 (-0800) Subject: redo sizing section with utils and grid callouts X-Git-Tag: v4.0.0-alpha.6~235^2~14 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=3cc23e9747c84e6a2d8ae2b109657da821a6a79d;p=thirdparty%2Fbootstrap.git redo sizing section with utils and grid callouts --- diff --git a/docs/components/card.md b/docs/components/card.md index 18c6f93931..56d20ac456 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -175,9 +175,72 @@ Card headers can be styled by adding `.card-header` to `` elements. {% endexample %} -## Header nav +## Sizing -Use Bootstrap's nav pills or tabs within a card header. +Cards assume no specific `width` to start, so they'll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities. + +### Using grid markup + +Using the grid, wrap cards in columns and rows as needed. + +{% example html %} +
+
+
+
+

Special title treatment

+

With supporting text below as a natural lead-in to additional content.

+ Go somewhere +
+
+
+
+
+
+

Special title treatment

+

With supporting text below as a natural lead-in to additional content.

+ Go somewhere +
+
+
+
+{% endexample %} + +### Using utilities + +Use our handful of [available sizing utilities]({{ site.baseurl }}/utilities/sizing-and-positioning/#width-and-height) to quickly set a card's width. + +{% example html %} +
+
+

Card title

+

With supporting text below as a natural lead-in to additional content.

+ Button +
+
+ +
+
+

Card title

+

With supporting text below as a natural lead-in to additional content.

+ Button +
+
+{% endexample %} + +### Using custom CSS + +Use custom CSS in your stylesheets or as inline styles to set a width. + +{% example html %} +
+
+

Special title treatment

+

With supporting text below as a natural lead-in to additional content.

+ Go somewhere +
+
+{% endexample %} {% example html %}