<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>
-
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.– Matheus Martins7/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;– Iramar Oliveira7/03/2018 às 13:33
-
Se possível, coloque imagens para ilustrar sua pergunta, por gentileza.– Matheus Martins7/03/2018 às 13:34
-
Pronto, coloquei a imagem.– Iramar Oliveira7/03/2018 às 13:37
-
coloque o form da image dentro da div container– HudsonPH7/03/2018 às 13:38
2 Respostas
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.
-
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 :)– hugocsl7/03/2018 às 14:01
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>