center form in Bootstrap Modal
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.
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.
Related videos on Youtube
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, 2022Comments
-
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">×</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 inputsstyle="margin 0 auto;"
Like thisor added an id with
display: inline-block;
and class withtext-align: center
but all other solutions didn't worked for me. -
Bernd over 9 yearsHey, thanks for the answer but i want the complete input field with label in the middle of the modal...!
-
JarODirt over 9 yearsOh, 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