@@ -70,81 +70,81 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
...
@@ -70,81 +70,81 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<p>Be sure to checkout the <ahref="../examples/grid/">full-page grid example</a> as well.</p>
<p>Be sure to checkout the <ahref="../examples/grid/">full-page grid example</a> as well.</p>
<divclass="bs-docs-grid">
<divclass="bs-docs-grid">
<divclass="row show-grid">
<divclass="row show-grid">
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
</div>
</div>
<divclass="row show-grid">
<divclass="row show-grid">
<divclass="col col-lg-4">4</div>
<divclass="col-lg-4">4</div>
<divclass="col col-lg-4">4</div>
<divclass="col-lg-4">4</div>
<divclass="col col-lg-4">4</div>
<divclass="col-lg-4">4</div>
</div>
</div>
<divclass="row show-grid">
<divclass="row show-grid">
<divclass="col col-lg-6">6</div>
<divclass="col-lg-6">6</div>
<divclass="col col-lg-6">6</div>
<divclass="col-lg-6">6</div>
</div>
</div>
</div>
</div>
{% highlight html %}
{% highlight html %}
<divclass="row">
<divclass="row">
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
</div>
</div>
<divclass="row">
<divclass="row">
<divclass="col col-lg-4">4</div>
<divclass="col-lg-4">4</div>
<divclass="col col-lg-4">4</div>
<divclass="col-lg-4">4</div>
<divclass="col col-lg-4">4</div>
<divclass="col-lg-4">4</div>
</div>
</div>
<divclass="row">
<divclass="row">
<divclass="col col-lg-6">6</div>
<divclass="col-lg-6">6</div>
<divclass="col col-lg-6">6</div>
<divclass="col-lg-6">6</div>
</div>
</div>
{% endhighlight %}
{% endhighlight %}
<h3id="grid-offsetting">Offsetting columns</h3>
<h3id="grid-offsetting">Offsetting columns</h3>
<p>Move columns to the right using <code>.col-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-offset-4</code> moves <code>.col col-lg-4</code> over four columns.</p>
<p>Move columns to the right using <code>.col-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-offset-4</code> moves <code>.col-lg-4</code> over four columns.</p>
@@ -152,13 +152,13 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
...
@@ -152,13 +152,13 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3id="grid-nesting">Nesting columns</h3>
<h3id="grid-nesting">Nesting columns</h3>
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-lg-*</code> columns within an existing <code>.col-lg-*</code> column. Nested rows should include a set of columns that add up to 12.</p>
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-lg-*</code> columns within an existing <code>.col-lg-*</code> column. Nested rows should include a set of columns that add up to 12.</p>
<divclass="row show-grid">
<divclass="row show-grid">
<divclass="col col-lg-9">
<divclass="col-lg-9">
Level 1: 9 columns
Level 1: 9 columns
<divclass="row show-grid">
<divclass="row show-grid">
<divclass="col col-lg-6">
<divclass="col-lg-6">
Level 2: 6 columns
Level 2: 6 columns
</div>
</div>
<divclass="col col-lg-6">
<divclass="col-lg-6">
Level 2: 6 columns
Level 2: 6 columns
</div>
</div>
</div>
</div>
...
@@ -166,13 +166,13 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
...
@@ -166,13 +166,13 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
</div>
</div>
{% highlight html %}
{% highlight html %}
<divclass="row">
<divclass="row">
<divclass="col col-lg-9">
<divclass="col-lg-9">
Level 1: 9 columns
Level 1: 9 columns
<divclass="row">
<divclass="row">
<divclass="col col-lg-6">
<divclass="col-lg-6">
Level 2: 6 columns
Level 2: 6 columns
</div>
</div>
<divclass="col col-lg-6">
<divclass="col-lg-6">
Level 2: 6 columns
Level 2: 6 columns
</div>
</div>
</div>
</div>
...
@@ -183,29 +183,29 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
...
@@ -183,29 +183,29 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3id="grid-column-ordering">Column ordering</h3>
<h3id="grid-column-ordering">Column ordering</h3>
<p>Easily change the order of our built-in grid columns with <code>.col-push-*</code> and <code>.col-pull-*</code> modifier classes.</p>
<p>Easily change the order of our built-in grid columns with <code>.col-push-*</code> and <code>.col-pull-*</code> modifier classes.</p>
<divclass="row show-grid">
<divclass="row show-grid">
<divclass="col col-lg-9 col-push-3">9</div>
<divclass="col-lg-9 col-push-3">9</div>
<divclass="col col-lg-3 col-pull-9">3</div>
<divclass="col-lg-3 col-pull-9">3</div>
</div>
</div>
{% highlight html %}
{% highlight html %}
<divclass="row show-grid">
<divclass="row show-grid">
<divclass="col col-lg-9 col-push-3">9</div>
<divclass="col-lg-9 col-push-3">9</div>
<divclass="col col-lg-3 col-pull-9">3</div>
<divclass="col-lg-3 col-pull-9">3</div>
</div>
</div>
{% endhighlight %}
{% endhighlight %}
<h3id="grid-small">Small device grid</h3>
<h3id="grid-small">Small device grid</h3>
<p>Use the small device grid classes, like <code>.col-sm-6</code>, to create columned layouts on phone and tablet devices (anything under 768px). Offsets, pushes, and pulls are not available with the small grid at this time.</p>
<p>Use the small device grid classes, like <code>.col-sm-6</code>, to create columned layouts on phone and tablet devices (anything under 768px). Offsets, pushes, and pulls are not available with the small grid at this time.</p>
<divclass="row show-grid">
<divclass="row show-grid">
<divclass="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
<divclass="col-lg-4 col-sm-6">4 cols, 6 small cols</div>
<divclass="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
<divclass="col-lg-4 col-sm-6">4 cols, 6 small cols</div>
<divclass="col col-lg-4 col-sm-12">4 cols, 12 small cols</div>
<divclass="col-lg-4 col-sm-12">4 cols, 12 small cols</div>
</div>
</div>
{% highlight html %}
{% highlight html %}
<divclass="row">
<divclass="row">
<divclass="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
<divclass="col-lg-4 col-sm-6">4 cols, 6 small cols</div>
<divclass="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
<divclass="col-lg-4 col-sm-6">4 cols, 6 small cols</div>
<divclass="col col-lg-4 col-sm-12">4 cols, 12 small cols</div>
<divclass="col-lg-4 col-sm-12">4 cols, 12 small cols</div>
</div>
</div>
{% endhighlight %}
{% endhighlight %}
...
@@ -918,8 +918,8 @@ For example, <code><section></code> should be wrapped as inline.
...
@@ -918,8 +918,8 @@ For example, <code><section></code> should be wrapped as inline.
<p>Use contextual classes to color table rows.</p>
<p>Use contextual classes to color table rows.</p>
<tableclass="table table-bordered table-striped">
<tableclass="table table-bordered table-striped">
<colgroup>
<colgroup>
<colclass="col col-lg-1">
<colclass="col-lg-1">
<colclass="col col-lg-7">
<colclass="col-lg-7">
</colgroup>
</colgroup>
<thead>
<thead>
<tr>
<tr>
...
@@ -1078,14 +1078,14 @@ For example, <code><section></code> should be wrapped as inline.
...
@@ -1078,14 +1078,14 @@ For example, <code><section></code> should be wrapped as inline.
<p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout.</p>
<p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout.</p>
@@ -1472,14 +1472,14 @@ For example, <code><section></code> should be wrapped as inline.
...
@@ -1472,14 +1472,14 @@ For example, <code><section></code> should be wrapped as inline.
<h4>Buttons instead of text</h4>
<h4>Buttons instead of text</h4>
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
@@ -17,7 +17,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
...
@@ -17,7 +17,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<h3>Basics</h3>
<h3>Basics</h3>
<divclass="row">
<divclass="row">
<divclass="col col-lg-4">
<divclass="col-lg-4">
<h4>Layout</h4>
<h4>Layout</h4>
<divclass="checkbox">
<divclass="checkbox">
<label>
<label>
...
@@ -44,7 +44,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
...
@@ -44,7 +44,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</label>
</label>
</div>
</div>
</div>
</div>
<divclass="col col-lg-4">
<divclass="col-lg-4">
<h4>Global CSS</h4>
<h4>Global CSS</h4>
<divclass="checkbox">
<divclass="checkbox">
<label>
<label>
...
@@ -77,7 +77,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
...
@@ -77,7 +77,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</label>
</label>
</div>
</div>
</div>
</div>
<divclass="col col-lg-4">
<divclass="col-lg-4">
<h4>Utility classes</h4>
<h4>Utility classes</h4>
<divclass="checkbox">
<divclass="checkbox">
<label>
<label>
...
@@ -102,7 +102,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
...
@@ -102,7 +102,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<h3>Components</h3>
<h3>Components</h3>
<divclass="row">
<divclass="row">
<divclass="col col-lg-4">
<divclass="col-lg-4">
<h4>Navigation</h4>
<h4>Navigation</h4>
<divclass="checkbox">
<divclass="checkbox">
<label>
<label>
...
@@ -135,7 +135,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
...
@@ -135,7 +135,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</label>
</label>
</div>
</div>
</div>
</div>
<divclass="col col-lg-4">
<divclass="col-lg-4">
<h4>Content blocks</h4>
<h4>Content blocks</h4>
<divclass="checkbox">
<divclass="checkbox">
<label>
<label>
...
@@ -162,7 +162,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
...
@@ -162,7 +162,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</label>
</label>
</div>
</div>
</div>
</div>
<divclass="col col-lg-4">
<divclass="col-lg-4">
<h4>Behavioral (requires JS)</h4>
<h4>Behavioral (requires JS)</h4>
<divclass="checkbox">
<divclass="checkbox">
<label>
<label>
...
@@ -204,7 +204,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
...
@@ -204,7 +204,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</div>
</div>
<divclass="row">
<divclass="row">
<divclass="col col-lg-4">
<divclass="col-lg-4">
<h4>Media</h4>
<h4>Media</h4>
<divclass="checkbox">
<divclass="checkbox">
<label>
<label>
...
@@ -231,7 +231,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
...
@@ -231,7 +231,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</label>
</label>
</div>
</div>
</div>
</div>
<divclass="col col-lg-4">
<divclass="col-lg-4">
<h4>Miscellaneous</h4>
<h4>Miscellaneous</h4>
<divclass="checkbox">
<divclass="checkbox">
<label>
<label>
...
@@ -276,7 +276,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
...
@@ -276,7 +276,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</div>
</div>
<pclass="lead">Choose which jQuery plugins should be included in your custom JavaScript files. Unsure what to include? Read the <ahref="/javascript/">JavaScript</a> page in the docs.</p>
<pclass="lead">Choose which jQuery plugins should be included in your custom JavaScript files. Unsure what to include? Read the <ahref="/javascript/">JavaScript</a> page in the docs.</p>
<divclass="row">
<divclass="row">
<divclass="col col-lg-6">
<divclass="col-lg-6">
<h4>Linked to components</h4>
<h4>Linked to components</h4>
<divclass="checkbox">
<divclass="checkbox">
<label>
<label>
...
@@ -327,7 +327,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
...
@@ -327,7 +327,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</label>
</label>
</div>
</div>
</div>
</div>
<divclass="col col-lg-6">
<divclass="col-lg-6">
<h4>Magic</h4>
<h4>Magic</h4>
<divclass="checkbox">
<divclass="checkbox">
<label>
<label>
...
@@ -374,7 +374,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
...
@@ -374,7 +374,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<h3>Body background</h3>
<h3>Body background</h3>
<divclass="row">
<divclass="row">
<divclass="col col-lg-6">
<divclass="col-lg-6">
<label>@body-bg</label>
<label>@body-bg</label>
<inputtype="text"placeholder="#fff">
<inputtype="text"placeholder="#fff">
<pclass="help-block">Background color applied to <code><body></code>.</p>
<pclass="help-block">Background color applied to <code><body></code>.</p>
...
@@ -383,7 +383,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
...
@@ -383,7 +383,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<p>On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply <code>float</code>s and <code>width</code>s. To create a basic grid layout, wrap a series of <code>.col-span-*</code> elements within a <code>.row</code>. As this is a 12-column grid, each <code>.col-span-*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.</p>
<p>On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply <code>float</code>s and <code>width</code>s. To create a basic grid layout, wrap a series of <code>.col-span-*</code> elements within a <code>.row</code>. As this is a 12-column grid, each <code>.col-span-*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.</p>
<divclass="bs-docs-grid">
<divclass="bs-docs-grid">
<divclass="row show-grid">
<divclass="row show-grid">
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
</div>
</div>
<divclass="row show-grid">
<divclass="row show-grid">
<divclass="col col-lg-4">4</div>
<divclass="col-lg-4">4</div>
<divclass="col col-lg-4">4</div>
<divclass="col-lg-4">4</div>
<divclass="col col-lg-4">4</div>
<divclass="col-lg-4">4</div>
</div>
</div>
<divclass="row show-grid">
<divclass="row show-grid">
<divclass="col col-lg-6">6</div>
<divclass="col-lg-6">6</div>
<divclass="col col-lg-6">6</div>
<divclass="col-lg-6">6</div>
</div>
</div>
</div>
</div>
{% highlight html %}
{% highlight html %}
<divclass="row">
<divclass="row">
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
<divclass="col col-lg-1">1</div>
<divclass="col-lg-1">1</div>
</div>
</div>
<divclass="row">
<divclass="row">
<divclass="col col-lg-4">4</div>
<divclass="col-lg-4">4</div>
<divclass="col col-lg-4">4</div>
<divclass="col-lg-4">4</div>
<divclass="col col-lg-4">4</div>
<divclass="col-lg-4">4</div>
</div>
</div>
<divclass="row">
<divclass="row">
<divclass="col col-lg-6">6</div>
<divclass="col-lg-6">6</div>
<divclass="col col-lg-6">6</div>
<divclass="col-lg-6">6</div>
</div>
</div>
{% endhighlight %}
{% endhighlight %}
<h3id="grid-offsetting">Offsetting columns</h3>
<h3id="grid-offsetting">Offsetting columns</h3>
<p>Move columns to the right using <code>.col-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-offset-4</code> moves <code>.col col-lg-4</code> over four columns.</p>
<p>Move columns to the right using <code>.col-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-offset-4</code> moves <code>.col-lg-4</code> over four columns.</p>
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-span-*</code> columns within an existing <code>.col-span-*</code> column. Nested rows should include a set of columns that add up to 12.</p>
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-span-*</code> columns within an existing <code>.col-span-*</code> column. Nested rows should include a set of columns that add up to 12.</p>
<p>Easily change the order of our built-in grid columns with <code>.col-push-*</code> and <code>.col-pull-*</code> modifier classes.</p>
<p>Easily change the order of our built-in grid columns with <code>.col-push-*</code> and <code>.col-pull-*</code> modifier classes.</p>
<divclass="row show-grid">
<divclass="row show-grid">
<divclass="col col-lg-9 col-push-3">9</div>
<divclass="col-lg-9 col-push-3">9</div>
<divclass="col col-lg-3 col-pull-9">3</div>
<divclass="col-lg-3 col-pull-9">3</div>
</div>
</div>
{% highlight html %}
{% highlight html %}
<divclass="row show-grid">
<divclass="row show-grid">
<divclass="col col-lg-9 col-push-3">9</div>
<divclass="col-lg-9 col-push-3">9</div>
<divclass="col col-lg-3 col-pull-9">3</div>
<divclass="col-lg-3 col-pull-9">3</div>
</div>
</div>
{% endhighlight %}
{% endhighlight %}
<h3id="grid-small">Small device grid</h3>
<h3id="grid-small">Small device grid</h3>
<p>Use the small device grid classes, like <code>.col-sm-6</code>, to create columned layouts on phone and tablet devices (anything under 768px). Offsets, pushes, and pulls are not available with the small grid at this time.</p>
<p>Use the small device grid classes, like <code>.col-sm-6</code>, to create columned layouts on phone and tablet devices (anything under 768px). Offsets, pushes, and pulls are not available with the small grid at this time.</p>
<divclass="row show-grid">
<divclass="row show-grid">
<divclass="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
<divclass="col-lg-4 col-sm-6">4 cols, 6 small cols</div>
<divclass="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
<divclass="col-lg-4 col-sm-6">4 cols, 6 small cols</div>
<divclass="col col-lg-4 col-sm-12">4 cols, 12 small cols</div>
<divclass="col-lg-4 col-sm-12">4 cols, 12 small cols</div>
</div>
</div>
{% highlight html %}
{% highlight html %}
<divclass="row">
<divclass="row">
<divclass="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
<divclass="col-lg-4 col-sm-6">4 cols, 6 small cols</div>
<divclass="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
<divclass="col-lg-4 col-sm-6">4 cols, 6 small cols</div>
<divclass="col col-lg-4 col-sm-12">4 cols, 12 small cols</div>
<divclass="col-lg-4 col-sm-12">4 cols, 12 small cols</div>
</div>
</div>
{% endhighlight %}
{% endhighlight %}
...
@@ -1199,8 +1199,8 @@ For example, <code><section></code> should be wrapped as inline.
...
@@ -1199,8 +1199,8 @@ For example, <code><section></code> should be wrapped as inline.
<p>Use contextual classes to color table rows.</p>
<p>Use contextual classes to color table rows.</p>
<tableclass="table table-bordered table-striped">
<tableclass="table table-bordered table-striped">
<colgroup>
<colgroup>
<colclass="col col-lg-1">
<colclass="col-lg-1">
<colclass="col col-lg-7">
<colclass="col-lg-7">
</colgroup>
</colgroup>
<thead>
<thead>
<tr>
<tr>
...
@@ -1565,10 +1565,10 @@ For example, <code><section></code> should be wrapped as inline.
...
@@ -1565,10 +1565,10 @@ For example, <code><section></code> should be wrapped as inline.
@@ -1767,14 +1767,14 @@ For example, <code><section></code> should be wrapped as inline.
...
@@ -1767,14 +1767,14 @@ For example, <code><section></code> should be wrapped as inline.
<h4>Buttons instead of text</h4>
<h4>Buttons instead of text</h4>
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
<formclass="bs-docs-example">
<formclass="bs-docs-example">
<divclass="input-group col col-lg-7">
<divclass="input-group col-lg-7">
<spanclass="input-group-btn">
<spanclass="input-group-btn">
<buttonclass="btn"type="button">Go!</button>
<buttonclass="btn"type="button">Go!</button>
</span>
</span>
<inputtype="text">
<inputtype="text">
</div>
</div>
<br>
<br>
<divclass="input-group col col-lg-7">
<divclass="input-group col-lg-7">
<inputtype="text">
<inputtype="text">
<spanclass="input-group-btn">
<spanclass="input-group-btn">
<buttonclass="btn"type="button">Go!</button>
<buttonclass="btn"type="button">Go!</button>
...
@@ -1782,14 +1782,14 @@ For example, <code><section></code> should be wrapped as inline.
...
@@ -1782,14 +1782,14 @@ For example, <code><section></code> should be wrapped as inline.
</div>
</div>
</form>
</form>
{% highlight html %}
{% highlight html %}
<divclass="input-group col col-lg-7">
<divclass="input-group col-lg-7">
<spanclass="input-group-btn">
<spanclass="input-group-btn">
<buttonclass="btn"type="button">Go!</button>
<buttonclass="btn"type="button">Go!</button>
</span>
</span>
<inputtype="text">
<inputtype="text">
</div>
</div>
<divclass="input-group col col-lg-7">
<divclass="input-group col-lg-7">
<inputtype="text">
<inputtype="text">
<spanclass="input-group-btn">
<spanclass="input-group-btn">
<buttonclass="btn"type="button">Go!</button>
<buttonclass="btn"type="button">Go!</button>
...
@@ -1800,7 +1800,7 @@ For example, <code><section></code> should be wrapped as inline.
...
@@ -1800,7 +1800,7 @@ For example, <code><section></code> should be wrapped as inline.
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
@@ -118,17 +118,17 @@ title: Justified nav template
...
@@ -118,17 +118,17 @@ title: Justified nav template
<!-- Example row of columns -->
<!-- Example row of columns -->
<divclass="row">
<divclass="row">
<divclass="col col-lg-4">
<divclass="col-lg-4">
<h2>Heading</h2>
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
