Bootstrap button side by side in table [duplicate] - html

Question

This question already has answers here:
Make 2 buttons inside a table cell be next to each other
(5 answers)
Closed 6 years ago.
I have a problem to make the button in table side by side. I have tried table-responsive but it didn't work. I really hope that you can help me.
Here is my code. Based on my understanding, table-responsive or table table-bordered table-hover is from Bootstrap. As long I link it in my index.html, supposedly it should be fine.
But now my output is not as I desired. The button that I have circle should be side by side
P/S: sorry for my english.
<div class=" table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>PPMID</th>
<th>EPRID</th>
<th>Release ID</th>
<th>Project Name</th>
<th>Release Name</th>
<th>Application Name</th>
<th>Action</th>
</tr>
<tr>
<th>
<input class="form-control" id="ppmid" type="number" min="1" placeholder="PPMID">
</th>
<th>
<input class="form-control" id="eprid" type="number" min="1" placeholder="EPRID">
</th>
<th>
<input class="form-control" id="releaseid" type="text" placeholder="Release ID">
</th>
<th>
<input class="form-control" id="projectname" type="text" placeholder="Project Name">
</th>
<th>
<input class="form-control" id="releasename" type="text" placeholder="Release Name">
</th>
<th>
<input class="form-control" id="applicationname" type="text" placeholder="Application Name">
</th>
<th>
<button class="btn btn-primary">
<span class="glyphicon glyphicon-plus"></span>
</button>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in filteredlist | filter:searchText"><!--false for ascending, true for descnding-->
<td>{{item.PMID}}</td>
<td>{{item.EPRID}}</td>
<td>{{item.Releaseid}}</td>
<td>{{item.projectname}}</td>
<td>{{item.releasename}}</td>
<td>{{item.appname}}</td>
<td>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>
</tbody>
</table>
</div>

Answer 1

There is no problem with your code. It works just fine. Button side by side
Maybe you should try checking if your browser is not in a zoom-in mode or check if the resolution is correct.
Live Demo Here
Snippet Example
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class=" table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>PPMID</th>
<th>EPRID</th>
<th>Release ID</th>
<th>Project Name</th>
<th>Release Name</th>
<th>Application Name</th>
<th>Action</th>
</tr>
<tr>
<th>
<input class="form-control" id="ppmid" type="number" min="1" placeholder="PPMID">
</th>
<th>
<input class="form-control" id="eprid" type="number" min="1" placeholder="EPRID">
</th>
<th>
<input class="form-control" id="releaseid" type="text" placeholder="Release ID">
</th>
<th>
<input class="form-control" id="projectname" type="text" placeholder="Project Name">
</th>
<th>
<input class="form-control" id="releasename" type="text" placeholder="Release Name">
</th>
<th>
<input class="form-control" id="applicationname" type="text" placeholder="Application Name">
</th>
<th>
<button class="btn btn-primary">
<span class="glyphicon glyphicon-plus"></span>
</button>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in filteredlist | filter:searchText"><!--false for ascending, true for descnding-->
<td>{{item.PMID}}</td>
<td>{{item.EPRID}}</td>
<td>{{item.Releaseid}}</td>
<td>{{item.projectname}}</td>
<td>{{item.releasename}}</td>
<td>{{item.appname}}</td>
<td>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>
</tbody>
</table>
</div>

Answer 2

I think <td> do not have enough width for the buttons make them side-by-side.
Two solutions:
.side-by-side {
display: -webkit-flex;
display: flex;
flex-wrap: nowrap; // force buttons not line-break
}
add this CSS for the container <td>.
(btw, flex is CSS3 property, check browser support here)
or give enough fixed width for the <td>.