Bootstrap devided screen - css

Question

I want to split my html page into two tables with button in the middle. I want to set fix width to the buttons (e.g. 40 px distance between the two tables in every screen size). The tables have to have the same width and they have to fill the screen horizontally. How can I create this layout with Bootstrap?

Answer 1

You need to play with some custom code for example.
<div class="el">
<div class="elLeft">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="elbtn">
<a class="btn btn-info" href="#" role="button"> < </a>
<a class="btn btn-info" href="#" role="button"> > </a>
</div>
<div class="elRight">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
css
.el {
display: table;
width: 100%;
}
.elLeft,.elRight,.elbtn {
display: table-cell;
}
.elbtn {
padding: 0 15px;
vertical-align: middle;
width: 80px;
}
.elbtn .btn {
display: block;
width: 45px;
margin: 5px auto;
}
Demo here

Answer 2

Inside a container or container-fluid:
<div class="row">
<div class="col-xs-5">
TABLE 1
</div>
<div class="col-xs-2">
BUTTONS
</div>
<div class="col-xs-5">
TABLE 2
</div>
</div>
and check the documentation to see how to create tables and buttons as you want