Bootstrap Modal中的中心形式

Question

My Question is, how to center the complete form ( input fields with labels ) in the modal.

Here is also the fiddle: http://jsfiddle.net/beernd/reh0ookq/ but the snippet here should also work.

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form name="useradd" class="form-horizontal" role="form" method="post"> <div class="modal show" id="useradd_modal"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> <h4 class="modal-title text-center text-danger">Adding a user</h4> </div><!-- /.modal-header --> <div class="modal-body"> <div class="form-group"> <label class="col-sm-2 col-md-2 control-label">Login-Name:</label> <div class="col-sm-4 col-md-4"> <input class="form-control" type="text" placeholder="Login-Name" value="" name="ua_loginname" required="required" /> </div> </div> <div class="form-group"> <label class="col-sm-2 col-md-2 control-label">Firstname:</label> <div class="col-sm-3 col-md-3"> <input class="form-control" type="text" placeholder="Firstname" value="" name="ua_fname" required="required"/> </div> </div> </div><!-- /.modal-body --> <div class="modal-footer"> <input class="btn btn-md btn-danger pull-left" data-dismiss="modal" type="submit" value="User add"/> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div><!-- /.modal-footer --> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> </form> 

I've tried many other solutions like adding style="text-align: center;" and adding to the inputs style="margin 0 auto;" Like this

or added an id with display: inline-block; and class with text-align: center but all other solutions didn't worked for me.

Answer 1

Use:

class="text-center"

See: [1]: http://jsfiddle.net/reh0ookq/1/

I have used it on the entire form, as well as one input

The above only works if you want just text/labels

The below will fix the entire input.

jsfiddle

The issue is the bootstrap columns system. If you want a column to be centered, you can give it the class "center-block" and then extend the column to be total for that row (12 is the max). If you want the label to appear next to the input in full screen, you will have to nest another row inside the center-block column div and handle further columns inside that.

Answer 2

If you're looking to center the actual inputs, you need some offsets. There isn't a col-*-* class that makes it appear in the center of the row, but you can use offsets as such:

Updated Bootply with Labels

<div class="container">
  <div class="panel panel-info">
    <div class="panel-heading">
      <h4>Pretend this is a Modal</h4>
    </div>
    <div class="panel-body">
      <div class="container-fluid">
        <div class="row">
          <div class="col-xs-2 col-xs-offset-2">
            <label>Login-Name</label>
          </div>
          <div class="col-xs-4">
            <input class="form-control" name="test1" placeholder="Login-Name" type="text">
          </div>
        </div>
        <div class="row">
          <div class="col-xs-2 col-xs-offset-2">
            <label>First Name</label>
          </div>
          <div class="col-xs-4">
            <input class="form-control" name="test2" placeholder="Firstname" type="text">
          </div>
        </div>
        <hr>
        <div class="row">
          <div class="col-xs-2">
            <label>Login-Name</label>
          </div>
          <div class="col-xs-10">
            <input class="form-control" name="test1" placeholder="Login-Name" type="text">
          </div>
        </div>
        <div class="row">
          <div class="col-xs-2">
            <label>First Name</label>
          </div>
          <div class="col-xs-10">
            <input class="form-control" name="test2" placeholder="Firstname" type="text">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

EDIT Labels added, 2 layouts proposed.