skip to Main Content

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


  1. 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. 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. 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. 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. 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. 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