aboutsummaryrefslogtreecommitdiff
path: root/docs/4.0/components/input-group.md
diff options
context:
space:
mode:
authorm5o <[email protected]>2018-03-14 16:44:38 +0100
committerXhmikosR <[email protected]>2018-03-14 17:44:38 +0200
commitd01b4eb02560ba67b61b1b2c0496e9f8281c154d (patch)
tree9c32c81f44be15d729fc8351360921aa1b42e572 /docs/4.0/components/input-group.md
parent03b7f52e820c80e244479c59c0920c541ee1277b (diff)
downloadbootstrap-d01b4eb02560ba67b61b1b2c0496e9f8281c154d.tar.xz
bootstrap-d01b4eb02560ba67b61b1b2c0496e9f8281c154d.zip
Remove custom example plugin. (#25784)
Diffstat (limited to 'docs/4.0/components/input-group.md')
-rw-r--r--docs/4.0/components/input-group.md50
1 files changed, 30 insertions, 20 deletions
diff --git a/docs/4.0/components/input-group.md b/docs/4.0/components/input-group.md
index 8018ea42a..670e563ec 100644
--- a/docs/4.0/components/input-group.md
+++ b/docs/4.0/components/input-group.md
@@ -10,7 +10,7 @@ toc: true
Place one add-on or button on either side of an input. You may also place one on both sides of an input. **We do not support multiple form-controls in a single input group** and `<label>`s must come outside the input group.
-{% example html %}
+{% capture example %}
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
@@ -49,7 +49,8 @@ Place one add-on or button on either side of an input. You may also place one on
</div>
<textarea class="form-control" aria-label="With textarea"></textarea>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Sizing
@@ -57,7 +58,7 @@ Add the relative form sizing classes to the `.input-group` itself and contents w
**Sizing on the individual input group elements isn't supported.**
-{% example html %}
+{% capture example %}
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
@@ -78,13 +79,14 @@ Add the relative form sizing classes to the `.input-group` itself and contents w
</div>
<input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Checkboxes and radios
Place any checkbox or radio option within an input group's addon instead of text.
-{% example html %}
+{% capture example %}
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
@@ -102,13 +104,14 @@ Place any checkbox or radio option within an input group's addon instead of text
</div>
<input type="text" class="form-control" aria-label="Text input with radio button">
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Multiple inputs
While multiple `<input>`s are supported visually, validation styles are only available for input groups with a single `<input>`.
-{% example html %}
+{% capture example %}
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="">First and last name</span>
@@ -116,13 +119,14 @@ While multiple `<input>`s are supported visually, validation styles are only ava
<input type="text" class="form-control">
<input type="text" class="form-control">
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Multiple addons
Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
-{% example html %}
+{% capture example %}
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
@@ -138,11 +142,12 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
<span class="input-group-text">0.00</span>
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Button addons
-{% example html %}
+{% capture example %}
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">Button</button>
@@ -172,11 +177,12 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Buttons with dropdowns
-{% example html %}
+{% capture example %}
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
@@ -204,11 +210,12 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
</div>
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Segmented buttons
-{% example html %}
+{% capture example %}
<div class="input-group mb-3">
<div class="input-group-prepend">
<button type="button" class="btn btn-outline-secondary">Action</button>
@@ -242,7 +249,8 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
</div>
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Custom forms
@@ -250,7 +258,7 @@ Input groups include support for custom selects and custom file inputs. Browser
### Custom select
-{% example html %}
+{% capture example %}
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
@@ -298,11 +306,12 @@ Input groups include support for custom selects and custom file inputs. Browser
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### Custom file input
-{% example html %}
+{% capture example %}
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Upload</span>
@@ -342,7 +351,8 @@ Input groups include support for custom selects and custom file inputs. Browser
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Accessibility