From 10a9601560d6fd1c396b2abd8a4fe4a4a9b04a32 Mon Sep 17 00:00:00 2001 From: Julian Thilo Date: Tue, 10 Sep 2013 18:00:58 +0200 Subject: Fix #10556 Make media queries example in docs clearer --- css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'css.html') diff --git a/css.html b/css.html index cf2f1ca73..b924ae6dd 100644 --- a/css.html +++ b/css.html @@ -74,7 +74,7 @@ base_url: "../"

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

Media queries

-

We use the following media queries to create the key breakpoints in our grid system.

+

We use the following media queries in our LESS files to create the key breakpoints in our grid system.

{% highlight css %} /* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ -- cgit v1.2.3 From 73403b78cc9ac12add21cefca2d8bd4109bd333a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zlatan=20Vasovi=C4=87?= Date: Thu, 19 Sep 2013 16:41:06 +0200 Subject: =?UTF-8?q?white=20=E2=86=92=20#fff?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'css.html') diff --git a/css.html b/css.html index b924ae6dd..013b579c3 100644 --- a/css.html +++ b/css.html @@ -45,7 +45,7 @@ base_url: "../"

Bootstrap sets basic global display, typography, and link styles. Specifically, we:

-- cgit v1.2.3 From c4e7e3c933db27bf82b4190ed9c522bd1850c82f Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 23 Sep 2013 12:46:57 -0700 Subject: deprecate .hide; fixes #10446 --- css.html | 21 ++++++--------------- 1 file changed, 6 insertions(+), 15 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 013b579c3..7f527084f 100644 --- a/css.html +++ b/css.html @@ -2332,18 +2332,20 @@ For example, <section> should be wrapped as inline.

Showing and hiding content

-

Force an element to be shown or hidden via display with the use of .show and .hide classes. These classes use !important to avoid specificity conflicts, just like the quick floats. They are only available for block level toggling. They can also be used as mixins.

+

Force an element to be shown or hidden (including for screen readers) with the use of .show and .hidden classes. These classes use !important to avoid specificity conflicts, just like the quick floats. They are only available for block level toggling. They can also be used as mixins.

+

.hide is also available, but it does not always affect screen readers and is deprecated as of v3.0.1. Use .hidden or .sr-only instead.

{% highlight html %}
...
-
...
+ {% endhighlight %} {% highlight css %} // Classes .show { display: block !important; } -.hide { +.hidden { display: none !important; + visibility: hidden !important; } // Usage as mixins @@ -2351,23 +2353,12 @@ For example, <section> should be wrapped as inline. .show(); } .another-element { - .hide(); + .hidden(); } {% endhighlight %}

Screen reader content

-

Hide an element everywhere, including screen readers, with .hidden. Can also be used as a mixin.

-{% highlight html %} - -{% endhighlight %} -{% highlight css %} -// Usage as a Mixin -.example { - .hidden(); -} -{% endhighlight %} -

Hide an element to all devices except screen readers with .sr-only. Necessary for following accessibility best practices. Can also be used as a mixin.

{% highlight html %} Skip to content -- cgit v1.2.3 From af4d1027671b278bdc3b0069bb7ef871bf936109 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Tue, 24 Sep 2013 18:02:10 -0700 Subject: Use "Skip to main content" phrasing consistently; further #10786 fixes --- css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'css.html') diff --git a/css.html b/css.html index 7f527084f..0ff495dc1 100644 --- a/css.html +++ b/css.html @@ -2361,7 +2361,7 @@ For example, <section> should be wrapped as inline.

Screen reader content

Hide an element to all devices except screen readers with .sr-only. Necessary for following accessibility best practices. Can also be used as a mixin.

{% highlight html %} -Skip to content +Skip to main content {% endhighlight %} {% highlight css %} // Usage as a Mixin -- cgit v1.2.3 From 2fa03734a316e00cab283ab99d8a9e020cf9bd07 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Tue, 24 Sep 2013 18:48:01 -0700 Subject: add cross-reference to Input Groups in CSS Form docs; fixes #10792 --- css.html | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'css.html') diff --git a/css.html b/css.html index 0ff495dc1..a27f5afb8 100644 --- a/css.html +++ b/css.html @@ -1661,6 +1661,10 @@ For example, <section> should be wrapped as inline. {% highlight html %} {% endhighlight %} +
+

Input groups

+

To add integrated text or buttons before and/or after any text-based <input>, check out the input group component.

+

Textarea

Form control which supports multiple lines of text. Change rows attribute as necessary.

-- cgit v1.2.3 From 1a476b623ebea6b5f95161b865fb38ddd766fa84 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Sep 2013 21:27:49 -0500 Subject: don't include . in link --- css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'css.html') diff --git a/css.html b/css.html index a27f5afb8..965bdc548 100644 --- a/css.html +++ b/css.html @@ -1663,7 +1663,7 @@ For example, <section> should be wrapped as inline. {% endhighlight %}

Input groups

-

To add integrated text or buttons before and/or after any text-based <input>, check out the input group component.

+

To add integrated text or buttons before and/or after any text-based <input>, check out the input group component.

Textarea

-- cgit v1.2.3 From e34e73714a4a6d73145f434d74594a45d6d145a8 Mon Sep 17 00:00:00 2001 From: Alex Kalicki Date: Sat, 28 Sep 2013 22:51:30 -0400 Subject: Better documentation and optimized examples for grid classes --- css.html | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 965bdc548..51c075984 100644 --- a/css.html +++ b/css.html @@ -173,6 +173,7 @@ base_url: "../" +

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.

Example: Stacked-to-horizontal

Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices.

@@ -278,27 +279,27 @@ base_url: "../"
.col-xs-12 .col-sm-6 .col-md-8
-
.col-xs-6 .col-sm-6 .col-md-4
+
.col-xs-6 .col-md-4
-
.col-xs-6 .col-sm-4 .col-md-4
-
.col-xs-6 .col-sm-4 .col-md-4
+
.col-xs-6 .col-sm-4
+
.col-xs-6 .col-sm-4
-
.col-xs-6 .col-sm-4 .col-md-4
+
.col-xs-6 .col-sm-4
{% highlight html %}
.col-xs-12 .col-sm-6 .col-md-8
-
.col-xs-6 .col-sm-6 .col-md-4
+
.col-xs-6 .col-md-4
-
.col-xs-6 .col-sm-4 .col-md-4
-
.col-xs-6 .col-sm-4 .col-md-4
+
.col-xs-6 .col-sm-4
+
.col-xs-6 .col-sm-4
-
.col-xs-6 .col-sm-4 .col-md-4
+
.col-xs-6 .col-sm-4
{% endhighlight %} -- cgit v1.2.3 From f2d90d12dcef5b7871e4b82f2c1de93e461ceec5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zlatan=20Vasovi=C4=87?= Date: Mon, 30 Sep 2013 19:31:41 +0200 Subject: Remove "Remove margin on the body" from base css docs Normalize did that. --- css.html | 1 - 1 file changed, 1 deletion(-) (limited to 'css.html') diff --git a/css.html b/css.html index 965bdc548..b2da966c7 100644 --- a/css.html +++ b/css.html @@ -44,7 +44,6 @@ base_url: "../"

Bootstrap sets basic global display, typography, and link styles. Specifically, we:

    -
  • Remove margin on the body
  • Set background-color: #fff; on the body
  • Use the @font-family-base, @font-size-base, and @line-height-base attributes as our typographic base
  • Set the global link color via @link-color and apply link underlines only on :hover
    • -- cgit v1.2.3 From 7247527f0440acc7d4266e4d7cad91e25de38297 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 30 Sep 2013 10:45:18 -0700 Subject: also use .col-sm-* in other .form-horizontal example for consistency --- css.html | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 965bdc548..48d963cf4 100644 --- a/css.html +++ b/css.html @@ -1797,14 +1797,14 @@ For example, <section> should be wrapped as inline.
    - -
    + +

    email@example.com

    - -
    + +
    @@ -1813,14 +1813,14 @@ For example, <section> should be wrapped as inline. {% highlight html %}
    - -
    + +

    email@example.com

    - -
    + +
    -- cgit v1.2.3 From 0b8a3e65aab91baba038a8a0f5de6201077cdef4 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 30 Sep 2013 10:52:57 -0700 Subject: use .col-xs-* in "Forms: Column Sizing" docs so more responsive --- css.html | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 48d963cf4..919844e0f 100644 --- a/css.html +++ b/css.html @@ -1985,28 +1985,28 @@ For example, <section> should be wrapped as inline.
    -
    - +
    +
    -
    - +
    +
    -
    - +
    +
    {% highlight html %}
    -
    - +
    +
    -
    - +
    +
    -
    - +
    +
    {% endhighlight %} -- cgit v1.2.3 From def45c1f7456bae48119db999d81c3469912d0b7 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 30 Sep 2013 11:01:29 -0700 Subject: table contextual classes docs: .col-lg-* => .col-xs-* --- css.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 48d963cf4..2b35c0d06 100644 --- a/css.html +++ b/css.html @@ -1260,8 +1260,8 @@ For example, <section> should be wrapped as inline.
    - - + + -- cgit v1.2.3 From bb50e33a3068cd0e25f3411b59d66d3bd6751e66 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sun, 6 Oct 2013 16:17:32 -0700 Subject: fix #10961 --- css.html | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index b34cb4b92..cc232af37 100644 --- a/css.html +++ b/css.html @@ -424,7 +424,7 @@ base_url: "../" // Then clear the floated columns .clearfix(); - @media (min-width: @screen-small) { + @media (min-width: @screen-sm-min) { margin-left: (@gutter / -2); margin-right: (@gutter / -2); } @@ -462,7 +462,7 @@ base_url: "../" padding-right: (@gutter / 2); // Calculate width based on number of columns available - @media (min-width: @screen-small) { + @media (min-width: @screen-sm-min) { float: left; width: percentage((@columns / @grid-columns)); } @@ -470,17 +470,17 @@ base_url: "../" // Generate the small column offsets .make-sm-column-offset(@columns) { - @media (min-width: @screen-small) { + @media (min-width: @screen-sm-min) { margin-left: percentage((@columns / @grid-columns)); } } .make-sm-column-push(@columns) { - @media (min-width: @screen-small) { + @media (min-width: @screen-sm-min) { left: percentage((@columns / @grid-columns)); } } .make-sm-column-pull(@columns) { - @media (min-width: @screen-small) { + @media (min-width: @screen-sm-min) { right: percentage((@columns / @grid-columns)); } } @@ -495,7 +495,7 @@ base_url: "../" padding-right: (@gutter / 2); // Calculate width based on number of columns available - @media (min-width: @screen-medium) { + @media (min-width: @screen-md-min) { float: left; width: percentage((@columns / @grid-columns)); } @@ -503,17 +503,17 @@ base_url: "../" // Generate the medium column offsets .make-md-column-offset(@columns) { - @media (min-width: @screen-medium) { + @media (min-width: @screen-md-min) { margin-left: percentage((@columns / @grid-columns)); } } .make-md-column-push(@columns) { - @media (min-width: @screen-medium) { + @media (min-width: @screen-md-min) { left: percentage((@columns / @grid-columns)); } } .make-md-column-pull(@columns) { - @media (min-width: @screen-medium) { + @media (min-width: @screen-md-min) { right: percentage((@columns / @grid-columns)); } } @@ -528,7 +528,7 @@ base_url: "../" padding-right: (@gutter / 2); // Calculate width based on number of columns available - @media (min-width: @screen-large) { + @media (min-width: @screen-lg-min) { float: left; width: percentage((@columns / @grid-columns)); } @@ -536,17 +536,17 @@ base_url: "../" // Generate the large column offsets .make-lg-column-offset(@columns) { - @media (min-width: @screen-large) { + @media (min-width: @screen-lg-min) { margin-left: percentage((@columns / @grid-columns)); } } .make-lg-column-push(@columns) { - @media (min-width: @screen-large) { + @media (min-width: @screen-lg-min) { left: percentage((@columns / @grid-columns)); } } .make-lg-column-pull(@columns) { - @media (min-width: @screen-large) { + @media (min-width: @screen-lg-min) { right: percentage((@columns / @grid-columns)); } } -- cgit v1.2.3 From a8afb4668802aaba50ca90e5862d91a750d90dc6 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sun, 6 Oct 2013 20:18:03 -0700 Subject: document .h1 thru .h6; fixes part of #10102 --- css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'css.html') diff --git a/css.html b/css.html index b34cb4b92..b808e0b9b 100644 --- a/css.html +++ b/css.html @@ -587,7 +587,7 @@ base_url: "../"

    Headings

    -

    All HTML headings, <h1> through <h6> are available.

    +

    All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

    -- cgit v1.2.3 From 969cb04acbdd1b5835acc203675c10ec2ba98c2c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 7 Oct 2013 15:00:46 -0500 Subject: Fixes #10126: Update responsive test cases to properly highlight hidden class examples --- css.html | 42 +++++++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 21 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 904fdaab4..69f1c4c50 100644 --- a/css.html +++ b/css.html @@ -2570,52 +2570,52 @@ For example, <section> should be wrapped as inline.

    Hidden on...

    -

    Here, green checkmarks indicate the element is hidden in your current viewport.

    +

    Here, green checkmarks also indicate the element is hidden in your current viewport.

    - Extra small - + + ✔ Hidden on x-small
    - Small - + + ✔ Hidden on small
    - Medium - ✔ Hidden on medium + Medium + ✔ Hidden on medium
    - Large - + + ✔ Hidden on large
    - Extra small and small - + + ✔ Hidden on x-small and small
    - Medium and large - + + ✔ Hidden on medium and large
    - Extra small and medium - + + ✔ Hidden on x-small and medium
    - Small and large - + + ✔ Hidden on small and large
    - Extra small and large - + + ✔ Hidden on x-small and large
    - Small and medium - + + ✔ Hidden on small and medium
    -- cgit v1.2.3 From 12fa502e67df45d27e151fd51b5a497489232626 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Oct 2013 15:23:58 -0700 Subject: Document caret /cc #10102 --- css.html | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) (limited to 'css.html') diff --git a/css.html b/css.html index 69f1c4c50..d884c765e 100644 --- a/css.html +++ b/css.html @@ -72,6 +72,13 @@ base_url: "../"

    Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

    +

    How it works

    +

    Grid systems are great for building easy to use and maintain web pages. In the most basic implementation, you create rows of columns to house your content. Bootstrap's grid system enables this in two ways: predefined CSS classes and LESS mixins. In both cases, the following guidelines apply.

    +
      +
    • Create a .row to house your columns. No content should be placed directly within a row, only in columns.
      • +
    • Each column is created by specifying the number of available grid columns you'd like to span. By default, we have 12 columns. For an even layout, you'd create two columns, each spanning six columns.
      • +
    +

    Media queries

    We use the following media queries in our LESS files to create the key breakpoints in our grid system.

    {% highlight css %} @@ -2258,6 +2265,16 @@ For example, <section> should be wrapped as inline. {% endhighlight %} +

    Carets

    +

    Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in dropup menus.

    +
    + +
    +{% highlight html %} + +{% endhighlight %} + +

    Quick floats

    Float an element to the left or right with a class. !important is included to avoid specificity issues. Classes can also be used as mixins.

    {% highlight html %} -- cgit v1.2.3 From be1f0b07f3b8d0b78a7e07f624f111c02789c2b6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Oct 2013 16:02:56 -0700 Subject: mention .small in docs /cc #10102 --- css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'css.html') diff --git a/css.html b/css.html index d884c765e..f6eb86c53 100644 --- a/css.html +++ b/css.html @@ -634,7 +634,7 @@ base_url: "../"
    h6. Bootstrap heading
    {% endhighlight %} -

    Also included with headings is an autoscaling <small> element. Use it for smaller, gray secondary text in any heading.

    +

    Create lighter, secondary text in any heading with a generic <small> tag or the .small class.

    -- cgit v1.2.3 From 49f177fe6034c00242705a2f02b29758aaf96879 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Oct 2013 17:12:04 -0700 Subject: finish grid docs intro for now; needs work though --- css.html | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index f6eb86c53..f8b801ea7 100644 --- a/css.html +++ b/css.html @@ -72,12 +72,15 @@ base_url: "../"

    Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

    -

    How it works

    -

    Grid systems are great for building easy to use and maintain web pages. In the most basic implementation, you create rows of columns to house your content. Bootstrap's grid system enables this in two ways: predefined CSS classes and LESS mixins. In both cases, the following guidelines apply.

    +

    Introduction

    +

    Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:

      -
    • Create a .row to house your columns. No content should be placed directly within a row, only in columns.
      • -
    • Each column is created by specifying the number of available grid columns you'd like to span. By default, we have 12 columns. For an even layout, you'd create two columns, each spanning six columns.
      • +
    • Use rows to create horizontal groups of columns.
      • +
    • Content should be placed within columns, and only columns may be immediate children of rows.
      • +
    • Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. LESS mixins can also be used for more semantic layouts.
      • +
    • 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.
    +

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

    Media queries

    We use the following media queries in our LESS files to create the key breakpoints in our grid system.

    -- cgit v1.2.3 From 727a91de1cdf5cbc4f25528e073480332a5940c5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Oct 2013 17:25:27 -0700 Subject: another grid .row mention --- css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'css.html') diff --git a/css.html b/css.html index f8b801ea7..e0828c6ff 100644 --- a/css.html +++ b/css.html @@ -185,7 +185,7 @@ base_url: "../"

    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.

    Example: Stacked-to-horizontal

    -

    Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices.

    +

    Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.

    .col-md-1
    -- cgit v1.2.3 From 2d1fa8cb5bdb61043b1abad5497ce2c74764106e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Oct 2013 18:54:15 -0700 Subject: mention .invisible in docs per #10102 --- css.html | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'css.html') diff --git a/css.html b/css.html index e0828c6ff..653ede7cc 100644 --- a/css.html +++ b/css.html @@ -2357,7 +2357,8 @@ For example, <section> should be wrapped as inline.

    Showing and hiding content

    Force an element to be shown or hidden (including for screen readers) with the use of .show and .hidden classes. These classes use !important to avoid specificity conflicts, just like the quick floats. They are only available for block level toggling. They can also be used as mixins.

    -

    .hide is also available, but it does not always affect screen readers and is deprecated as of v3.0.1. Use .hidden or .sr-only instead.

    +

    .hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1. Use .hidden or .sr-only instead.

    +

    Furthermore, .invisible can be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document.

    {% highlight html %}
    ...
    @@ -2371,6 +2372,9 @@ For example, <section> should be wrapped as inline. display: none !important; visibility: hidden !important; } +.invisible { + visibility: hidden; +} // Usage as mixins .element { -- cgit v1.2.3 From ed12d41caed288b47f1f225115503d3086d69e6a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Oct 2013 19:10:17 -0700 Subject: add docs example for #10938 to show responsive column clearing in grid --- css.html | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) (limited to 'css.html') diff --git a/css.html b/css.html index 653ede7cc..63cd74b1d 100644 --- a/css.html +++ b/css.html @@ -314,6 +314,22 @@ base_url: "../"

    Responsive column resets

    With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

    +
    +
    +
    + .col-xs-6 .col-sm-3 +
    + Resize your viewport or check it out on your phone for an example. +
    +
    .col-xs-6 .col-sm-3
    + + +
    + +
    .col-xs-6 .col-sm-3
    +
    .col-xs-6 .col-sm-3
    +
    +
    {% highlight html %}
    .col-xs-6 .col-sm-3
    -- cgit v1.2.3 From bf4c7148513920f25a5c086fdf2091d06683f2ce Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Oct 2013 19:12:23 -0700 Subject: follow up to #10102, cc @cvrebert --- css.html | 1 + 1 file changed, 1 insertion(+) (limited to 'css.html') diff --git a/css.html b/css.html index 63cd74b1d..e7c4debc8 100644 --- a/css.html +++ b/css.html @@ -721,6 +721,7 @@ base_url: "../"

    Small text

    For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested <small> elements.

    +

    You may alternatively use an inline element with .small in place of any <small>

    This line of text is meant to be treated as fine print.

    -- cgit v1.2.3 From 950453db43f02d7d8dc653427f77317639cf0874 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Oct 2013 19:31:39 -0700 Subject: mention rows must be in containers in grid docs --- css.html | 1 + 1 file changed, 1 insertion(+) (limited to 'css.html') diff --git a/css.html b/css.html index e7c4debc8..9a5e56cf9 100644 --- a/css.html +++ b/css.html @@ -75,6 +75,7 @@ base_url: "../"

    Introduction

    Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:

      +
    • Rows must be placed within a .container for proper alignment and padding.
    • Use rows to create horizontal groups of columns.
    • Content should be placed within columns, and only columns may be immediate children of rows.
    • Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. LESS mixins can also be used for more semantic layouts.
      • -- cgit v1.2.3 From f660bd42052949124a2c3342dadcdb12fd979f02 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Oct 2013 19:36:39 -0700 Subject: clarify more grid stuff, specifically 100% fluid designs; fixes #10711 --- css.html | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'css.html') diff --git a/css.html b/css.html index 9a5e56cf9..12032c497 100644 --- a/css.html +++ b/css.html @@ -79,10 +79,16 @@ base_url: "../"
    • Use rows to create horizontal groups of columns.
    • Content should be placed within columns, and only columns may be immediate children of rows.
    • Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. LESS mixins can also be used for more semantic layouts.
      • +
    • 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.
    • 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.

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

    +
    +

    Grids and full-width layouts

    +

    Folks looking to create fully fluid layouts (meaning your site stretches the entire width of the viewport) must wrap their grid content in a containing element with padding: 0 15px; to offset the margin: 0 -15px; used on .rows.

    +
    +

    Media queries

    We use the following media queries in our LESS files to create the key breakpoints in our grid system.

    {% highlight css %} -- cgit v1.2.3 From 96a19c18fbef89a4f4ae261ae78e7fc26e9d2dd8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 17 Oct 2013 14:47:27 -0700 Subject: copy change, add to buttons anchor section --- css.html | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'css.html') diff --git a/css.html b/css.html index 12032c497..1eea9152b 100644 --- a/css.html +++ b/css.html @@ -2216,6 +2216,10 @@ For example, <section> should be wrapped as inline.

    Link functionality not impacted

    This class will only change the <a>'s appearance, not its functionality. Use custom JavaScript to disable links here.

    +
    +

    Context-specific usage

    +

    While button classes can be used on <a> and <button> elements, only <button> elements are supported within our nav and navbar components.

    +

    Button tags

    -- cgit v1.2.3