I am trying to align the Text Input to the right and for some reason it is not doing this.
I have used style="text-align: right"
in <td>
See example:
https://jsfiddle.net/DTcHh/31200/
Code
<table class="table">
<thead>
<tr>
<th>Field 1</th>
<th style="text-align:right">Field 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Text 1</td>
<td style="text-align: right">
<div class="form-group" style="text-align: right">
<input style="width:60px" type="number" class="form-control" value="test">
</div>
</td>
</tr>
</tbody>
</table>
6
Answers
No extra CSS is needed just use Bootstrap
pull-right
:https://jsfiddle.net/cp1tvuj3/
Updated fiddle
text-right
won’t work because theform-control
isdisplay: block
The original question was for Bootstrap 3. In Bootstrap 4, pull-right is now float-right.
Seems like just adding
float: right;
does the trick, seeGiving the div around the input field inside your td a style of
also fixes your problem without having any floats to potentially break other things.
https://jsfiddle.net/DTcHh/31202/
add inline-block to your div element, by default the div is a block element so it takes the complete width of its parent
https://jsfiddle.net/RACCH/y9fvo4dj/
You need to add bootstrap class ie. “pull-right”
find the code fiddle :
These two solutions worked for me with a Bootstrap 4 table:
Either:
Or: