Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
143
rated 0 times [  149] [ 6]  / answers: 1 / hits: 14663  / 10 Years ago, thu, december 4, 2014, 12:00:00

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.


More From » jquery

 Answers
8

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.


[#40819] Wednesday, December 3, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
jocelynkarsynr

Total Points: 472
Total Questions: 98
Total Answers: 96

Location: Macau
Member since Mon, Nov 16, 2020
4 Years ago
jocelynkarsynr questions
Tue, Feb 8, 22, 00:00, 2 Years ago
Sat, Jul 11, 20, 00:00, 4 Years ago
Sun, May 10, 20, 00:00, 4 Years ago
Sat, Jan 18, 20, 00:00, 4 Years ago
;