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>
This question is related to
html
css
twitter-bootstrap
twitter-bootstrap-3
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>
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>
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.
I tried this and it worked
<div class="container">_x000D_
<div class="row justify-content-center">_x000D_
<div class="form-group col-md-4 col-md-offset-5 align-center ">_x000D_
<input type="text" name="username" placeholder="Username" >_x000D_
</div>_x000D_
</div> _x000D_
</div>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%);
}
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>
Wrap whatever you are trying to center around this div.
<div class="position-absolute top-50 start-50 translate-middle"></div>
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.
<div class="col-md-4 offset-md-4">
put your form here
</div>
Source: Stackoverflow.com