Anomaly in Bootstrap 3.3.7, 'row' class and 'col' cllass - twitter-bootstrap-3

Question

I have an abnormal behavior when I use the 'row' class
the 'notes' field is not displayed for the whole width. seems to behave in his own way.
I used bootstrap 3.3.7, jquery-1.12.4, jquery.dataTables 1.10.16, bootstrap-select 1.12.4
<div class="table-bordered" style="padding:10px;margin:5px; border-color:dodgerblue; border-width:2px">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<h3 style="margin-bottom:5px; margin-top:20px; color:dodgerblue; align-content:center">Aggiungi Anomalie<span class="badge badge-default"></span></h3>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<select id="ListaAnomalieSelect" name="ListaAnomalieSelect" class="selectpicker form-control" title="Selezionare Ammaloramento..."></select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<select class="selectpicker form-control" title="Selezionare Gravità...">
<option>Lieve</option>
<option>Medio</option>
<option>Alto</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<select class="selectpicker form-control" title="Selezionare Estensione...">
<option value="5">5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
<option value="25">25%</option>
<option value="30">30%</option>
<option value="40">40%</option>
<option value="50">50%</option>
<option value="60">60%</option>
<option value="70">70%</option>
<option value="80">80%</option>
<option value="90">90%</option>
<option value="100">100%</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<textarea rows="3" class="form-control" id="Note" name="Note" placeholder="Note"></textarea>
</div>
</div>
</div>
<button id="AddAnomalia" class="btn btn-success" type="button" style="margin-bottom:20px; margin-top:20px;"><i class="glyphicon glyphicon-ok"></i> Aggiungi</button>
</div>
the result on the chrome browser is
does anyone know where the error is? thank you

Answer 1

The problem is that .row can only contain columns. Wrap the content in a .col- like this:
<div class="row">
<div class="col-xs-12">
<h3 style="margin-bottom:5px; margin-top:20px; color:dodgerblue">Anomalie Elemento<span class="badge badge-default"></span></h3>
<div class="table-responsive" style="width: 100%; border: 1px solid black; padding: 3px; margin-top:10px;">
<table id="AnomalieDatatable" class="display table-striped table-hover table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Anomalia</th>
<th>Estensione</th>
<th>Note</th>
</tr>
</thead>
</table>
</div>
</div>
</div>