Centering Bootstrap input fields

Question

I am new with this, especially with Bootstrap. I have this code:

<div class="row">     <div class="col-lg-3">        <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 --> 

I need to put this input field and button in the center of the page:

This didn't work: "margin-left: auto; margin-right:auto;"

Does anyone have any ideas?

Answer 1

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

Answer 2

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