How to center form in bootstrap 3
HtmlCssTwitter BootstrapTwitter Bootstrap-3Html Problem Overview
How can I center my login form ? I'm using bootstrap column but it's not working.
Here is my code:
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-6">
<h2>Log in</h2>
<div>
<table>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
</table>
</div>
</div>
</div>
</div>
Html Solutions
Solution 1 - Html
There is a simple way of doing this in Bootstrap. Whenever I need to make a div center in a page, I divide all columns by 3 (total Bootstrap columns = 12, divided by 3 >>> 12/3 = 4). Dividing by four gives me three columns. Then I put my div in middle column. And all this math is performed by this way:
<div class="col-md-4 col-md-offset-4">my div here</div>
col-md-4 makes one column of 4 Bootstrap columns. Let's say it's the main column. col-md-offset-4 adds one column (of width of 4 Bootstrap column) to both sides of the main column.
Solution 2 - Html
A simple way is to add
.center_div{
margin: 0 auto;
width:80% /* value of your choice which suits your alignment */
}
to you class .container.Add width:xx % to it and you get perfectly centered div!
eg :
<div class="container center_div">
but i feel that by default container is centered in BS!
Solution 3 - Html
The total columns in a row has to add up to 12. So you can do col-md-4 col-md-offset-4. So your breaking up your columns into 3 groups of 4 columns each. Right now you have a 4 column form with an offset by 6 so you are only getting 2 columns to the right side of your form. You can also do col-md-8 col-md-offset-2 which would give you a 8 column form with 2 columns each of space left and right or col-md-6 col-md-offset-3 (6 column form with 3 columns space on each side), etc.
Solution 4 - Html
I Guess you are trying to center the form both horizontally and vertically with respect to the any container div.
You don't have to make use of bootstrap for it. Just use the popular method (below) to center the form.
.container{
position relative;
}
.form{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
Solution 5 - Html
use centered class with offset-6 like below sample.
<body class="container">
<div class="col-lg-1 col-offset-6 centered">
<img data-src="holder.js/100x100" alt="" />
</div>
Solution 6 - Html
I tried this and it worked
<div class="container">
<div class="row justify-content-center">
<div class="form-group col-md-4 col-md-offset-5 align-center ">
<input type="text" name="username" placeholder="Username" >
</div>
</div>
</div>
Solution 7 - Html
Many people advise using col- and col-offset- classes, but it doesn't work right for me, it centers the form only for a certain screen size, but if you change it, the markup slides out.
I found two ways to align form:
Use a custom CSS:
<div class=".center">
<form>
</form>
</div>
.center {
margin: 0 auto;
width: 100%;
}
form {
margin: 0 auto;
width: 500px; /*find your value*/
text-align: center;
}
OR just copy a CSS class "justify-content-center" from bootstrap 4, it's very short:
.justify-content-center {
-ms-flex-pack: center !important;
justify-content: center !important;
}
And then use it:
<div class="container">
<div class="row">
<div class="form-inline justify-content-center">
</div>
</div>
</div>
Solution 8 - Html
Wrap whatever you are trying to center around this div.
<div class="position-absolute top-50 start-50 translate-middle"></div>
Solution 9 - Html
if you insist on using Bootstrap, use d-inline-block like below
<div class="row d-inline-block">
<form class="form-inline">
<div class="form-group d-inline-block">
<input type="email" aria-expanded="false" class="form-control mr-2"
placeholder="Enter your email">
<button type="button" class="btn btn-danger">submit</button>
</div>
</form>
</div>
Solution 10 - Html
<div class="col-md-4 offset-md-4">
put your form here
</div>