diff options
Diffstat (limited to 'docs/components/buttons.md')
| -rw-r--r-- | docs/components/buttons.md | 24 |
1 files changed, 4 insertions, 20 deletions
diff --git a/docs/components/buttons.md b/docs/components/buttons.md index c02e74e1f..d97b88112 100644 --- a/docs/components/buttons.md +++ b/docs/components/buttons.md @@ -1,6 +1,7 @@ -<a id="buttons"></a> - -# Buttons +--- +layout: page +title: Buttons +--- Use any of the available button classes to quickly create a styled button. @@ -24,10 +25,6 @@ Use any of the available button classes to quickly create a styled button. <button type="button" class="btn btn-link">Link</button> {% endexample %} - - -<a id="buttons-sizes"></a> - ## Sizes Fancy larger or smaller buttons? Add `.btn-lg`, `.btn-sm`, or `.btn-xs` for additional sizes. @@ -54,10 +51,6 @@ Create block level buttons—those that span the full width of a parent—by add <button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button> {% endexample %} - - -<a id="buttons-active"></a> - ## Active state Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. **There's no need to add a class to `<button>`s as they use a pseudo-class**. However, you can still force the same active appearance with `.active` should you need to replicate the state programmatically. @@ -67,10 +60,6 @@ Buttons will appear pressed (with a darker background, darker border, and inset <a href="#" class="btn btn-secondary btn-lg active" role="button">Link</a> {% endexample %} - - -<a id="buttons-disabled"></a> - ## Disabled state Make buttons look unclickable by adding the `disabled` boolean attribute to any `<button>` element. @@ -102,10 +91,6 @@ As `<a>` elements don't support the `disabled` attribute, you must add the `.dis <p>While button classes can be used on <code><a></code> and <code><button></code> elements, only <code><button></code> elements are supported within our nav and navbar components.</p> </div> - - -<a id="buttons-tags"></a> - ## Button tags Use the button classes on an `<a>`, `<button>`, or `<input>` element. @@ -117,7 +102,6 @@ Use the button classes on an `<a>`, `<button>`, or `<input>` element. <input class="btn btn-secondary" type="submit" value="Submit"> {% endexample %} - <div class="bs-callout bs-callout-warning"> <h4>Cross-browser rendering</h4> <p>As a best practice, <strong>we highly recommend using the <code><button></code> element whenever possible</strong> to ensure matching cross-browser rendering.</p> |