Skip to content

form y space in doc #24577

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mdo merged 1 commit into from
Oct 29, 2017
Merged

form y space in doc #24577

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 17 additions & 17 deletions docs/4.0/components/forms.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,15 +138,15 @@ If you want to have `<input readonly>` elements in your form styled as plain tex

{% example html %}
<form class="form-inline">
<div class="form-group">
<div class="form-group mb-2">
<label for="staticEmail2" class="sr-only">Email</label>
<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
</div>
<div class="form-group mx-sm-3">
<div class="form-group mx-sm-3 mb-2">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Confirm identity</button>
<button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>
{% endexample %}

Expand Down Expand Up @@ -477,24 +477,24 @@ The example below uses a flexbox utility to vertically center the contents and c
<div class="form-row align-items-center">
<div class="col-auto">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control mb-2 mb-sm-0" id="inlineFormInput" placeholder="Jane Doe">
<input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
</div>
<div class="col-auto">
<label class="sr-only" for="inlineFormInputGroup">Username</label>
<div class="input-group mb-2 mb-sm-0">
<div class="input-group mb-2">
<div class="input-group-addon">@</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
</div>
</div>
<div class="col-auto">
<div class="form-check mb-2 mb-sm-0">
<div class="form-check mb-2">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</div>
</div>
</form>
Expand Down Expand Up @@ -537,22 +537,22 @@ And of course [custom form controls](#custom-forms) are supported.
<div class="form-row align-items-center">
<div class="col-auto">
<label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label>
<select class="custom-select mb-2 mr-sm-2 mb-sm-0" id="inlineFormCustomSelect">
<select class="custom-select mb-2 mr-sm-2" id="inlineFormCustomSelect">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-auto">
<label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
<label class="custom-control custom-checkbox mb-2 mr-sm-2">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Remember my preference</span>
</label>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</div>
</div>
</form>
Expand All @@ -571,21 +571,21 @@ You may need to manually address the width and alignment of individual form cont
{% example html %}
<form class="form-inline">
<label class="sr-only" for="inlineFormInputName2">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInputName2" placeholder="Jane Doe">
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-addon">@</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
</div>

<div class="form-check mb-2 mr-sm-2 mb-sm-0">
<div class="form-check mb-2 mr-sm-2">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>

<button type="submit" class="btn btn-primary">Submit</button>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
{% endexample %}

Expand All @@ -594,20 +594,20 @@ Custom form controls and selects are also supported.
{% example html %}
<form class="form-inline">
<label class="mr-sm-2" for="inlineFormCustomSelectPref">Preference</label>
<select class="custom-select mb-2 mr-sm-2 mb-sm-0" id="inlineFormCustomSelectPref">
<select class="custom-select mb-2 mr-sm-2" id="inlineFormCustomSelectPref">
<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">
<label class="custom-control custom-checkbox mb-2 mr-sm-2">
<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>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
{% endexample %}

Expand Down