background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E");
}
+.form-inline {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-flow: row wrap;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+}
+
@media (min-width: 576px) {
.form-inline .form-group {
- display: inline-block;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 auto;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ -webkit-flex-flow: row wrap;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
margin-bottom: 0;
- vertical-align: middle;
}
.form-inline .form-control {
display: inline-block;
display: inline-block;
}
.form-inline .input-group {
- display: inline-table;
- width: auto;
- vertical-align: middle;
- }
- .form-inline .input-group .input-group-addon,
- .form-inline .input-group .input-group-btn,
- .form-inline .input-group .form-control {
width: auto;
}
- .form-inline .input-group > .form-control {
- width: 100%;
- }
.form-inline .form-control-label {
margin-bottom: 0;
vertical-align: middle;
### Inline forms
-Use the `.form-inline` class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms behave differently:
+Use the `.form-inline` class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states.
-- Controls are `display: inline-block` to provide alignment control via `vertical-align` and `margin`.
-- Controls receive `width: auto` to override the Bootstrap default `width: 100%`.
-- Controls **only appear inline in viewports that are at least 768px wide** to account for narrow viewports on mobile devices.
+- Controls are `display: inline-block` (or `flex` when enabled) to provide alignment control via `vertical-align` and `margin`. Those also means you'll have some HTML character spaces between elements by default.
+- Controls and input groups receive `width: auto` to override the Bootstrap default `width: 100%`.
+- Controls **only appear inline in viewports that are at least 576px wide** to account for narrow viewports on mobile devices.
-Because of this, you may need to manually address the width and alignment of individual form controls. Lastly, as shown below, you should always include a `<label>` with each form control.
-
-#### Visible labels
+You may need to manually address the width and alignment of individual form controls with [spacing utilities]({{ site.baseurl }}/utilities/spacing/) (as shown below). Lastly, be sure to always include a `<label>` with each form control, even if you need to hide it from non-screenreader visitors with `.sr-only`.
{% example html %}
<form class="form-inline">
- <div class="form-group">
- <label for="exampleInputName2">Name</label>
- <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
- </div>
- <div class="form-group">
- <label for="exampleInputEmail2">Email</label>
- <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
- </div>
- <button type="submit" class="btn btn-primary">Send invitation</button>
-</form>
-{% endexample %}
+ <label class="sr-only" for="inlineFormInput">Name</label>
+ <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="Jane Doe">
-#### Hidden labels
-
-{% example html %}
-<form class="form-inline">
- <div class="form-group">
- <label class="sr-only" for="exampleInputEmail3">Email address</label>
- <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
- </div>
- <div class="form-group">
- <label class="sr-only" for="exampleInputPassword3">Password</label>
- <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
+ <label class="sr-only" for="inlineFormInputGroup">Username</label>
+ <div class="input-group mb-2 mr-sm-2 mb-sm-0">
+ <div class="input-group-addon">@</div>
+ <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
</div>
- <div class="form-check">
+
+ <div class="form-check mb-2 mr-sm-2 mb-sm-0">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
- <button type="submit" class="btn btn-primary">Sign in</button>
+
+ <button type="submit" class="btn btn-primary">Submit</button>
</form>
{% endexample %}
+Custom form controls and selects are also supported.
+
{% example html %}
<form class="form-inline">
- <div class="form-group">
- <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
- <div class="input-group">
- <div class="input-group-addon">$</div>
- <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
- <div class="input-group-addon">.00</div>
- </div>
- </div>
- <button type="submit" class="btn btn-primary">Transfer cash</button>
+ <label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label>
+ <select class="custom-select mb-2 mr-sm-2 mb-sm-0" id="inlineFormCustomSelect">
+ <option selected>Choose...</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+ </select>
+
+ <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
+ <input type="checkbox" class="custom-control-input">
+ <span class="custom-control-indicator"></span>
+ <span class="custom-control-description">Remember my preference</span>
+ </label>
+
+ <button type="submit" class="btn btn-primary">Submit</button>
</form>
{% endexample %}
// default HTML form controls and our custom form controls (e.g., input groups).
.form-inline {
+ @if $enable-flex {
+ display: flex;
+ flex-flow: row wrap;
+
+ // Because we use flex, the initial sizing of checkboxes is collapsed and
+ // doesn't occupy the full-width (which is what we want for xs grid tier),
+ // so we force that here.
+ .form-check {
+ width: 100%;
+ }
+ }
// Kick in the inline
@include media-breakpoint-up(sm) {
+ label {
+ @if $enable-flex {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ margin-bottom: 0;
+ }
+
// Inline-block all the things for "inline"
.form-group {
- display: inline-block;
+ @if $enable-flex {
+ display: flex;
+ flex: 0 0 auto;
+ flex-flow: row wrap;
+ } @else {
+ display: inline-block;
+ vertical-align: middle;
+ }
margin-bottom: 0;
- vertical-align: middle;
}
// Allow folks to *not* use `.form-group`
}
.input-group {
- display: inline-table;
width: auto;
- vertical-align: middle;
- .input-group-addon,
- .input-group-btn,
- .form-control {
- width: auto;
+ @if not $enable-flex {
+ display: inline-table;
+ vertical-align: middle;
+
+ .input-group-addon,
+ .input-group-btn,
+ .form-control {
+ width: auto;
+ }
}
}
// Input groups need that 100% width though
.input-group > .form-control {
- width: 100%;
+ @if not $enable-flex {
+ width: 100%;
+ }
}
.form-control-label {
// Remove default margin on radios/checkboxes that were used for stacking, and
// then undo the floating of radios and checkboxes to match.
.form-check {
- display: inline-block;
+ @if $enable-flex {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ } @else {
+ display: inline-block;
+ vertical-align: middle;
+ }
+ width: auto;
margin-top: 0;
margin-bottom: 0;
- vertical-align: middle;
}
.form-check-label {
padding-left: 0;
margin-left: 0;
}
+ // Custom form controls
+ .custom-control {
+ padding-left: 0;
+
+ @if $enable-flex {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ } @else {
+ vertical-align: middle;
+ }
+ }
+ .custom-control-indicator {
+ position: static;
+ display: inline-block;
+ @if $enable-flex {
+ margin-right: .25rem; // Flexbox alignment means we lose our HTML space here, so we compensate.
+ }
+ vertical-align: text-bottom;
+ }
+
// Re-override the feedback icon.
.has-feedback .form-control-feedback {
top: 0;
projects / thirdparty / bootstrap.git / commitdiff
