center form in Bootstrap Modal

13,529

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.

Share:
13,529

Related videos on Youtube

Bernd
Author by

Bernd

Hey guys! My name is Bernd and I am an student from an upper secondary technical and vocational college in Vienna, Austria.My hobbys are webdesigning and also programming in JavaScript(including jQuery and AJAX), Java, CSS, C# and last but not least PHP.And I am also an paramedic and soon I will start as first-aid trainer in addition to school.As you can see it makes me really fun to help people with their problems.Greetings from Austria

Updated on September 15, 2022

Comments

  • Bernd
    Bernd over 1 year

    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.

  • Bernd
    Bernd over 9 years
    Hey, thanks for the answer but i want the complete input field with label in the middle of the modal...!
  • JarODirt
    JarODirt over 9 years
    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