How to align bootstrap form at the center of the web page
Question
I'm using bootstrap styling for form. I want this form to be displayed at the center of the page but I'm not able to do it even though I tried margin 0 auto in css . Can anyone help.
This is the code:
<!doctype html> <html> <body> <h2>Form</h2> <br> <form class="form-horizontal inputForm"> <div class="form-group"> <label class="control-label col-sm-2" for="name">Name  </label> <div class="col-sm-2"> <input class="form-control" type="text"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="email">Email  </label> <div class="col-sm-2"> <input class="form-control" type="email"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button class="btn btn-primary">Sign Up</button> </div> </div> </form> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="styles.css" rel="stylesheet"> </body> </html>
Screenshot of my browser displaying the above form:
2 answers
solution1
1 2017-09-24 22:00:13
If you don't like to center body , put the form in a div and center that div.
body { text-align: center; border: 1px solid;} form { margin: auto; width: 200px; border: solid blue; display: block;}
<!doctype html> <html> <body> <h2>Form</h2> <br> <form class="form-horizontal inputForm"> <div class="form-group"> <label class="control-label col-sm-2" for="name">Name  </label> <div class="col-sm-2"> <input class="form-control" type="text"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="email">Email  </label> <div class="col-sm-2"> <input class="form-control" type="email"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button class="btn btn-primary">Sign Up</button> </div> </div> </form> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="styles.css" rel="stylesheet"> </body> </html>
solution2
1 ACCPTED 2017-09-24 22:33:36
Try this. I've wrapped the form with
<div class="container">
<div class="row">
<div class="col-md-4 mx-auto"></div>
</div>
</div>
.mx-auto centers the column automatically and inside the column you can add your form that has .col-3 and col-9, in my example. But adjust it according to how you need the label and input to be shown.
Here is the CodePen .
Edit: I've realized you're using Bootstrap 3, not 4. In that case, you can try something like this, but it needs a bit of work on mobile. CodePen .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.