Align text input in to right in twitter bootstrap?

Question

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:

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>

Do you want the 'Text 1' to be aligned to the right? or the ''? — kevin b., Mar 23 '17 at 12:57
Possible duplicate of http://stackoverflow.com/questions/18086468/align-text-to-right-in-td-tag — Ajay Singh, Mar 23 '17 at 13:01
Possible duplicate of [align text to right in td tag](http://stackoverflow.com/questions/18086468/align-text-to-right-in-td-tag) — Ajay Singh, Mar 23 '17 at 13:02

Carol Skelly · Accepted Answer · 2018-04-02T11:14:21.730

6

No extra CSS is needed just use Bootstrap pull-right:

https://jsfiddle.net/cp1tvuj3/

<div class="form-group">
          <input style="width:60px" type="number" class="form-control pull-right" value="test">
</div>

Updated fiddle

text-right won't work because the form-control is display: block

The original question was for Bootstrap 3. In Bootstrap 4, pull-right is now float-right.

edited Apr 02 '18 at 11:14

answered Mar 23 '17 at 12:57

Carol Skelly

351,302
90
710
624

1

`pull-right` has been replaced by `float-right` in Bootstrap 4 https://getbootstrap.com/docs/4.0/migration/#utilities. – DevonDahon Apr 02 '18 at 10:53

score 2 · Answer 2 · answered Mar 23 '17 at 13:04

add inline-block to your div element, by default the div is a block element so it takes the complete width of its parent

 <div class="form-group" style="text-align: right;display:inline-block;">
          <input style="width:60px" type="number" class="form-control" value="test">
 </div>

https://jsfiddle.net/RACCH/y9fvo4dj/

Theodore K. · Answer 3 · 2017-03-23T13:06:11.050

Seems like just adding float: right; does the trick, see

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>
<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; float:right">
          <input style="width:60px" type="number" class="form-control" value="test">
        </div>
      </td>
    </tr>
  </tbody>
</table>

score 0 · Answer 4 · answered Mar 23 '17 at 13:03

0

Giving the div around the input field inside your td a style of

display:inline-block;

also fixes your problem without having any floats to potentially break other things.

https://jsfiddle.net/DTcHh/31202/

answered Mar 23 '17 at 13:03

mikeg542

423
3
17

score 0 · Answer 5 · answered Mar 23 '17 at 13:08

0

You need to add bootstrap class ie. "pull-right" find the code fiddle :

    `https://jsfiddle.net/DTcHh/31204/e`

answered Mar 23 '17 at 13:08

Bhuneshwar Nirmalkar

1
1

DevonDahon · Answer 6 · 2018-04-02T11:02:47.747

0

These two solutions worked for me with a Bootstrap 4 table:

Either:

<td>
    <div class="float-right">
        <input>
    </div>
</td>

Or:

<td class="text-right">
    <div class="d-inline-flex">
        <input>
    </div>
</td>

edited Apr 02 '18 at 11:02

answered Apr 02 '18 at 10:49

DevonDahon

7,460
6
69
114

Align text input in to right in twitter bootstrap?

6 Answers6