Rectangle 27 0

html Centering Bootstrap input fields?


.col-centered{
    margin: 0 auto;
    float: none;
}
<div class="row">
    <div class="col-lg-4 col-lg-offset-4">
        <div class="input-group">
            <input type="text" class="form-control" /> 
            <span class="input-group-btn">
                <button class="btn btn-default" type="button">Go!</button>
            </span>
        </div><!-- /input-group -->
    </div><!-- /.col-lg-4 -->
</div><!-- /.row -->

+1 The best solution, which the boostrap provides for solving the question's propose.

@static I have updated my answer, I removed text-center because it wasn't serving any purpose since the only content here is a block element, I also added a better explanation of the offset approach and provided a new centering method that supports any column size.

@static This was posted during the Release Candidate period of Bootstrap 3 and then there were no size distinction for offsets, so the fiddle was working with col-offset-4, I don't know why in my answer I did write col-lg-offset-4 though, I remember there were some discrepancies between the documentation and the actual Bootstrap files back then, so it's possible I mixed them up.

Note that this technique only works for even column sizes (.col-X-2, .col-X-4, col-X-6, etc...), if you want to support any size you can use margin: 0 auto; but you need to remove the float from the element too, I recommend a custom CSS class like the following:

You can use offsets to make a column appear centered, just use an offset equal to half of the remaining size of the row, in your case I would suggest using col-lg-4 with col-lg-offset-4, that's (12-4)/2.

actually your solution based only on col-lg-4 col-lg-offset-4 (also please fix the col-lg-offset-4). So in your solution you need to calculate manually the offset based on the col--size. If it was calculated wrong the text-center will not help to center the element, so it is useless here as I played with this in the jsfiddle. waiting for feedback.

Note
Rectangle 27 0

html Centering Bootstrap input fields?


.col-lg-3 {
  width: 100%;
}
.input-group {
   width: 200px; // for exemple
   margin: 0 auto;
}

The whole point of bootstrap though is that .col-lg-3 takes up 3 columns. Changing the width to 100% breaks the whole thing.

Note
Rectangle 27 0

html Centering Bootstrap input fields?


div class="input-group"
text-align:center;
Note
Rectangle 27 0

html Centering Bootstrap input fields?


<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet" />
<div class="row">
  <div class="col-lg-3 center-block">
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-btn">
             <button class="btn btn-default" type="button">Go!</button>
         </span>
    </div>
    <!-- /input-group -->
  </div>
  <!-- /.col-lg-6 -->
</div>
<!-- /.row -->

The best way for centering your element it is using .center-block helper class. But must your bootstrap version not less than 3.1.1

Note
Rectangle 27 0

html Centering Bootstrap input fields?


<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet" />
<td style="background:#B3AEB5;">
  <div class="form-group text-center">
    <div class="input-group" style="margin:auto;">
      <input type="month" name="p2" value="test">
    </div>
  </div>
</td>

For me this solution worked well to center an input field in a TD:

Note
Rectangle 27 0

html Centering Bootstrap input fields?


<div class="row">
            <div class="col-lg-4"></div>
            <div class="col-lg-4">
                <div class="input-group">
                    <input type="text" class="form-control" /> 
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">Go!</button>
                    </span>
                </div><!-- /input-group -->
            </div><!-- /.col-lg-4 -->
            <div class="col-lg-4"></div>
        </div><!-- /.row -->

Just keep the middle div, like this: <div class="col-lg-4 col-lg-offset-4">....</div> Offset basically adds that empty div that you wrote....without having to write it

Ok, this is best solution for me. Bootstrap includes mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. So this worked perfectly on every browser and device:

You don't need the empty <div> tags, avoid the need of extra markup by using offset as I showed in my answer

Note