2 tables won't go under each other - html

I am trying to build a website using bootstrap, but have ran into a problem. In the included screenshot you can see I have 2 tables under each other, but I went those 2 tables to be next to each other. I have tried all kinds of variations, but none of them seem to work.
Here is my current code;
<div class="container-fluid">
<div class="col-md-5">
<h5>DIEREN</h5>
<hr>
<div class="card card-body">
<a class="btn btn-primary btn-sm btn-block" href="">Nieuw dier toevoegen</a>
<table class="table table-sm">
<tr>
<th>Soort</th>
<th>Naam</th>
<th>Wijzigen</th>
<th>Verwijderen</th>
<th>Gegevens</th>
</tr>
<td></td>
<td></td>
<td><a class="btn btn-outline-info btn-sm btn-block" href="">Wijzigen</a></td>
<td><a class="btn btn-outline-danger btn-sm btn-block" href="">Verwijderen</a></td>
<td><a class="btn btn-outline-success btn-sm btn-block" href="">Print</a></td>
</table>
</div>
<br>
</div>
<div class="col-md-5">
<h5>BEZOEKEN</h5>
<hr>
<div class="card card-body">
<a class="btn btn-primary btn-sm btn-block" href="">Nieuw bezoek inplannen</a>
<table class="table table-sm">
<tr>
<th>Dier</th>
<th>Brengen</th>
<th>Halen</th>
<th>Wijzigen</th>
<th>Verwijderen</th>
<th>Bevestiging</th>
</tr>
<td></td>
<td></td>
<td></td>
<td><a class="btn btn-outline-info btn-sm btn-block" href="">Wijzigen</a></td>
<td><a class="btn btn-outline-danger btn-sm btn-block" href="">Verwijderen</a></td>
<td><a class="btn btn-outline-success btn-sm btn-block" href="">Print</a></td>
</table>
</div>
</div>
</div>
Thanks in advance.


You need to wrap the columns in a <div class="row"> object. Make sure you're familiar with the grid system. This code works:
<div class="container-fluid">
<div class="row">
<div class="col-md-5">
<h5>DIEREN</h5>
<hr>
<div class="card card-body">
<a class="btn btn-primary btn-sm btn-block" href="">Nieuw dier toevoegen</a>
<table class="table table-sm">
<tr>
<th>Soort</th>
<th>Naam</th>
<th>Wijzigen</th>
<th>Verwijderen</th>
<th>Gegevens</th>
</tr>
<td></td>
<td></td>
<td><a class="btn btn-outline-info btn-sm btn-block" href="">Wijzigen</a></td>
<td><a class="btn btn-outline-danger btn-sm btn-block" href="">Verwijderen</a></td>
<td><a class="btn btn-outline-success btn-sm btn-block" href="">Print</a></td>
</table>
</div>
<br>
</div>
<div class="col-md-5">
<h5>BEZOEKEN</h5>
<hr>
<div class="card card-body">
<a class="btn btn-primary btn-sm btn-block" href="">Nieuw bezoek inplannen</a>
<table class="table table-sm">
<tr>
<th>Dier</th>
<th>Brengen</th>
<th>Halen</th>
<th>Wijzigen</th>
<th>Verwijderen</th>
<th>Bevestiging</th>
</tr>
<td></td>
<td></td>
<td></td>
<td><a class="btn btn-outline-info btn-sm btn-block" href="">Wijzigen</a></td>
<td><a class="btn btn-outline-danger btn-sm btn-block" href="">Verwijderen</a></td>
<td><a class="btn btn-outline-success btn-sm btn-block" href="">Print</a></td>
</table>
</div>
</div>
</div>
</div>
Result:


