Diminuir width do input com bootstrap, mas sem alterar o agrupamento

02/09/2018

0

Fala pessoal, beleza? Eu estou fazendo uma página e dentro de uma opção do menu do cabeçalho eu fiz uma modal window segue no código abaixo :
<form class="modal fade" id="janela">
<div class="modal-dialog">
<div class="modal-content">

<!-- Cabeçalho -->
<div class="modal-header">

<button type="button " class="close" data-dismiss="modal">
<span>×</span>
</button>
<h3 class="modal-title" align="left">Efetuar Cadastro</h3>

</div>
<div class="form-group">
<h4>Nome</h4>
<input type="text" class="form-control " id="nome" placeholder="Digite Seu Nome Completo">
</div>


<div class="form-group">
<h4>Email</h4>
<input type="email" class="form-control" id="email" placeholder="Digite Seu email">
</div>

<div class="form-group ">
<h4>Senha</h4>
<input type="password" class="form-control" id="senha" placeholder="Digite sua senha">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Cancelar
</button>

<button type="submit" class="btn btn-primary ">
Cadastrar
</button>
</div>

</div>


</div>




</form>

A minha única dúvida é a seguinte, a modal abre com uma heigh e width padrão, até aí tudo bem, mas os inputs ocupam esse espaço todo, eu queria é alterar o width dos inputs, tentei colocar pelo css width 50% ou alguns valores em px, mas nada aplica, tentei usar o sistema de grid colocando col-xs-6 ou qualquer coisa menor que 12 também para testar, até funciona, mas dai meus botões saem do lugar quando eu mexo no grid, e na verdade o tamanho ideal do meu input seria col-xs-6 mesmo, em cada um deles, como eu faço pra colocar o input do tamanho 6grid e não ficar um do lado do outro e nem mexer na posição dos meus botões ?
Pedro Verani

Pedro Verani

Responder

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar