how to put a button next to table using bootstrap3 - html

Question

how to set a button sit next to a table within a div.
my code is:
<div class="col-xs-6"> <!-- main div -->
<div> <!-- table div -->
<table class="table table-bordered table-striped text-center">
<thead><tr>
<!-- 4 Header -->
</tr></thead>
<tbody> <tr><td>
<!-- first row -->
</td></tr></tbody>
</table>
</div>
<div class="col-xs-4">
<div class="col-xs-2" >
<button type="button" class="btn btn-primary" name="search" id="search">Search</button>
</div>
<div class="col-xs-2" >
<button type="button" class="btn btn-primary" name="add" id="add">Add</button>
</div>
</div>
-- main div close
what i am getting is:

Answer 1

put the main div to class: col-xs-12
and button div to col-xs-8 or col-xs-10.
So, main is total 12 in which you are putting the Table with *-xs-2 and button with *-xs-8
Try this
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col-xs-4">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-8">
<div class="row">
<div class="col-xs-3" >
<button type="button" class="btn btn-primary" name="search" id="search">Search</button>
</div>
<div class="col-xs-3" >
<button type="button" class="btn btn-primary" name="add" id="add">Add</button>
</div>
</div>
</div>
</div>
</div>
Check this out: https://jsfiddle.net/hbp71ejr/