Wrap two columns with a <div> with class row
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-md-5">
<h5>DIEREN</h5>
<hr>
<div class="card card-body">
<a class="btn btn-primary btn-sm btn-block" href="">Nieuw dier toevoegen</a>
<table class="table table-sm">
<tr>
<th>Soort</th>
<th>Naam</th>
<th>Wijzigen</th>
<th>Verwijderen</th>
<th>Gegevens</th>
</tr>
<td></td>
<td></td>
<td><a class="btn btn-outline-info btn-sm btn-block" href="">Wijzigen</a></td>
<td><a class="btn btn-outline-danger btn-sm btn-block" href="">Verwijderen</a></td>
<td><a class="btn btn-outline-success btn-sm btn-block" href="">Print</a></td>
</table>
</div>
<br>
</div>
<div class="col-md-5">
<h5>BEZOEKEN</h5>
<hr>
<div class="card card-body">
<a class="btn btn-primary btn-sm btn-block" href="">Nieuw bezoek inplannen</a>
<table class="table table-sm">
<tr>
<th>Dier</th>
<th>Brengen</th>
<th>Halen</th>
<th>Wijzigen</th>
<th>Verwijderen</th>
<th>Bevestiging</th>
</tr>
<td></td>
<td></td>
<td></td>
<td><a class="btn btn-outline-info btn-sm btn-block" href="">Wijzigen</a></td>
<td><a class="btn btn-outline-danger btn-sm btn-block" href="">Verwijderen</a></td>
<td><a class="btn btn-outline-success btn-sm btn-block" href="">Print</a></td>
</table>
</div>
</div>
</div>


In bootstrap you need to wrap your columns inside a div with a class of row for them to be on same row.
<div class="container-fluid">
<div class="row">
<div class="col-md-5">
<h5>DIEREN</h5>
<hr>
<div class="card card-body">
<a class="btn btn-primary btn-sm btn-block" href="">Nieuw dier toevoegen</a>
<table class="table table-sm">
<tr>
<th>Soort</th>
<th>Naam</th>
<th>Wijzigen</th>
<th>Verwijderen</th>
<th>Gegevens</th>
</tr>
<td></td>
<td></td>
<td><a class="btn btn-outline-info btn-sm btn-block" href="">Wijzigen</a></td>
<td><a class="btn btn-outline-danger btn-sm btn-block" href="">Verwijderen</a></td>
<td><a class="btn btn-outline-success btn-sm btn-block" href="">Print</a></td>
</table>
</div>
<br>
</div>
<div class="col-md-5">
<h5>BEZOEKEN</h5>
<hr>
<div class="card card-body">
<a class="btn btn-primary btn-sm btn-block" href="">Nieuw bezoek inplannen</a>
<table class="table table-sm">
<tr>
<th>Dier</th>
<th>Brengen</th>
<th>Halen</th>
<th>Wijzigen</th>
<th>Verwijderen</th>
<th>Bevestiging</th>
</tr>
<td></td>
<td></td>
<td></td>
<td><a class="btn btn-outline-info btn-sm btn-block" href="">Wijzigen</a></td>
<td><a class="btn btn-outline-danger btn-sm btn-block" href="">Verwijderen</a></td>
<td><a class="btn btn-outline-success btn-sm btn-block" href="">Print</a></td>
</table>
</div>
</div>
</div>


I'm not really sure but have you tried to use the row class?
<div class="row">
<!-- Your tables code here -->
</div>


try this:-
display:inline-block

Related

Bootstrap 4 - How to create a table, which starts from second column?

I do have this HTML, but I am not able to do this:
The width of the first column Links available should be same like the length of Links available, and the text shouldn't split this two words. It should be one line Links available
On the column Links available only header is important, the cells below will not be used, so it could be hidden
The buttons should have a little bit space between next button, and it should be like inline...
What I want to, in visual:
My HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
<thead>
<tr>
<th class="col-xl">Links available:</th>
<th class="col-xl-auto">Category 1</th>
<th class="col-xl-auto">Category 2</th>
<th class="col-xl-auto">Category 3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xl"></td>
<td class="col-xl-3">
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
</td>
<td class="col-xl-3">
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
</td>
<td class="col-xl-3">
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
</td>
</tr>
<tr>
<td class="col-xl"></td>
<td class="col-xl-3">
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
</td>
<td class="col-xl-3">
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
</td>
<td class="col-xl-3">
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
</td>
</tr>
<tr>
<td class="col-xl"></td>
<td class="col-xl-3">
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
</td>
<td class="col-xl-3">
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
</td>
<td class="col-xl-3">
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
</td>
</tr>
</tbody>
</table>
if you would like to test my code, please use: codeply - Bootstrap snippets

