Chip Chip - 5 months ago 40
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>
<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 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 class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-primary">Sign Up</button>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="">
<!-- jQuery library -->
<script src=""></script>
<!-- Latest compiled JavaScript -->
<script src=""></script>
<link href="styles.css" rel="stylesheet">


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>

.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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download