Alinhamento com bootstrap


(cleo thomas) #1

Estou tentando centralizar as caixas de input nesse trecho de código, mas [text-center] não está funcionando e não consigo centraliza-las com [col-sm-offset-X] porque a referencia deveria ser 4.5 e esse valor não pode ser usado. (Linha 2)

Alguma ideia de porque o text-center não está funcionando? Sugestão de como centralizar?

            <div class="row">
                <div class= "col-sm-12 text-center">
                <div class="pularlinha">
                <form> 

                                        <!-- **** CAMPO NOME COMPLETO **** -->
                                <div class="row">   
                                     <div class="col-sm-3">
                                                  <div class="form-group">
                                                   <!-- <label class="sr-only" for="exampleInputAmount">Valor (en dolar)</label> -->
                                                    <div class="input-group">
                                                          <div class="input-group-addon">
                                                              <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                                                          </div>
                                                        <input type="nomeCompleto" class="form-control" placeholder="Nome Completo">
                                                    </div>
                                                  </div>
                                    </div>
                                    </div>

                                        <!-- **** CAMPO E-MAIL **** -->
                                <div class="row">
                                     <div class="col-sm-3">
                                                  <div class="form-group">
                                                   <!-- <label class="sr-only" for="exampleInputAmount">Valor (en dolar)</label> -->
                                                    <div class="input-group">
                                                          <div class="input-group-addon">
                                                              <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
                                                          </div>
                                                        <input type="email" class="form-control" placeholder="E-mail">
                                                    </div>
                                                  </div>
                                      </div>
                                </div>

                                        <!-- *** CAMPO SENHA *** -->
                                <div class="row">
                                    <div class="col-sm-3">
                                                  <div class="form-group">
                                                   <!-- <label class="sr-only" for="exampleInputAmount">Valor (en dolar)</label> -->
                                                    <div class="input-group">
                                                          <div class="input-group-addon">
                                                              <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
                                                          </div>
                                                        <input type="senha" class="form-control" placeholder="Senha">
                                                    </div>
                                                  </div>

                                    </div>
                                </div>

                                        <!-- *** BOTAO CADASTRE-SE *** -->
                    <div class="row">
                         <div class="col-sm-3">
                                <button type="submit" class="btn btn-success btn-block">Cadastre-se</button>
                        </div>
                    </div>
                
                    <div class="pularlinha">

                        <div class="row">
                             <div class="col-sm-3">
                                <hr />
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-sm-3">
                                <h4>Já tem uma conta? <button type="button" class="btn btn-link">Fazer Login</button></h4>
                            </div>
                        </div>
                        
                    </div>    
        </form>
    </div>
    </div>
    </div>

(Luã Ciceri Schwertner) #2

Não tem a necessidade de ficar repetindo o <div class="row"> e <div class="col-sm-3"> toda vez, pode setar uma vez em cima só. Acho que assim resolve, dá uma testada…

<div class="row">
  <div class="col-sm-3 col-xs-offset-6">
    <div class="pularlinha">
      <form> 
        <!-- **** CAMPO NOME COMPLETO **** -->
        <div class="form-group">
          <!-- <label class="sr-only" for="exampleInputAmount">Valor (en dolar)</label> -->
          <div class="input-group">
            <div class="input-group-addon">
              <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
            </div>
            <input type="nomeCompleto" class="form-control" placeholder="Nome Completo">
          </div>
        </div>
        <!-- **** CAMPO E-MAIL **** -->
        <div class="form-group">
          <!-- <label class="sr-only" for="exampleInputAmount">Valor (en dolar)</label> -->
          <div class="input-group">
            <div class="input-group-addon">
              <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
            </div>
            <input type="email" class="form-control" placeholder="E-mail">
          </div>
        </div>
        <!-- *** CAMPO SENHA *** -->
        <div class="form-group">
          <!-- <label class="sr-only" for="exampleInputAmount">Valor (en dolar)</label> -->
          <div class="input-group">
            <div class="input-group-addon">
              <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
            </div>
            <input type="senha" class="form-control" placeholder="Senha">
          </div>
        </div>
        <!-- *** BOTAO CADASTRE-SE *** -->
        <button type="submit" class="btn btn-success btn-block">Cadastre-se</button>
        <hr />
        <h4>Já tem uma conta? <button type="button" class="btn btn-link">Fazer Login</button></h4>
      </form>
    </div>
  </div>
</div>