If you want to remove responsiveness column
change
col-md-3
to
col-3
Code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<table class="table">
<thead>
<tr class="">
<th class="">Links available:</th>
<th class="">Category 1</th>
<th class="">Category 2</th>
<th class="">Category 3</th>
</tr>
</thead>
<tbody>
<tr>
<td class=""></td>
<td class="">
<div class="row">
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
</td>
<td class="">
<div class="row">
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
</td>
<td class="">
<div class="row">
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
</td>
</tr>
<tr>
<td class=""></td>
<td class="">
<div class="row">
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
</td>
<td class="">
<div class="row">
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
</td>
<td class="">
<div class="row">
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
</td>
</tr>
<tr>
<td class=""></td>
<td class="">
<div class="row">
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
</td>
<td class="">
<div class="row">
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
</td>
<td class="">
<div class="row">
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
</td>
</tr>
</tbody>
</table>
Second code using DIV
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid p-0">
<div class="row m-0">
<div class="col-3 p-0">
<p class="font-weight-bold">Links available:</p>
</div>
<div class="col-3 p-0">
<p class="font-weight-bold">Category 1</p>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
<div class="col-3 p-0">
<p class="font-weight-bold">Category 2</p>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
<div class="col-3 p-0">
<p class="font-weight-bold">Category 3</p>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
</div>
</div>

I think you are searching for a nested Grid Layout. I recommend to read about this, so you can see examples of how to work with the Bootstrap Grid System. Even more, on XS (EXTRA SMALL) screens sizes I recommend to stack the categories vertically because of the little width you have available. You can check this all on next example:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 text-center">
<p class="my-1">Links available:</p>
</div>
<div class="col-sm-3 text-center bg-warning">
<div class="row">
<div class="col-12 my-1">Category 1:</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-primary btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-danger btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-success btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-primary btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-danger btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-success btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-primary btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-danger btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-success btn-block">B</button>
</div>
</div>
</div>
<div class="col-sm-3 text-center">
<div class="row">
<div class="col-12 my-1">Category 2:</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-primary btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-danger btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-success btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-primary btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-danger btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-success btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-primary btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-danger btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-success btn-block">B</button>
</div>
</div>
</div>
<div class="col-sm-3 text-center bg-warning">
<div class="row">
<div class="col-12 my-1">Category 3:</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-primary btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-danger btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-success btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-primary btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-danger btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-success btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-primary btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-danger btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-success btn-block">B</button>
</div>
</div>
</div>
</div>
</div>

Vertically align buttons with textarea

In following bootstrap-3 html the three buttons are aligned to the top edge of textarea. How can we align in the middle instead so they are about half way down?
Note: It probably is not relevant but just in case, I'm using default bootstrap settings in a Visual Studio 2017 project.
<tr class="row">
<td class="col-md-8">
<textarea class="txtInput form-control" rows="3" asp-for="#Model.lstOrders" style="min-width:630px;overflow:auto;"></textarea>
</td>
<td class="col-md-4 text-right">
<button type="button" class="btnEdit btn-info btn-xs">Edit</button> |
<button type="button" class="Savebtn btn-info btn-xs" value="#Model.lstOrders">Save</button> |
<button type="button" class="btnResetOrginVal btn-info btn-xs">Reset</button> | <button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal">Delete</button>
<tr>

