mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-01 13:24:25 +01:00
Simplify input groups by dropping .input-group-prepend and .input-group-append
This commit is contained in:
Martijn Cuppens
parent
9eccb3a230
commit
85b12549ec
@ -1,5 +1,3 @@
|
||||
// stylelint-disable selector-no-qualifying-type
|
||||
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
@ -18,13 +16,6 @@
|
||||
flex: 1 1 auto;
|
||||
width: 1%;
|
||||
min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
|
||||
margin-bottom: 0;
|
||||
|
||||
+ .form-control,
|
||||
+ .form-select,
|
||||
+ .form-file {
|
||||
margin-left: -$input-border-width;
|
||||
}
|
||||
}
|
||||
|
||||
// Bring the "active" form control to the top of surrounding elements
|
||||
@ -35,37 +26,19 @@
|
||||
}
|
||||
|
||||
// Bring the custom file input above the label
|
||||
> .form-file .form-file-input:focus {
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
> .form-control,
|
||||
> .form-select {
|
||||
&:not(:last-child) { @include border-right-radius(0); }
|
||||
&:not(:first-child) { @include border-left-radius(0); }
|
||||
}
|
||||
|
||||
// Custom file inputs have more complex markup, thus requiring different
|
||||
// border-radius overrides.
|
||||
> .form-file {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> .form-file-input:focus {
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
&:not(:last-child) .form-file-label { @include border-right-radius(0); }
|
||||
&:not(:first-child) .form-file-label { @include border-left-radius(0); }
|
||||
&:not(:last-child) > .form-file-label {
|
||||
@include border-right-radius(0);
|
||||
}
|
||||
|
||||
&:not(:first-child) > .form-file-label {
|
||||
@include border-left-radius(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Prepend and append
|
||||
//
|
||||
// While it requires one extra layer of HTML for each, dedicated prepend and
|
||||
// append elements allow us to 1) be less clever, 2) simplify our selectors, and
|
||||
// 3) support HTML5 form validation.
|
||||
|
||||
.input-group-prepend,
|
||||
.input-group-append {
|
||||
display: flex;
|
||||
|
||||
// Ensure buttons are always above inputs for more visually pleasing borders.
|
||||
// This isn't needed for `.input-group-text` since it shares the same border-color
|
||||
@ -78,18 +51,8 @@
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.btn + .btn,
|
||||
.btn + .input-group-text,
|
||||
.input-group-text + .input-group-text,
|
||||
.input-group-text + .btn {
|
||||
margin-left: -$input-border-width;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-prepend { margin-right: -$input-border-width; }
|
||||
.input-group-append { margin-left: -$input-border-width; }
|
||||
|
||||
|
||||
// Textual addons
|
||||
//
|
||||
@ -128,10 +91,8 @@
|
||||
|
||||
.input-group-lg > .form-control,
|
||||
.input-group-lg > .form-select,
|
||||
.input-group-lg > .input-group-prepend > .input-group-text,
|
||||
.input-group-lg > .input-group-append > .input-group-text,
|
||||
.input-group-lg > .input-group-prepend > .btn,
|
||||
.input-group-lg > .input-group-append > .btn {
|
||||
.input-group-lg > .input-group-text,
|
||||
.input-group-lg > .btn {
|
||||
padding: $input-padding-y-lg $input-padding-x-lg;
|
||||
@include font-size($input-font-size-lg);
|
||||
@include border-radius($input-border-radius-lg);
|
||||
@ -147,10 +108,8 @@
|
||||
|
||||
.input-group-sm > .form-control,
|
||||
.input-group-sm > .form-select,
|
||||
.input-group-sm > .input-group-prepend > .input-group-text,
|
||||
.input-group-sm > .input-group-append > .input-group-text,
|
||||
.input-group-sm > .input-group-prepend > .btn,
|
||||
.input-group-sm > .input-group-append > .btn {
|
||||
.input-group-sm > .input-group-text,
|
||||
.input-group-sm > .btn {
|
||||
padding: $input-padding-y-sm $input-padding-x-sm;
|
||||
@include font-size($input-font-size-sm);
|
||||
@include border-radius($input-border-radius-sm);
|
||||
@ -162,27 +121,21 @@
|
||||
}
|
||||
|
||||
|
||||
// Prepend and append rounded corners
|
||||
// Rounded corners
|
||||
//
|
||||
// These rulesets must come after the sizing ones to properly override sm and lg
|
||||
// border-radius values when extending. They're more specific than we'd like
|
||||
// with the `.input-group >` part, but without it, we cannot override the sizing.
|
||||
|
||||
// stylelint-disable-next-line no-duplicate-selectors
|
||||
.input-group {
|
||||
> :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
|
||||
> .dropdown-toggle:nth-last-child(n + 3) {
|
||||
@include border-right-radius(0);
|
||||
}
|
||||
|
||||
.input-group > .input-group-prepend > .btn,
|
||||
.input-group > .input-group-prepend > .input-group-text,
|
||||
.input-group > .input-group-append:not(:last-child) > .btn,
|
||||
.input-group > .input-group-append:not(:last-child) > .input-group-text,
|
||||
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
|
||||
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
|
||||
@include border-right-radius(0);
|
||||
}
|
||||
|
||||
.input-group > .input-group-append > .btn,
|
||||
.input-group > .input-group-append > .input-group-text,
|
||||
.input-group > .input-group-prepend:not(:first-child) > .btn,
|
||||
.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
|
||||
.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
|
||||
.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
|
||||
@include border-left-radius(0);
|
||||
> :not(:first-child):not(.dropdown-menu) {
|
||||
margin-left: -$input-border-width;
|
||||
@include border-left-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
@ -60,9 +60,7 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th
|
||||
<button type="button" class="btn btn-secondary">4</button>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text" id="btnGroupAddon">@</div>
|
||||
</div>
|
||||
<div class="input-group-text" id="btnGroupAddon">@</div>
|
||||
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
|
||||
</div>
|
||||
</div>
|
||||
@ -75,9 +73,7 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th
|
||||
<button type="button" class="btn btn-secondary">4</button>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text" id="btnGroupAddon2">@</div>
|
||||
</div>
|
||||
<div class="input-group-text" id="btnGroupAddon2">@</div>
|
||||
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -249,9 +249,7 @@ Input groups work, too. If your navbar is an entire form, or mostly form, you ca
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<form class="container-fluid">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="basic-addon1">@</span>
|
||||
</div>
|
||||
<span class="input-group-text" id="basic-addon1">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -59,9 +59,7 @@ body_class: "bg-light"
|
||||
<form class="card p-2">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Promo code">
|
||||
<div class="input-group-append">
|
||||
<button type="submit" class="btn btn-secondary">Redeem</button>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-secondary">Redeem</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@ -88,11 +86,9 @@ body_class: "bg-light"
|
||||
<div class="col-12">
|
||||
<label for="username">Username</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">@</span>
|
||||
</div>
|
||||
<span class="input-group-text">@</span>
|
||||
<input type="text" class="form-control" id="username" placeholder="Username" required>
|
||||
<div class="invalid-feedback w-100">
|
||||
<div class="invalid-feedback">
|
||||
Your username is required.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -12,41 +12,29 @@ Place one add-on or button on either side of an input. You may also place one on
|
||||
|
||||
{{< example >}}
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="basic-addon1">@</span>
|
||||
</div>
|
||||
<span class="input-group-text" id="basic-addon1">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text" id="basic-addon2">@example.com</span>
|
||||
</div>
|
||||
<span class="input-group-text" id="basic-addon2">@example.com</span>
|
||||
</div>
|
||||
|
||||
<label for="basic-url">Your vanity URL</label>
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
|
||||
</div>
|
||||
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
|
||||
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">$</span>
|
||||
</div>
|
||||
<span class="input-group-text">$</span>
|
||||
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">.00</span>
|
||||
</div>
|
||||
<span class="input-group-text">.00</span>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">With textarea</span>
|
||||
</div>
|
||||
<span class="input-group-text">With textarea</span>
|
||||
<textarea class="form-control" aria-label="With textarea"></textarea>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
@ -57,9 +45,7 @@ Input groups wrap by default via `flex-wrap: wrap` in order to accommodate custo
|
||||
|
||||
{{< example >}}
|
||||
<div class="input-group flex-nowrap">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="addon-wrapping">@</span>
|
||||
</div>
|
||||
<span class="input-group-text" id="addon-wrapping">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
|
||||
</div>
|
||||
{{< /example >}}
|
||||
@ -72,23 +58,17 @@ Add the relative form sizing classes to the `.input-group` itself and contents w
|
||||
|
||||
{{< 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>
|
||||
</div>
|
||||
<span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
|
||||
<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="inputGroup-sizing-default">Default</span>
|
||||
</div>
|
||||
<span class="input-group-text" id="inputGroup-sizing-default">Default</span>
|
||||
<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
|
||||
</div>
|
||||
|
||||
<div class="input-group input-group-lg">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
|
||||
</div>
|
||||
<span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
|
||||
<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
|
||||
</div>
|
||||
{{< /example >}}
|
||||
@ -99,19 +79,15 @@ Place any checkbox or radio option within an input group's addon instead of text
|
||||
|
||||
{{< example >}}
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
<input class="form-check-input" type="checkbox" value="" aria-label="Checkbox for following text input">
|
||||
</div>
|
||||
<div class="input-group-text">
|
||||
<input class="form-check-input" type="checkbox" value="" aria-label="Checkbox for following text input">
|
||||
</div>
|
||||
<input type="text" class="form-control" aria-label="Text input with checkbox">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
<input class="form-check-input" type="radio" value="" aria-label="Radio button for following text input">
|
||||
</div>
|
||||
<div class="input-group-text">
|
||||
<input class="form-check-input" type="radio" value="" aria-label="Radio button for following text input">
|
||||
</div>
|
||||
<input type="text" class="form-control" aria-label="Text input with radio button">
|
||||
</div>
|
||||
@ -123,9 +99,7 @@ While multiple `<input>`s are supported visually, validation styles are only ava
|
||||
|
||||
{{< example >}}
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">First and last name</span>
|
||||
</div>
|
||||
<span class="input-group-text">First and last name</span>
|
||||
<input type="text" aria-label="First name" class="form-control">
|
||||
<input type="text" aria-label="Last name" class="form-control">
|
||||
</div>
|
||||
@ -137,19 +111,15 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
|
||||
|
||||
{{< example >}}
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">$</span>
|
||||
<span class="input-group-text">0.00</span>
|
||||
</div>
|
||||
<span class="input-group-text">$</span>
|
||||
<span class="input-group-text">0.00</span>
|
||||
<input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">$</span>
|
||||
<span class="input-group-text">0.00</span>
|
||||
</div>
|
||||
<span class="input-group-text">$</span>
|
||||
<span class="input-group-text">0.00</span>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
@ -157,33 +127,25 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
|
||||
|
||||
{{< example >}}
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
|
||||
</div>
|
||||
<button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
|
||||
<input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
|
||||
</div>
|
||||
<button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend" id="button-addon3">
|
||||
<button class="btn btn-outline-secondary" type="button">Button</button>
|
||||
<button class="btn btn-outline-secondary" type="button">Button</button>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons" aria-describedby="button-addon3">
|
||||
<button class="btn btn-outline-secondary" type="button">Button</button>
|
||||
<button class="btn btn-outline-secondary" type="button">Button</button>
|
||||
<input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon4">
|
||||
<div class="input-group-append" id="button-addon4">
|
||||
<button class="btn btn-outline-secondary" type="button">Button</button>
|
||||
<button class="btn btn-outline-secondary" type="button">Button</button>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons">
|
||||
<button class="btn btn-outline-secondary" type="button">Button</button>
|
||||
<button class="btn btn-outline-secondary" type="button">Button</button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
@ -191,30 +153,46 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
|
||||
|
||||
{{< 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-expanded="false">Dropdown</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
<input type="text" class="form-control" aria-label="Text input with dropdown button">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<div class="input-group mb-3">
|
||||
<input type="text" class="form-control" aria-label="Text input with dropdown button">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action before</a>
|
||||
<a class="dropdown-item" href="#">Another action before</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
<input type="text" class="form-control" aria-label="Text input with 2 dropdown buttons">
|
||||
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
@ -223,36 +201,32 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
|
||||
|
||||
{{< example >}}
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<button type="button" class="btn btn-outline-secondary">Action</button>
|
||||
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline-secondary">Action</button>
|
||||
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
<input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
|
||||
<div class="input-group-append">
|
||||
<button type="button" class="btn btn-outline-secondary">Action</button>
|
||||
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline-secondary">Action</button>
|
||||
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
@ -265,9 +239,7 @@ Input groups include support for custom selects and custom file inputs. Browser
|
||||
|
||||
{{< example >}}
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<label class="input-group-text" for="inputGroupSelect01">Options</label>
|
||||
</div>
|
||||
<label class="input-group-text" for="inputGroupSelect01">Options</label>
|
||||
<select class="form-select" id="inputGroupSelect01">
|
||||
<option selected>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
@ -283,15 +255,11 @@ Input groups include support for custom selects and custom file inputs. Browser
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
<div class="input-group-append">
|
||||
<label class="input-group-text" for="inputGroupSelect02">Options</label>
|
||||
</div>
|
||||
<label class="input-group-text" for="inputGroupSelect02">Options</label>
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<button class="btn btn-outline-secondary" type="button">Button</button>
|
||||
</div>
|
||||
<button class="btn btn-outline-secondary" type="button">Button</button>
|
||||
<select class="form-select" id="inputGroupSelect03" aria-label="Example select with button addon">
|
||||
<option selected>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
@ -307,9 +275,7 @@ Input groups include support for custom selects and custom file inputs. Browser
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-outline-secondary" type="button">Button</button>
|
||||
</div>
|
||||
<button class="btn btn-outline-secondary" type="button">Button</button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
@ -317,9 +283,7 @@ Input groups include support for custom selects and custom file inputs. Browser
|
||||
|
||||
{{< example >}}
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
|
||||
</div>
|
||||
<span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
|
||||
<div class="form-file">
|
||||
<input type="file" class="form-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
|
||||
<label class="form-file-label" for="inputGroupFile01">
|
||||
@ -337,15 +301,11 @@ Input groups include support for custom selects and custom file inputs. Browser
|
||||
<span class="form-file-button">Browse</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text" id="inputGroupFileAddon02">Upload</span>
|
||||
</div>
|
||||
<span class="input-group-text" id="inputGroupFileAddon02">Upload</span>
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button>
|
||||
</div>
|
||||
<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button>
|
||||
<div class="form-file">
|
||||
<input type="file" class="form-file-input" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03">
|
||||
<label class="form-file-label" for="inputGroupFile03">
|
||||
@ -363,9 +323,7 @@ Input groups include support for custom selects and custom file inputs. Browser
|
||||
<span class="form-file-button">Browse</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
|
||||
</div>
|
||||
<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
|
||||
@ -232,9 +232,7 @@ The example below uses a flexbox utility to vertically center the contents and c
|
||||
<div class="col-auto">
|
||||
<label class="sr-only" for="autoSizingInputGroup">Username</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">@</div>
|
||||
</div>
|
||||
<div class="input-group-text">@</div>
|
||||
<input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
|
||||
</div>
|
||||
</div>
|
||||
@ -272,9 +270,7 @@ You can then remix that once again with size-specific column classes.
|
||||
<div class="col-sm-3">
|
||||
<label class="sr-only" for="specificSizeInputGroupUsername">Username</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">@</div>
|
||||
</div>
|
||||
<div class="input-group-text">@</div>
|
||||
<input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
|
||||
</div>
|
||||
</div>
|
||||
@ -317,9 +313,7 @@ Be sure to always include a `<label>` with each form control, even if you need t
|
||||
<div class="col-12">
|
||||
<label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">@</div>
|
||||
</div>
|
||||
<div class="input-group-text">@</div>
|
||||
<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -50,9 +50,7 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun
|
||||
<div class="col-md-4">
|
||||
<label for="validationCustomUsername">Username</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="inputGroupPrepend">@</span>
|
||||
</div>
|
||||
<span class="input-group-text" id="inputGroupPrepend">@</span>
|
||||
<input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
|
||||
<div class="invalid-feedback">
|
||||
Please choose a username.
|
||||
@ -142,9 +140,7 @@ While these feedback styles cannot be styled with CSS, you can still customize t
|
||||
<div class="col-md-4">
|
||||
<label for="validationDefaultUsername">Username</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="inputGroupPrepend2">@</span>
|
||||
</div>
|
||||
<span class="input-group-text" id="inputGroupPrepend2">@</span>
|
||||
<input type="text" class="form-control" id="validationDefaultUsername" aria-describedby="inputGroupPrepend2" required>
|
||||
</div>
|
||||
</div>
|
||||
@ -200,9 +196,7 @@ We recommend using client-side validation, but in case you require server-side v
|
||||
<div class="col-md-4">
|
||||
<label for="validationServerUsername">Username</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="inputGroupPrepend3">@</span>
|
||||
</div>
|
||||
<span class="input-group-text" id="inputGroupPrepend3">@</span>
|
||||
<input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required>
|
||||
<div class="invalid-feedback">
|
||||
Please choose a username.
|
||||
@ -329,9 +323,7 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
|
||||
<div class="col-md-4 position-relative">
|
||||
<label for="validationTooltipUsername">Username</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
|
||||
</div>
|
||||
<span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
|
||||
<input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
|
||||
<div class="invalid-tooltip">
|
||||
Please choose a unique and valid username.
|
||||
|
||||
@ -99,6 +99,7 @@ Changes to Reboot, typography, tables, and more.
|
||||
- Dropped `.form-inline` for the more flexible grid.
|
||||
- Dropped support for `.form-control-plaintext` inside `.input-group`s.
|
||||
- Dropped `.form-text` as existing utilities cover this use class's former use case (e.g., `.mt-2`, `.text-small`, and/or `.text-muted`).
|
||||
- Dropped `.input-group-append` and `.input-group-prepend`. You can now just add buttons and `.input-group-text` as direct children of the input groups.
|
||||
|
||||
## Components
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user