Brightree Style Guides

Basic Forms

Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.

<form> <div class="form-group"> <label for="exampleInputEmail1">Email address (required)</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" required="" /> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label for="exampleInputEmail1">Your lucky number (required)</label> <input type="number" class="form-control" id="exampleInputNumber1" aria-describedby="numberlHelp" placeholder="Enter number" required="" /> </div> <div class="form-group"> <label for="exampleInputPassword1">Password (required)</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" required="" /> </div> <div class="form-check mb-3"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" /> Save information </label> </div> <button type="submit" class="btn btn-primary mb-3">Submit</button> </form>

Horizontal form

Create horizontal forms with the grid by adding the .row class to form groups and using the .col-*-* classes to specify the width of your labels and controls.

<form autocomplete="off" action="#"> <div class="form-group row"> <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email" autocomplete="off" /> </div> </div> <div class="form-group row"> <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password" autocomplete="off" /> </div> </div> <fieldset class="form-group"> <div class="row"> <label class="col-sm-2 col-form-label">Radios</label> <div class="col-sm-10"> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked="" /> Option one is this and that—be sure to include why it's great </label> </div> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2" /> Option two can be something else and selecting it will deselect option one </label> </div> <div class="form-check disabled"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled="" /> Option three is disabled </label> </div> </div> </div> </fieldset> <div class="form-group row"> <div class="col-sm-2">Checkbox</div> <div class="col-sm-10"> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" /> Check me out </label> </div> </div> </div> <div class="form-group row"> <div class="col-sm-10"> <button type="submit" class="btn btn-primary">Sign in</button> </div> </div> </form>