Centering Bootstrap input fields
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
<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 -->
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
.
<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 -->
Demo fiddle
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:
.col-centered{
margin: 0 auto;
float: none;
}
Demo fiddle
Try applying this style to your div class="input-group"
:
text-align:center;
View it: Fiddle.