Why does my Bootstrap input not align right?

Question

Why does my Bootstrap input not align right (=> see 3rd input with placeholder='Does not align right')?
The td table element has a style which defines the alignment...
When I remove the style element from the td element at set the input style text-align=right, it is still left aligned.

<div class="row">
    <div class="col-md-6">
        <div class="well" style="width:840px">
            <table class='table borderless' style="width:800px">
            <tr>
                <td colspan="2">
                    <input class="form-control input-sm" style="width:300px;margin-bottom:0px" type="text" name="input1" placeholder="Input 1">
                    <input class="form-control input-sm" style="width:300px;margin-bottom:0px" type="text" name="input2" placeholder="Input 2">
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: right">
                    <input class="form-control input-sm" style="width:300px;margin-bottom:0px" type="text" name="input3" placeholder="Does not align right">
                </td>
            </tr>
            <tr>
            </table>
        </div>
    </div>
</div>

Answer 1

Why does my Bootstrap input not align right?

Because .form-control will have display: block from bootstrap.min.css. As proof of this, if you make it an inline-block again it'll work:

.form-control { display: inline-block !important; }

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<div class="row">
    <div class="col-md-6">
        <div class="well" style="width:840px">
            <table class='table borderless' style="width:800px">
            <tr>
                <td colspan="2">
                    <input class="form-control input-sm" style="width:300px;margin-bottom:0px" type="text" name="input1" placeholder="Input 1">
                    <input class="form-control input-sm" style="width:300px;margin-bottom:0px" type="text" name="input2" placeholder="Input 2">
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: right">
                    <input class="form-control input-sm" style="width:300px;margin-bottom:0px" type="text" name="input3" placeholder="Does not align right">
                </td>
            </tr>
            <tr>
            </table>
        </div>
    </div>
</div>

What you probably really want is your controls to behave like that straight away. To do so make sure to utilize Bootstrap's form-inline, e.g. like this:

<div class="row form-inline">

Note that this affects the first row of inputs too. If you move the form-inline to a another spot you could choose to prevent that from happening.

Answer 2

That's because your input has it's display property set to block via the .form-control class. Block level elements will take up the whole width of their containing element. Even if a width is set, the remaining space is taken up by margin.

To get the input to align the way you would like change the display value to inline-block or add the class .pull-right to the input.

.form-control {
    display: inline-block;
}

<input type="text" class="form-control input-sm pull-right">