What happens is that there is a line that delimits what would come to be the end of the "modal-body". But as you can see in the image the content that entered the label with that class appears as if it were outside that container but a bit above the footer (the buttons clean and save).
I have checked the labels to see if I have forgotten some div without closing but it has not been the case. I would like to know if there maybe a class is interrupting the correct viewing of the content. Thanks in advance :) Here I attach the code:
<div class="modal fade" id="filtro" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Bandeja de Filtros</h4>
</div>
<div class="modal-body">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="col-md-3 col-sm-3 col-xs-3">
<div class="col-md-12 col-sm-12 col-xs-12" style="margin-bottom: 15px;">
<h5><center><b>Filtrar por Cajas: </b></center><h5>
</div>
<div class="form-group col-md-12 col-sm-12 col-xs-12">
<label class="col-md-12 col-sm-3 col-xs-3 text-left">Caja Salida: </label>
<div class='col-md-12 col-sm-4 col-xs-4'>
<select id="cajaegreso_sele" multiple="multiple" class="form-control selectpicker sp1" title="Seleccione Caja" data-size="4" tabindex="-1" data-selected-text-format="count>3" data-count-selected-text= "{0} Cajas seleccionadas">
</select>
</div>
</div>
<div class="form-group col-md-12 col-sm-12 col-xs-12">
<label class="col-md-12 col-sm-3 col-xs-3 text-left">Caja Llegada: </label>
<div class='col-md-12 col-sm-4 col-xs-4'>
<select id="cajallegada_sele" multiple="multiple" class="form-control selectpicker sp1" title="Seleccione Caja" data-size="4" tabindex="-1" data-selected-text-format="count>3" data-count-selected-text= "{0} Cajas seleccionadas">
</select>
</div>
<div class='col-md-4 col-sm-4 col-xs-4'></div>
</div>
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<div class="col-md-12 col-sm-12 col-xs-12" style="margin-bottom: 15px;">
<h5><center><b>Filtrar por Tipos: </b></center><h5>
</div>
<div class="form-group col-md-12 col-sm-12 col-xs-12">
<label class="col-md-12 col-sm-3 col-xs-3 text-left">Tipo de Movimientos: </label>
<div class='col-md-12 col-sm-4 col-xs-4'>
<select id="tmov_sele" multiple="multiple" class="form-control selectpicker sp1" title="Seleccione Movimiento" data-size="4" tabindex="-1" data-selected-text-format="count>3" data-count-selected-text= "{0} Movimientos seleccionados">
</select>
</div>
<div class='col-md-4 col-sm-4 col-xs-4'></div>
</div>
<div class="form-group col-md-12 col-sm-12 col-xs-12">
<label class="col-md-12 col-sm-3 col-xs-3 text-left">Tipo de Documento: </label>
<div class='col-md-12 col-sm-4 col-xs-4'>
<select id="tdoc_sele" multiple="multiple" class="form-control selectpicker sp1" title="Seleccione Tipos" data-size="4" tabindex="-1" data-selected-text-format="count>3" data-count-selected-text= "{0} Tipos Seleccionados">
</select>
</div>
<div class='col-md-4 col-sm-4 col-xs-4'></div>
</div>
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<div class="col-md-12 col-sm-12 col-xs-12" style="margin-bottom: 5px;">
<h5><center><b>Filtrar por Rango de Fechas: </b></center><h5>
</div>
<div class="form-group col-md-12 col-sm-12 col-xs-12">
<label class="col-md-12 col-sm-3 col-xs-3 text-left">Inicio: </label>
<div class='col-md-12 col-sm-4 col-xs-4'>
<div class='input-group date' id='datet1'>
<input type='text' class="form-control" id='f_inicio' />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="form-group col-md-12 col-sm-12 col-xs-12">
<label class="col-md-12 col-sm-3 col-xs-3 text-left">Fin: </label>
<div class='col-md-12 col-sm-4 col-xs-4'>
<div class='input-group date' id='datet2'>
<input type='text' class="form-control" id='f_fin' />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<div class="col-md-12 col-sm-12 col-xs-12" style="margin-bottom: 5px;">
<h5><center><b>Filtrar por Personas/Entidades: </b></center><h5>
</div>
<div class="form-group col-md-12 col-sm-12 col-xs-12">
<label class="col-md-12 col-sm-3 col-xs-3 text-left">Proveedor: </label>
<div class='col-md-12 col-sm-4 col-xs-4'>
<input type='text' class="form-control" id='prov_busc' />
</div>
</div>
<div class="form-group col-md-12 col-sm-12 col-xs-12">
<label class="col-md-12 col-sm-3 col-xs-3 text-left">Personal: </label>
<div class='col-md-12 col-sm-4 col-xs-4'>
<input type='text' class="form-control" id='pers_busc' />
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="row">
<button type="button" class="btn buscar btn-danger"><i class="fa fa-ban"></i> Limpiar</button>
<button type="button" class="btn buscar btn-primary"><i class="fa fa-search"></i> Buscar</button>
</div>
</div>
</div>
</div>
It should be noted that I am using 2 separate libraries that are: bootstrap-select and bootstrap-datetimepicker respectively, I do not know If I have to enter them in the code for a better understanding (if this is the case I edit it without problems).