Twitter Bootstrap Question posted in

Align text input in <td> to right in twitter bootstrap?

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>
Tags:

6

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 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/

    Login or Signup to reply.
  4. 0

    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/

    Login or Signup to reply.
  5. 0

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

        `https://jsfiddle.net/DTcHh/31204/e`
    Login or Signup to reply.
  6. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search