As commented earlier :Within table-cells, td {vertical-align:middle;} should do .
td {vertical-align:middle;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table>
<tr class="row">
<td class="col-md-8">
<textarea class="txtInput form-control" rows="3" asp-for="#Model.lstOrders" style="min-width:300px;overflow:auto;"></textarea>
</td>
<td class="col-md-4 text-right">
<button type="button" class="btnEdit btn-info btn-xs">Edit</button> |
<button type="button" class="Savebtn btn-info btn-xs" value="#Model.lstOrders">Save</button> |
<button type="button" class="btnResetOrginVal btn-info btn-xs">Reset</button> | <button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal">Delete</button>
</tr>
</table>

As pointed out in the comments, setting your tds to vertical-align: middle (which is the initial property value anyway) should do the trick.
.specialTable td {
vertical-align: middle;
}
<table class="specialTable">
<tr class="row">
<td class="col-md-8">
<textarea class="txtInput form-control" rows="3" asp-for="#Model.lstOrders" style="overflow:auto;"></textarea>
</td>
<td class="col-md-4 text-right">
<button type="button" class="btnEdit btn-info btn-xs">Edit</button> |
<button type="button" class="Savebtn btn-info btn-xs" value="#Model.lstOrders">Save</button> |
<button type="button" class="btnResetOrginVal btn-info btn-xs">Reset</button> | <button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal">Delete</button>
</tr>
</table>

How to remove empty space in a div element?

Here I am providing a screenshot and I outlined the area I wanted to collapse all the way to just right after the last blue buttom, touching it. I outlined the area I wanted to collapse in red. Is there a specific class that will let me do that?
Ty
code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="panel panel-primary col-md-6">
<div class="row">
<!-- Label -->
<button type="button" class="btn btn-info btn-xs btn-block" id='invoicelabel'><strong>Invoice CP</strong>
</button>
<!-- Invoice CP -->
<div class="btn-group btn-group-vertical col-md-3 test2">
<button class="btn btn-primary btn-sm" type="submit">Total Amount</button>
<button class="btn btn-primary btn-sm" type="submit">Duplicate</button>
<button class="btn btn-primary btn-sm" type="submit">Clear</button>
<button class="btn btn-primary btn-sm" type="submit">Currency</button>
<button class="btn btn-primary btn-sm" type="submit" disabled>.</button>
<button class="btn btn-primary btn-sm" type="submit" disabled>.</button>
</div>
<table class="table table-condensed">
<tbody class="col-md-10 test pull-right">
<tr>
<td class="default" width="20%">
<input type="text" class="btn btn-default btn-sm col-sm-12 floatright" placeholder="Pieces">
</td>
<td class="default" width="35%">
<input type="text" class="btn btn-default btn-sm col-sm-12 floatright" placeholder="Unit Price">
</td>
<td class="default" width="45%">
<input type="text" class="btn btn-default btn-sm col-sm-12 floatright" placeholder="Line Amount">
</td>
</tr>
<tr>
<td class="default" width="20%">
<input type="text" class="btn btn-default btn-sm col-sm-12 floatright" placeholder="Pieces">
</td>
<td class="default" width="35%">
<input type="text" class="btn btn-default btn-sm col-sm-12 floatright" placeholder="Unit Price">
</td>
<td class="default" width="45%">
<input type="text" class="btn btn-default btn-sm col-sm-12 floatright" placeholder="Line Amount">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

Try checking the CSS height property of the .test or .test2. Probably it is set to a specific value. If you leave it blank, the area will fit to the content.

How to put buttons next to each other?

I have a table and put 2 buttons in the last column, but they are one below each other. It looks as following:
The HTML code look as following:
<div class="table-responsive">
<table class="table table-bordered table-hover" style="width: 80%;">
<thead>
<tr>
<th>ID</th>
<th>Gender</th>
<th>FirstName</th>
<th>LastName</th>
<th>EMail</th>
<th>CompanyName</th>
<th>JobTitle</th>
<th>Phone</th>
<th>Avatar</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in contacts">
<td>{{item.Id}}</td>
<td>{{item.Gender}}</td>
<td>{{item.FirstName}}</td>
<td>{{item.LastName}}</td>
<td>{{item.EMail}}</td>
<td>{{item.CompanyName}}</td>
<td>{{item.JobTitle}}</td>
<td>{{item.Phone}}</td>
<td><img src="{{ item.Avatar }}" /></td>
<td>
<button ng-model="$scope.Contact" ng-click="edit(contacts[$index])" class="btn btn-primary">Edit</button>
<button ng-click="delete($index)" class="btn btn-primary">Delete</button>
</td>
</tr>
</tbody>
</table>
I've tried a lot of settings, but it doesn't help.
How to put them next to each other?
UPDATE:

You can use below code and achieve
<button ng-model="$scope.Contact" ng-click="edit(contacts[$index])" class="btn btn-primary" style="display:inline-block;vertical-align:middle;">Edit</button>
<button ng-click="delete($index)" class="btn btn-primary" style="display:inline-block;vertical-align:middle;">Delete</button>
Or if you use Bootstrap then you can get Bootstrap Code from Bootstrap Group Buttons or use below code
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Right</button>
</div>
</div>
to achieve

This is an easy problem to fix.
As you used tables in your structure, you can use tables in the last column.
Inside that last column td, add a table. The table body should look like this.
<div class="table-responsive">
<table class="table table-bordered table-hover" style="width: 80%;">
<thead>
<tr>
<th>ID</th>
<th>Gender</th>
<th>FirstName</th>
<th>LastName</th>
<th>EMail</th>
<th>CompanyName</th>
<th>JobTitle</th>
<th>Phone</th>
<th>Avatar</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in contacts">
<td>{{item.Id}}</td>
<td>{{item.Gender}}</td>
<td>{{item.FirstName}}</td>
<td>{{item.LastName}}</td>
<td>{{item.EMail}}</td>
<td>{{item.CompanyName}}</td>
<td>{{item.JobTitle}}</td>
<td>{{item.Phone}}</td>
<td>
<img src="{{ item.Avatar }}" />
</td>
<td>
<table>
<tbody>
<tr>
<td>
<button ng-model="$scope.Contact" ng-click="edit(contacts[$index])" class="btn btn-primary">Edit</button>
</td>
<td>
<button ng-click="delete($index)" class="btn btn-primary">Delete</button>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

in stylesheet make button css display to inline or inline-block
Also do check the TD width and buttons width. If the buttons width is greater than the TD width it will break to next row for sure

Try this
<div class="list-unstyled list-inline"><button ng-model="$scope.Contact" ng-click="edit(contacts[$index])" class="btn btn-primary">Edit</button><button ng-click="delete($index)" class="btn btn-primary">Delete</button></div>

What you were looking for is a button group.
<div class="btn-toolbar" role="toolbar">
<!-- Button trigger modal -->
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
data-target="#editModal">Edit
</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-outline-danger btn-sm" id="delete">Delete
</button>
</div>
</div>

Adjust table cells in Bootstrap to content

I have a table using Bootstrap, where the content of each table cell is a button. I want the width of each cell to be the width of the button plus margin. I tried resizing using <td class="col-md-1"> but this makes no difference.
Is there a way of resizing the width with Bootstrap?
This is the HTML:
<table class="table table-bordered">
<tr>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">1</button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">2<br>ABC</button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">3<br>DEF</button></td>
</tr>
<tr>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">4<br>GHI</button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">5<br>JKL</button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">6<br>MNO</button></td>
</tr>
<tr>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">7<br>PQRS</button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">8<br>TUV</button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">9<br>WXYZ</button></td>
</tr>
<tr>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs"><<br></button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">0<br></button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">Clr<br></button></td>
</tr>
Thanks

You can add a width to the table like this (assuming you add id="phone-table" to your <table>):
#media (min-width:767px) {
#phone-table{
width:20%;
}
}
#media (max-width:768px) {
#phone-table{
width:40%;
}
}
I used media queries so that the table maintains responsiveness and won't be too large or small on any screen.
Bootply Demo