Hi. How i can create bootstrap borderet table like this - css

Question

I would like the first two columns to only occupy the width of their contents, and for the final 3rd column to be justified to the right with a gap (if any) between the 2nd and 3rd columns as immediately below. In the diagram I have marked this as a large empty column.
+-------+------+-------------------+------+
| Col1 | Col2 | | Col3 |
+-------+------+-------------------+------+
| Val 1 | Val2 | | Val3 |
+-------+------+-------------------+------+
Some restraints:
I can use only bootstrap.
I cant use any custom styles.
I've tried it as follows, but it's not working.
<table class="table table-bordered">
<thead>
<tr class="row">
<td class="col-md-1">col1</td>
<td class="col-md-1">col2</td>
<td class="col-md-9"></td>
<td class="col-md-1">col3</td>
</tr>
</thead>
<tbody>
<tr class="row">
<td class="col-md-1">val1</td>
<td class="col-md-1">val2</td>
<td class="col-md-9"></td>
<td class="col-md-1">val3</td>
</tr>
</tbody>
</table>

Answer 1

Bootstrap 4
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
</tbody>
</table>
Bootstrap 3
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
Check which version you are using for bootstrap. If any of the above code is not working please check you imported the bootstrap properly or not.