How to change the width of the modal bootstrap?

Question

Analyze the image below;

You notice that the number field is cut because the modal form needs a larger width, I made these attempts below, but without success.

This is my page;

<form>
  <div class="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>

OBS: Don’t worry, as I’m sure the page is connected with the two css files

As the other tag are classes, I tried to do so in the ccs file.

attempt number one.

.modal-content{
  width: 500px;
}

attempt number two

.modal-dialog{
  width: 500px;
}

attempt number three

.modal-header{
  width: 500px;
}

attempt number four:

.modal-body{
  width: 500px;
}

was like this, but did not solve.

Does anyone have any suggestions?

Answer 1

You don’t need external CSS to the framework for this, add one of the bootstrap size classes to the classnamed element .modal-dialog:

> .modal-sm = pequena (small)
> .modal-lg = grande (large)



 <div class="modal-dialog modal-lg">

Follows reference documentation:

http://getbootstrap.com/docs/4.0/components/modal/#modal-Components

NOTE: even though Docs is from Vs. 4.0 the modal mechanisms are practically the memos of Vs. 3.3.7 which is the one you should be using.