CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
mskuratowski
mskuratowski

Reputation: 4124

How to center form in bootstrap 3

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>

Upvotes: 66

Views: 326010

Answers (10)

Alexius The Coder
Alexius The Coder

Reputation: 103

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;
}

Original code

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>

Upvotes: 0

John Davis
John Davis

Reputation: 31

Wrap whatever you are trying to center around this div.

<div class="position-absolute top-50 start-50 translate-middle"></div>

https://getbootstrap.com/docs/5.0/utilities/position/

Upvotes: 1

user7288944
user7288944

Reputation: 91

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>

Upvotes: 6

Sid
Sid

Reputation: 2582

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.

Upvotes: 223

idirsun
idirsun

Reputation: 604

<div class="col-md-4 offset-md-4"> 
put your form here
</div>

Upvotes: -3

Tavasunny
Tavasunny

Reputation: 11

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>

Upvotes: -1

sujithuix
sujithuix

Reputation: 264

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%);
}

Upvotes: 5

user2431058
user2431058

Reputation: 115

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.

Upvotes: 8

Ammar
Ammar

Reputation: 693

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>

Upvotes: 4

NoobEditor
NoobEditor

Reputation: 15921

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!

Upvotes: 63

Related Questions