multiple divs are overlapped with no margin between them in bootstrap 3 - css

Question

I have a table. i want to add a row just above the table header. i have 8 divs to add in the row. I have following codes.
<div class = "container">
<div class="row" style="margin-top: 8px">
<div class = "col-sm-1">
<div class="dateselect_filter" id="dt_basic_length">
<label>
<select name="dt_basic_length" aria-controls="dt_basic" class="form-control input-sm">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
</select>
</label>
</div>
</div>
<div class = "col-sm-1">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked>S
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off">L
</label>
</div>
</div>
<div class = "col-sm-1">
<div id="dt_basic_filter" class="dataTables_filter">
<label>
<input type="search" class="form-control" placeholder="Filter a">
</label>
</div>
</div>
<div class = "col-sm-1">
<div id="dt_basic_filter" class="dataTables_filter">
<label>
<input type="search" class="form-control" placeholder="Filter b" aria-controls="dt_basic">
</label>
</div>
</div>
<div class = "col-sm-1">
<div id="dt_basic_filter" class="dataTables_filter">
<label>
<input type="search" class="form-control" placeholder="Filter c" aria-controls="dt_basic">
</label>
</div>
</div>
<div class = "col-sm-3">
<div id="dt_basic_filter" class="dataTables_filter">
<label>
<span class="input-group-addon">
<i class="glyphicon glyphicon-search"></i>
</span>
<input type="search" class="form-control form-control-sm" placeholder="Search" aria-controls="dt_basic">
</label>
</div>
</div>
<div class = "col-sm-1">
<div class="dt_basic_filter" id="dt_basic_length">
<label>
<select name="dt_basic_length" aria-controls="dt_basic" class="form-control input-sm">
<option value="x">x</option>
<option value="y">y</option>
<option value="z">z</option>
<option value="xx">xx</option>
</select>
</label>
</div>
</div>
<div class = "col-sm-3">
<div id="dt_basic_filter" class="dataTables_filter">
<label>
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input type="search" class="form-control form-control-sm" placeholder="calendar" aria-controls="dt_basic">
</label>
</div>
</div>
</div>
</div>
My problem is first 3 divs here have margin between them and last 3 divs have margins as well. But 2 divs in the middle have no margin and they are overlapped. Moreover, when i try to reduce the size of 'search' and 'calender' divs, they break into icon and field and take the space of the row below. Can anyone please tell me what went wrong here ? I just need moderate space between the divs in one row.

Answer 1

I wonder if this is what you mean by needing to add a header. (I did work with Bootstrap 4). Perhaps you could upload an image of what you're looking for, so that it's clearer :)
.search-custom {
width: 80%;
}
.calendar-custom {
width: 50%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 text-center" style="border:1px solid;">Header</div>
</row>
<div class="row" style="margin-top: 8px">
<div class="col-sm-1">
<div class="dateselect_filter" id="dt_basic_length">
<label>
<select name="dt_basic_length" aria-controls="dt_basic" class="form-control input-sm">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
</select>
</label>
</div>
</div>
<div class="col-sm-1">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked>S
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off">L
</label>
</div>
</div>
<div class="col-sm-1">
<div id="dt_basic_filter" class="dataTables_filter">
<label>
<input type="search" class="form-control" placeholder="Filter a">
</label>
</div>
</div>
<div class="col-sm-1">
<div id="dt_basic_filter" class="dataTables_filter">
<label>
<input type="search" class="form-control" placeholder="Filter b" aria-controls="dt_basic">
</label>
</div>
</div>
<div class="col-sm-1">
<div id="dt_basic_filter" class="dataTables_filter">
<label>
<input type="search" class="form-control" placeholder="Filter c" aria-controls="dt_basic">
</label>
</div>
</div>
<div class="col-sm-3">
<div id="dt_basic_filter" class="dataTables_filter">
<label>
<span class="input-group-addon">
<i class="glyphicon glyphicon-search"></i>
</span>
<input type="search" class="form-control form-control-sm search-custom" placeholder="Search" aria-controls="dt_basic">
</label>
</div>
</div>
<div class="col-sm-1">
<div class="dt_basic_filter" id="dt_basic_length">
<label>
<select name="dt_basic_length" aria-controls="dt_basic" class="form-control input-sm">
<option value="x">x</option>
<option value="y">y</option>
<option value="z">z</option>
<option value="xx">xx</option>
</select>
</label>
</div>
</div>
<div class="col-sm-3">
<div id="dt_basic_filter" class="dataTables_filter">
<label>
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input type="search" class="form-control form-control-sm calendar-custom" placeholder="calendar" aria-controls="dt_basic">
</label>
</div>
</div>
</div>
</div>
Hope it helps!