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.
Related
As title, I want to create a input-group for number increase/decrease.
This is my code:
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="0.9">
<div class="btn-group-vertical">
<button class="btn btn-primary btn-sm" type="button">+</button>
<button class="btn btn-primary btn-sm" type="button">-</button>
</div>
</div>
Result
Expected result
You need to add py-0 for remove top & bottom padding and lh-1 for decrease line height of button. Your code should be as below:
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="0.9">
<div class="btn-group-vertical">
<button class="btn btn-primary btn-sm py-0 lh-1" type="button">+</button>
<button class="btn btn-primary btn-sm py-0 lh-1" type="button">-</button>
</div>
</div>
add p-0 in button so the code will like this :
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="0.9">
<div class="btn-group-vertical">
<button class="btn btn-primary btn-sm p-0" type="button">+</button>
<button class="btn btn-primary btn-sm p-0" type="button">-</button>
</div>
</div>
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
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>
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>
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