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
Related
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
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>
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.
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>
I have a table with a table header and a table row. The header is a btn-group, with 12 buttons to resemble months of a calendar, the row is of 31 columns. I want the btn-group to distribute evenly & stretch the full width of the table row. I can add style="width:100px;" to each button, but that's not responsive, and I don't necessarily know the width of the full table.
Can anyone see what I need to add to my code?
<thead>
<tr>
<th colspan="31">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">Jan</button>
<button type="button" class="btn btn-default">Feb</button>
<button type="button" class="btn btn-default">Mar</button>
<button type="button" class="btn btn-default active">Apr</button>
<button type="button" class="btn btn-default">May</button>
<button type="button" class="btn btn-default">Jun</button>
<button type="button" class="btn btn-default">Jul</button>
<button type="button" class="btn btn-default">Aug</button>
<button type="button" class="btn btn-default">Sep</button>
<button type="button" class="btn btn-default">Oct</button>
<button type="button" class="btn btn-default">Nov</button>
<button type="button" class="btn btn-default">Dec</button>
</div>
</div>
</th>
</tr>
</thead>
Here is the css tag I changed from the Bootstrap 3 defaults:
.btn-group {
width:100%;
}
.btn-toolbar {
width:100%;
}
If I use btn-group-justified, it looks like this:
Add the following class to the parent container: .btn-group-justified
<thead>
<tr>
<th colspan="31">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group btn-group-justified">
<button type="button" class="btn btn-default">Jan</button>
<button type="button" class="btn btn-default">Feb</button>
<button type="button" class="btn btn-default">Mar</button>
<button type="button" class="btn btn-default active">Apr</button>
<button type="button" class="btn btn-default">May</button>
<button type="button" class="btn btn-default">Jun</button>
<button type="button" class="btn btn-default">Jul</button>
<button type="button" class="btn btn-default">Aug</button>
<button type="button" class="btn btn-default">Sep</button>
<button type="button" class="btn btn-default">Oct</button>
<button type="button" class="btn btn-default">Nov</button>
<button type="button" class="btn btn-default">Dec</button>
</div>
</div>
</th>
</tr>
and for even more reference, read the following part of the documentation:
http://getbootstrap.com/components/#btn-groups-justified