wrkbrs

부트스트랩 Form 가운데 정렬 본문

Bootstrap

부트스트랩 Form 가운데 정렬

zcarc 2019. 1. 21. 02:48

How to center form in bootstrap 3



53

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>
   
improve this question
47

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!

improve this answer
191

There is 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 main column. col-md-offset-4 add one column ( of width of 4 bootstrap column) to both sides of main column.

improve this answer
  • 5
    This is clearly the correct answer, and is even done in a "bootstrap-ish" way. – Yan Paulo Aug 7 '17 at 22:30
  • agreed with you @Donato, years gap may be kept it from getting marked!! – NoobEditor Nov 21 '17 at 10:55
  • It does not work when the element to align is longer than the width of the actual width of centered <div class="col-md-4 col-md-offset-4">. But I just decrease the offset and it does the work, thanks. – WesternGun Dec 15 '17 at 8:53 
  • Note that you have to add one div above and one after the deiv you are working on – Luigi Lopez Apr 4 '18 at 4:49
  • 1
    This solution is not very good because it makes your div take up 4 columns which won't look good in some screen sizes. When you have a mostly empty page with a centered form in the exact middle, it is best to have set a width to the div. – Calicoder May 2 '18 at 22:39
8

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.

improve this answer
6

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>

improve this answer
2

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%);
}
improve this answer
1

Use d-flex in the container class and then add justify-content-center and align-items-center.

<div class="d-flex justify-content-center align-items-center container ">  
   <div class="row ">
        <form action="">
            <div class="form-group">
                <label for="inputUserName" class="control-label">Enter UserName</label>
                <input type="email" class="form-control" id="inputUserName" aria-labelledby="emailnotification">
                <small id="emailnotification" class="form-text text-muted">Enter Valid Email Id</small>
            </div>
            <div class="form-group">
                <label for="inputPassword" class="control-label">Enter Password</label>
                <input type="password" class="form-control" id="inputPassword" aria-labelledby="passwordnotification">
            </div>
        </form>
    </div>
</div>
improve this answer
0

Just use the centre tag:

<center>StackOverflow centered</center>

improve this answer
-1

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>
improve this answer


저작자표시 비영리 변경금지

'Bootstrap' 카테고리의 다른 글

패널 안에 있는 이미지 가운데 정렬  (0) 2019.01.21
폼 그룹 너비 맞추기 how to format bootstrap input form - all labels with the same width  (0) 2019.01.21
Difference between input-group and form-group  (0) 2019.01.15
부트스트랩4 튜토리얼  (0) 2018.12.30
부트스트랩 강좌 티스토리  (0) 2018.10.30
'Bootstrap' Related Articles more