How center input in form in bootstrap?

Question

I want to have two inputs ( login and password ). One under one, each about col-sm-6. I can't center this inputs without col-sm-offset-3. With offset It really works, but I want to center this inputs on every screens. Maybe I shoul add somewhere .center > Or margin auto? But where...

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">

  <div class="row">
    <div class="box">
      <div class="col-lg-12">
        <hr>
        <h4 class="text-center">Logowanie</h4>
        <hr>
        <form method="post" role="form" class="form-horizontal">
          {{ csrf_field() }}
          <div class="row">
            <div class="form-group">
              <div class="col-sm-6">
                <input type="email" class="form-control" name="email" placeholder="email">
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-6">
                <input type="email" class="form-control" name="email" placeholder="email">
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Solution 1

The use the offset on all screens by using the xs tier..

http://www.bootply.com/P31H4uF1QG

         <form method="post" role="form" class="form-horizontal">
                    {{ csrf_field() }}
                  <div class="form-group">
                    <div class="col-xs-6 col-xs-offset-3">
                      <input type="email" class="form-control" name="email">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-xs-6 col-xs-offset-3">
                      <input type="email" class="form-control" name="email" placeholder="email">
                    </div>
                  </div>
         </form>

Also, don't use both row and form-group, since the form-group works like a row to contain col-*

Solution 2

If you don't want to use offset you can use a centered class I call it .centered and this as a wrapper to the content you wanted to center.

See the example below:

.centered {
  display: flex;
  align-items: center;
  justify-content: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">

  <div class="row">
    <div class="box">
      <div class="col-lg-12">
        <hr>
        <h4 class="text-center">Logowanie</h4>
        <hr>
        <form method="post" role="form" class="form-horizontal">
          {{ csrf_field() }}
            <div class="form-group centered">
              <div class="col-sm-6">
                <input type="email" class="form-control" name="email" placeholder="email">
              </div>
            </div>
            <div class="form-group centered">
              <div class="col-sm-6">
                <input type="email" class="form-control" name="email" placeholder="email">
              </div>
            </div>
        </form>
      </div>
    </div>
  </div>
</div>

Solution 3

Inputs have width: 100% by default in Bootstrap. So, you need to override this style property(for example set width:50%) and add center or text-center class to parent element, and it is always will be centered.

But I highly recommend you to use column:

 <div class="col-xs-offset-3 col-xs-6 col-md-offset-4 col-md-4">
 <input type="email" class="form-control" name="email" placeholder="email">
 </div>

Solution 4

Use the offset with small for all screen and wrap form in this div

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="box">
            <div class="col-lg-12">
                <hr>
                <h4 class="text-center">Logowanie</h4>
                <hr>
                <div class="row">
                  <div class="col-sm-offset-3 col-sm-6">
                    <form method="post" role="form" class="form-horizontal">
                        {{ csrf_field() }}
                      <div class="form-group">
                        <div class="col-sm-12">
                          <input type="email" class="form-control" name="email" placeholder="email">
                        </div>
                      </div>
                      <div class="form-group">
                        <div class="col-sm-12">
                          <input type="email" class="form-control" name="email" placeholder="email">
                        </div>
                      </div>                        
                    </form>
                  </div>
                </div>
            </div>
        </div>
    </div>
</div> 

View more solutions