Boomerang

Inputs

  1. Home
  2. Elements
  3. Inputs
Form Inputs
<form>
   <div class="form-group">
       <input class="form-control" type="email" placeholder="Email">
   </div>
   <div class="form-group">
       <textarea class="form-control" rows="5" placeholder="Example textarea"></textarea>
   </div>
   <div class="form-group">
       <select class="form-control">
           <option selected="selected">Select</option>
           <option>1</option>
           <option>2</option>
           <option>3</option>
           <option>4</option>
           <option>5</option>
       </select>
   </div>
   <div class="form-group">
       <select class="form-control" multiple="">
           <option>1</option>
           <option>2</option>
           <option>3</option>
           <option>4</option>
           <option>5</option>
       </select>
   </div>
</form>
form
   .form-group
       input.form-control(type="email" placeholder="Email")
   .form-group
       textarea.form-control(rows="5" placeholder="Example textarea")
   .form-group
       select.form-control
           option(selected="selected") Select
           option 1
           option 2
           option 3
           option 4
           option 5
   .form-group
       select.form-control(multiple="")
           option 1
           option 2
           option 3
           option 4
           option 5
Form Sizes
<div class="form-group">
   <input class="form-control form-control-lg" type="text" placeholder="Large input">
</div>

<div class="form-group">
   <input class="form-control" type="text" placeholder="Default input">
</div>

<div class="form-group">
   <input class="form-control form-control-sm" type="text" placeholder="Small input">
</div>

<div class="form-group">
   <select class="form-control form-control-lg">
       <option>Large select</option>
   </select>
</div>

<div class="form-group">
   <select class="form-control">
       <option>Default select</option>
   </select>
</div>

<div class="form-group">
   <select class="form-control form-control-sm">
       <option>Small select</option>
   </select>
</div>
.form-group
   input.form-control.form-control-lg(type="text" placeholder="Large input")
.form-group
   input.form-control(type="text" placeholder="Default input")
.form-group
   input.form-control.form-control-sm(type="text" placeholder="Small input")
.form-group
   select.form-control.form-control-lg
       option Large select
.form-group
   select.form-control
       option Default select
.form-group
   select.form-control.form-control-sm
       option Small select
Form Grid
<form>
   <div class="row">
       <div class="col">
           <div class="form-group">
               <input class="form-control" type="text" placeholder="First name">
           </div>
       </div>
       <div class="col">
           <div class="form-group">
               <input class="form-control" type="text" placeholder="Last name">
           </div>
       </div>
   </div>
</form>

<form>
   <div class="row">
       <div class="col-md-4">
           <div class="form-group">
               <input class="form-control" type="text" placeholder="First name">
           </div>
       </div>
       <div class="col-md-4">
           <div class="form-group">
               <input class="form-control" type="text" placeholder="Last name">
           </div>
       </div>
       <div class="col-md-4">
           <div class="form-group">
               <input class="form-control" type="text" placeholder="Subject">
           </div>
       </div>
   </div>
</form>
form
   .row
       .col
           .form-group
               input.form-control(type="text" placeholder="First name")
       .col
           .form-group
               input.form-control(type="text" placeholder="Last name")
form
   .row
       .col-md-4
           .form-group
               input.form-control(type="text" placeholder="First name")
       .col-md-4
           .form-group
               input.form-control(type="text" placeholder="Last name")
       .col-md-4
           .form-group
               input.form-control(type="text" placeholder="Subject")