center form in 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.

JarODirt · Accepted Answer · 2014-12-04T20:56:31.207

6

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.

edited Dec 04 '14 at 20:56

answered Dec 04 '14 at 20:35

JarODirt

157
11

Hey, thanks for the answer but i want the complete input field with label in the middle of the modal...! – Bernd Dec 04 '14 at 20:45
Oh, You have the columns messed up for that then. Here is an updated sample you might need to play around if you want the label on the side on full-screen [jsfiddle](http://jsfiddle.net/reh0ookq/3/) – JarODirt Dec 04 '14 at 20:53

Tim Lewis · Answer 2 · 2014-12-04T20:57:59.493

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.

center form in Bootstrap Modal

2 Answers2