<h2>Button sizes</h2>
- <p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for two additional sizes.</p>
+ <p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for additional sizes.</p>
<div class="bs-docs-example">
<p>
- <button type="button" class="btn btn-large btn-primary">Primary action</button>
- <button type="button" class="btn btn-large">Action</button>
+ <button type="button" class="btn btn-large btn-primary">Large button</button>
+ <button type="button" class="btn btn-large">Large button</button>
</p>
<p>
- <button type="button" class="btn btn-primary">Primary action</button>
- <button type="button" class="btn">Action</button>
+ <button type="button" class="btn btn-primary">Default button</button>
+ <button type="button" class="btn">Default button</button>
</p>
<p>
- <button type="button" class="btn btn-small btn-primary">Primary action</button>
- <button type="button" class="btn btn-small">Action</button>
+ <button type="button" class="btn btn-small btn-primary">Small button</button>
+ <button type="button" class="btn btn-small">Small button</button>
</p>
<p>
- <button type="button" class="btn btn-mini btn-primary">Primary action</button>
- <button type="button" class="btn btn-mini">Action</button>
+ <button type="button" class="btn btn-mini btn-primary">Mini button</button>
+ <button type="button" class="btn btn-mini">Mini button</button>
</p>
</div>
<pre class="prettyprint linenums">
-<button class="btn btn-large" type="button">Large button</button>
-<button class="btn btn-small" type="button">Small button</button>
-<button class="btn" type="button">Default button</button>
-<button class="btn btn-mini" type="button">Mini button</button>
+<p>
+ <button class="btn btn-large btn-primary" type="button">Large button</button>
+ <button class="btn btn-large" type="button">Large button</button>
+</p>
+<p>
+ <button class="btn btn-primary" type="button">Default button</button>
+ <button class="btn" type="button">Default button</button>
+</p>
+<p>
+ <button class="btn btn-small btn-primary" type="button">Small button</button>
+ <button class="btn btn-small" type="button">Small button</button>
+</p>
+<p>
+ <button class="btn btn-mini btn-primary" type="button">Mini button</button>
+ <button class="btn btn-mini" type="button">Mini button</button>
+</p>
</pre>
<p>Create block level buttons—those that span the full width of a parent— by adding <code>.btn-block</code>.</p>
<div class="bs-docs-example">
<h2>{{_i}}Button sizes{{/i}}</h2>
- <p>{{_i}}Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for two additional sizes.{{/i}}</p>
+ <p>{{_i}}Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for additional sizes.{{/i}}</p>
<div class="bs-docs-example">
<p>
- <button type="button" class="btn btn-large btn-primary">{{_i}}Primary action{{/i}}</button>
- <button type="button" class="btn btn-large">{{_i}}Action{{/i}}</button>
+ <button type="button" class="btn btn-large btn-primary">{{_i}}Large button{{/i}}</button>
+ <button type="button" class="btn btn-large">{{_i}}Large button{{/i}}</button>
</p>
<p>
- <button type="button" class="btn btn-primary">{{_i}}Primary action{{/i}}</button>
- <button type="button" class="btn">{{_i}}Action{{/i}}</button>
+ <button type="button" class="btn btn-primary">{{_i}}Default button{{/i}}</button>
+ <button type="button" class="btn">{{_i}}Default button{{/i}}</button>
</p>
<p>
- <button type="button" class="btn btn-small btn-primary">{{_i}}Primary action{{/i}}</button>
- <button type="button" class="btn btn-small">{{_i}}Action{{/i}}</button>
+ <button type="button" class="btn btn-small btn-primary">{{_i}}Small button{{/i}}</button>
+ <button type="button" class="btn btn-small">{{_i}}Small button{{/i}}</button>
</p>
<p>
- <button type="button" class="btn btn-mini btn-primary">{{_i}}Primary action{{/i}}</button>
- <button type="button" class="btn btn-mini">{{_i}}Action{{/i}}</button>
+ <button type="button" class="btn btn-mini btn-primary">{{_i}}Mini button{{/i}}</button>
+ <button type="button" class="btn btn-mini">{{_i}}Mini button{{/i}}</button>
</p>
</div>
<pre class="prettyprint linenums">
-<button class="btn btn-large" type="button">{{_i}}Large button{{/i}}</button>
-<button class="btn btn-small" type="button">{{_i}}Small button{{/i}}</button>
-<button class="btn" type="button">{{_i}}Default button{{/i}}</button>
-<button class="btn btn-mini" type="button">{{_i}}Mini button{{/i}}</button>
+<p>
+ <button class="btn btn-large btn-primary" type="button">{{_i}}Large button{{/i}}</button>
+ <button class="btn btn-large" type="button">{{_i}}Large button{{/i}}</button>
+</p>
+<p>
+ <button class="btn btn-primary" type="button">{{_i}}Default button{{/i}}</button>
+ <button class="btn" type="button">{{_i}}Default button{{/i}}</button>
+</p>
+<p>
+ <button class="btn btn-small btn-primary" type="button">{{_i}}Small button{{/i}}</button>
+ <button class="btn btn-small" type="button">{{_i}}Small button{{/i}}</button>
+</p>
+<p>
+ <button class="btn btn-mini btn-primary" type="button">{{_i}}Mini button{{/i}}</button>
+ <button class="btn btn-mini" type="button">{{_i}}Mini button{{/i}}</button>
+</p>
</pre>
<p>{{_i}}Create block level buttons—those that span the full width of a parent— by adding <code>.btn-block</code>.{{/i}}</p>
<div class="bs-docs-example">