Configuring modal with bootstrap

Question

I have a modal I use bootstrap, but when I put inside a div to format the size, it seems strange. Follow the modal:

<div class="modal fade" id="myModalTransportador" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Transportador</h4>
                </div>
                <div class="form-group">
                    <div class="col-md-12">
                        <label asp-for="TransportadorID" class="col-md-6 control-label"></label>
                        <div class="col-md-4">
                            <input type="text" asp-for="TransportadorID" onkeypress="return BuscaDados1(event);" onblur="CarregaFornecedor1(this.value);" class="form-control" name="TransportadorID" id="idtransportador" />
                        </div>
                        <div class="col-md-1"> <th href="#" style="text-align:right"><a data-toggle="modal" data-target="#myModalPesquisaFornecedor" title="Pesquisar Transportador" class="btn btn-info"><i class="fa fa-search fa-lg"></i></a></th></div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-12">
                        <div class="col-md-12">
                            <label class="control-label" id="fornecedor1"></label>
                        </div>
                        <div class="col-md-12">
                            <label class="control-label" name="NomeTransportador" id="nomefornecedor1" ></label>
                        </div>
                        <div class="col-md-12">
                            <label class="control-label" name="EnderecoTransportador" id="ruafornecedor1"></label>
                        </div>
                        <div class="col-md-12">
                            <label class="control-label" name="CidadeTransportador" id="cidadefornecedor1"></label>
                            <label class="control-label" id="espaco"></label>
                            <label class="control-label" name="EstadoTransportador" id="estadofornecedor"></label>
                        </div>
                        <div class="col-md-12">
                            <label class="control-label" name="DocumentoTransportador" id="documentofornecedor"></label>
                        </div>
                        <div class="col-md-12">
                            <label class="control-label" name="InscEstadualTransportador" id="inscricaoestadual"></label>
                        </div>
                    </div>
                </div>
                <div class="col-md-12"><br /></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" data-dismiss="modal">Concluir</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                </div>
            </div>
        </div>
    </div>

He gets that way, with that line in the middle, when I use class="col-md-12" how can I correct ?

Answer 1

What I think is happening is that you’re displaying html. And probably what you want is for it to appear when you want to show the message to the user. Try to put this on your div

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

The relevant part is Aria-Hidden="true" If you want to keep it visible, you don’t need it. What I also noticed is that those lines are where your modal content should be. You probably have some tag out of place. I also just checked that you don’t have one <div class="modal-body"> , tries to put everything inside the body and checks if it already fits all right If it doesn’t work and can help you in something else warns!

Answer 2

One way to adjust this is by putting a div class="row" after the form-group:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button class="btn"  data-toggle="modal" data-target="#myModalTransportador">Modal</button>

<div class="modal fade" id="myModalTransportador" role="dialog">
  <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
          <div class="modal-header">
             <h4 class="modal-title">Transportador</h4>
          </div>
                	
          <div class="form-group">
             <div class="row">
	              <div class="col-md-12">
	                  <label asp-for="TransportadorID" class="col-md-6 control-label">fgfgf</label>
	                  <div class="col-md-5">
	                     <input type="text" asp-for="TransportadorID" onkeypress="return BuscaDados1(event);" onblur="CarregaFornecedor1(this.value);" class="form-control" name="TransportadorID" id="idtransportador" />
	                  </div>
	                  <div class="col-md-1"> <th href="#" style="text-align:right"><a data-toggle="modal" data-target="#myModalPesquisaFornecedor" title="Pesquisar Transportador" class="btn btn-info"><i class="fa fa-search fa-lg">g</i></a></th></div>
	               </div>
             </div>
           </div>
           <div class="form-group">
             <div class="row">
	               <div class="col-md-12">
	                   <div class="col-md-12">
	                       <label class="control-label" id="fornecedor1"></label>
	                   </div>
	                   <div class="col-md-12">
	                       <label class="control-label" name="NomeTransportador" id="nomefornecedor1">Label</label>
	                   </div>
	                       <div class="col-md-12">
	                            <label class="control-label" name="EnderecoTransportador" id="ruafornecedor1">Label</label>
	                       </div>
	                       <div class="col-md-12">
	                            <label class="control-label" name="CidadeTransportador" id="cidadefornecedor1">Label</label>
	                            <label class="control-label" id="espaco">vbv</label>
	                            <label class="control-label" name="EstadoTransportador" id="estadofornecedor">Label</label>
	                        </div>
	                        <div class="col-md-12">
	                            <label class="control-label" name="DocumentoTransportador" id="documentofornecedor">Label</label>
	                        </div>
	                        <div class="col-md-12">
	                            <label class="control-label" name="InscEstadualTransportador" id="inscricaoestadual">Label</label>
	                        </div>
	                    </div>
	                </div>
                </div>
                <div class="col-md-12"><br /></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" data-dismiss="modal">Concluir</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                </div>
            </div>
        </div>
    </div>