Review the image below;
Younoticethatthenumberfieldiscutoffbecausethemodalformneedsawiderwidth,Imadethoseattemptsbelow,buttonoavail.
Thisismypage;
<form><divclass="modal fade" id="create">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>&time;</span>
</button>
<h4>Novo Imóvel</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="descricao">Descrição</label>
<input type="text" class="form-control" placeholder="Descrição" name="descricao" required>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="preco">Preço</label>
<input type="text" class="form-control" placeholder="Preço" name="preco" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="qtdQuartos">Quantidade de Quartos</label>
<input type="number" class="form-control" placeholder="Quantidade de Quartos" required name="qtdQuartos">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="tipo">Tipo do imóvel</label>
<select class="form-control" name="tipo" required>
<option>Apartamento</option>
<option>Casa</option>
<option>Kitnet</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="qtdQuartos">Finalidade do imóvel</label>
<select class="form-control" name="finalidade" required>
<option>Venda</option>
<option>Locação</option>
</select>
</div>
</div>
</div>
<h4>Endereço</h4>
<hr>
<div class="form-group">
<label for="logradouroEndereco">Logradouro</label>
<input type="text" class="form-control" placeholder="Logradouro" required name="logradouroEndereco">
</div>
<div class="row">
<div class="col-md-10">
<div class="form-group">
<label for="bairroEndereco">Bairro</label>
<input type="text" class="form-control" placeholder="Bairro" required name="bairroEndereco">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="numero">Número</label>
<input type="number" class="form-control" placeholder="Número" required name="numeroEndereco">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" value="Salvar">
</div>
</div>
</div>
</div>
</form>
Note: Do not worry, I'm sure the page is connected to the two css files
As the other tags are classes, I tried to do this in the ccs file.
number one attempt.
.modal-content{
width: 500px;
}
try number two
.modal-dialog{
width: 500px;
}
try number three
.modal-header{
width: 500px;
}
try number four:
.modal-body{
width: 500px;
}
It was like this, but it did not work.
Does anyone have any suggestions?