1

inserir a descrição da imagem aqui

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <link rel="stylesheet" href="css/bootstrap.css">

    <link rel="stylesheet" type="text/css" href="estilo.css">


    <title> Cadastro Cliente </title>

  </head>

  <body>

        <div class="form-group">
             <img src="Iuri.png" width="500px" alt="Fuzzy Cardigan"
             class="img-thumbnail img-responsive"  >
        </div>

        <div class="container">

            <form action=""  method="POST" name="formulario" > 

                <div class="form-group">
                    <div class="   col-md-5">
                        <label > Usuário ou E-MAIL</label>
                        <input type="text" name="login" class="form-control " placeholder=" Usuário ou E-MAIL" required="" >    
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-md-5">
                        <label> SENHA </label>  
                        <input type="password" name="rg" class="form-control" placeholder="SENHA" required="" >
                    </div>
                </div>      


                    <input type="submit" value="Login" class="btn btn-primary" name="">

                <div class="form-check">
                    <label > <input class="form-check-input" type="checkbox" value="" > Lembre-me  </label> 
                </div>
            </form> 
        </div>
  </body>
</html>
6
  • Não consegui entender sua dúvida, o form está centralizado e está responsivo no meu. Com print's seria melhor para entender o que gostaria de realizar. 7/03/2018 às 13:28
  • após aqui na minha tela, está no canto esquerdo, quando eu centralizo ele com margin-left ele não fica responsivo; 7/03/2018 às 13:33
  • Se possível, coloque imagens para ilustrar sua pergunta, por gentileza. 7/03/2018 às 13:34
  • Pronto, coloquei a imagem. 7/03/2018 às 13:37
  • coloque o form da image dentro da div container
    – HudsonPH
    7/03/2018 às 13:38

2 Respostas 2

1

O jeito mais certo para fazer isso é usando a classe nativa do Bootstrap offset-md-"

No seu caso sugiro passar o form-group de col-md-5 para col-md-6, pois sendo múltiplo de 12 vc consegue um alinhamento perfeito na tela.

Logo o seu grid ficaria dessa forma: <div class="col-md-6 offset-md-3"> (isso significa que tem um espaço a esquerda e a direita no tamanho de 3 colunas, e o forma com 6 colunas fica centralizado no meio da tela.)

Para centralizar a imagem use as propriedades Flex nativas do Bootstrap: d-flex justify-content-center

Documentação oficial do Grid BS4: https://v4-alpha.getbootstrap.com/layout/grid/#offsetting-columns

Documentação oficial do Flex BS4: https://v4-alpha.getbootstrap.com/utilities/flexbox/

Veja o resultado no exemplo abaixo:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="form-group d-flex justify-content-center">
    <img src="http://placeskull.com/100/100" width="100px" alt="Fuzzy Cardigan"
class="img-thumbnail img-responsive"  >
</div>

<div class="container ">

    <form action=""  method="POST" name="formulario" > 

        <div class="form-group">
            <div class="   col-md-6 offset-md-3">
                <label > Usuário ou E-MAIL</label>
                <input type="text" name="login" class="form-control " placeholder=" Usuário ou E-MAIL" required="" >    
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-6 offset-md-3">
                <label> SENHA </label>  
                <input type="password" name="rg" class="form-control" placeholder="SENHA" required="" >
            </div>
        </div>      

        <div class="form-group">
            <div class="col-md-6 offset-md-3">
                <input type="submit" value="Login" class="btn btn-primary" name="">
                <div class="form-check">
                    <label > <input class="form-check-input" type="checkbox" value="" > Lembre-me  </label> 
                </div>
            </div>
        </div>
    </form> 
</div>

OBS: Também coloquei os botões dentro do form-group para poder alinha-los junto com o resto das coisas.

2
  • Muito obrigado irmão, me ajudou muito com sua experiencia, estava quebrando a cabeça com isso a dias, mas agora com suas dicas já tenho uma noção melhor. 7/03/2018 às 13:55
  • Iramar se a minha resposta te ajudou de alguma forma considere marca-la como aceita nesse ai ao lado esquerdo perto das setinhas. Basta clicar nele :)
    – hugocsl
    7/03/2018 às 14:01
0

O form da imagem esta fora do container por isso vc tem nao o alinhamento junto com o seu form

coloque essa parte dentro da div container

    <div class="form-group">
         <img src="Iuri.png" width="500px" alt="Fuzzy Cardigan"
         class="img-thumbnail img-responsive"  >
    </div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .