I am mounting a bootstrap modal and inside it using a form.
With the <div class="form-group"> within each of these amounts a grid, with col-xs- that sum of 12 (one with 2, 2 and 8) but nonetheless are 'bundling' one input in the other.
What do I do wrong? not only add 12 and good?
Ex: code: link
The configuration of a line in Bootstrap should be within div with class row . This ensures that there is no break within that line according to the width. From the way you have defined it as a single line, the resolution adaptation can be lost.
Other important information is about the form-group that should encompass an input or label + input as explained in documentation .
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button data-toggle="modal" data-target="#modal-filtro"><i class="fa fa-filter" aria-hidden="true"></i> Filtros </button>
<div class="modal fade" id="modal-filtro" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLabel">Filtros</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-2">
<div class="form-group">
<div class="onoffswitch">
<input type="checkbox" name="chkBairro" class="onoffswitch-checkbox" id="chkBairro">
<label class="onoffswitch-label" for="chkBairro">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
<div class="col-xs-2">Bairros</div>
<div class="col-xs-8">
<select class="form-control">
<option>Selecione</option>
<option>Lorem</option>
<option>Lorem</option>
</select>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<div class="onoffswitch form-group">
<input type="checkbox" name="chkEquipes" class="onoffswitch-checkbox" id="chkEquipes">
<label class="onoffswitch-label" for="chkEquipes">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
<div class="col-xs-2">Equipes Policiais</div>
<div class="col-xs-8">
<div class="form-group">
<select class="form-control">
<option>Selecione</option>
<option>Lorem</option>
<option>Lorem</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<div class="onoffswitch form-group">
<input type="checkbox" name="chkEquipes1" class="onoffswitch-checkbox" id="chkEquipes1">
<label class="onoffswitch-label" for="chkEquipes1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
<div class="col-xs-2">Equipes Policiais</div>
<div class="col-xs-8">
<select class="form-control">
<option>Selecione</option>
<option>Lorem</option>
<option>Lorem</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Filtrar</button>
</div>
</div>
</div>
</div>