Chip Chip - 22 days ago 10
CSS Question

How to align bootstrap form at the center of the web page

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 &nbsp</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 &nbsp</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:


enter image description here

Answer Source

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.