diff --git a/docs/components/forms.md b/docs/components/forms.md index 88740acfc7fa0a36a67bc4aa460c5a3967eddf26..4606fd08df624afa8fc6d19699669f3c87483d5b 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -392,6 +392,55 @@ Be sure to add `.col-form-label` to your `<label>`s as well so they're verticall </div> {% endexample %} +More complex layouts can also be created with the grid system. + +{% example html %} +<div class="container"> + <form> + <div class="row"> + <div class="form-group col-md-6"> + <label for="inputEmail4" class="col-form-label">Email</label> + <input type="email" class="form-control" id="inputEmail4" placeholder="Email"> + </div> + <div class="form-group col-md-6"> + <label for="inputPassword4" class="col-form-label">Password</label> + <input type="password" class="form-control" id="inputPassword4" placeholder="Password"> + </div> + </div> + <div class="form-group"> + <label for="inputAddress" class="col-form-label">Address</label> + <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"> + </div> + <div class="form-group"> + <label for="inputAddress2" class="col-form-label">Address 2</label> + <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor"> + </div> + <div class="row"> + <div class="form-group col-md-6"> + <label for="inputCity" class="col-form-label">City</label> + <input type="text" class="form-control" id="inputCity"> + </div> + <div class="form-group col-md-4"> + <label for="inputState" class="col-form-label">State</label> + <select id="inputState" class="form-control">Choose</select> + </div> + <div class="form-group col-md-2"> + <label for="inputZip" class="col-form-label">Zip</label> + <input type="text" class="form-control" id="inputZip"> + </div> + </div> + <div class="form-group"> + <div class="form-check"> + <label class="form-check-label"> + <input class="form-check-input" type="checkbox"> Check me out + </label> + </div> + </div> + <button type="submit" class="btn btn-primary">Sign in</button> + </form> +</div> +{% endexample %} + Grid-based form layouts also support large and small inputs. {% example html %} @@ -413,7 +462,6 @@ Grid-based form layouts also support large and small inputs. </div> {% endexample %} - ## Checkboxes and radios Default checkboxes and radios are improved upon with the help of `.form-check`, **a single class for both input types that improves the layout and behavior of their HTML elements**. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.