Forms

Input

Text area

File input

Select Único

Select Multiplo

Checkbox

Radio button

Switch

Range

                         
                      <div class="form-group">
                      <label for="exampleInputEmail1">Endereço de e-mail</label>
                      <input type="email" class="form-control" placeholder="[email protected]" id="exampleInputEmail1" aria-describedby="emailHelp">
                      <small id="emailHelp" class="form-text text-muted">Nós não enviaremos spam.</small>
                      </div>

<div class="form-group">
                      <label for="exampleFormControlTextarea1">Exemplo textarea</label>
                      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                      </div>


                      <div class="form-group">              
                      <label for="exampleFormControlFile1" class="custom-file-upload btn btn-outline-primary">
                      Selecione seu arquivo     <i class="fa fa-cloud-upload pl-2"></i></label>
                      <input type="file" class="form-control-file" id="exampleFormControlFile1">
                      </div>
                      <div class="form-group"><div class="custom-file">
                      <input type="file" class="custom-file-input" id="customFile">
                      <label class="custom-file-label" for="customFile">Escolher arquivo</label>
                      </div>
                      </div>


                      <div class="form-group"> 
                      <label for="exampleFormControlSelect1">Selecione apenas um número</label>
                      <select class="custom-select" id="exampleFormControlSelect1">
                      <option selected>Selecione</option>
                      <option selected>Zero</option>
                      <option value="1">Um</option>
                      <option value="2">Dois</option>
                      <option value="3">Três</option>
                      </select>
                      </div>


                      <div class="form-group"> 
                      <label for="exampleFormControlSelect2">Selecione vários numeros com CTRL</label>
                      <select class="custom-select" id="exampleFormControlSelect2" size="3" multiple>
                      <option selected>Zero</option>
                      <option value="1">Um</option>
                      <option value="2">Dois</option>
                      <option value="3">Três</option>
                      </select>
                      </div>


                     <div class="form-group">
                     <div class="form-check"> 
                     <div class="custom-control custom-checkbox">
                     <input type="checkbox" class="custom-control-input" id="customCheck1">
                     <label class="custom-control-label" for="customCheck1">Primeira opção</label>
                     </div>
                     <div class="custom-control custom-checkbox">
                     <input type="checkbox" class="custom-control-input" id="customCheck2">
                     <label class="custom-control-label" for="customCheck2">Segunda opção</label>
                     </div>
                     <div class="custom-control custom-checkbox">
                     <input type="checkbox" class="custom-control-input" id="customCheck3" disabled="">
                     <label class="custom-control-label" for="customCheck3">Opção desativada</label>
                     </div>
                     </div>
                     </div>


                     <div class="form-group"> 
                     <div class="form-check">
                     <div class="custom-control custom-radio">
                     <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
                     <label class="custom-control-label" for="customRadio1">Primeira opção</label>
                     </div>
                     <div class="custom-control custom-radio">
                     <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
                     <label class="custom-control-label" for="customRadio2">Segunda opção</label>
                     </div>
                     <div class="custom-control custom-radio">
                     <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input" disabled>
                     <label class="custom-control-label" for="customRadio2">Opção desativada</label>
                     </div>
                     </div>
                     </div>


                     <div class="form-group">
                     <div class="form-check">
                     <div class="custom-control custom-switch">
                     <input type="checkbox" class="custom-control-input" id="customSwitch1">
                     <label class="custom-control-label" for="customSwitch1">Clique para ativar</label>
                     </div>
                     <div class="custom-control custom-switch">
                     <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
                     <label class="custom-control-label" for="customSwitch2">Switch desativado</label>
                     </div>
                     </div>
                     </div>


                     <div class="form-group">
                     <label for="customRange2">Example range</label>
                     <input type="range" class="custom-range" min="0" max="5" id="customRange2">
                     </div>