Как создать форму в бутстрапе 3

Как я могу централизовать мою регистрационную форму? Я использую столбец начальной загрузки, но он не работает.

Вот мой код:

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

Ответ 1

Простым способом является добавление

.center_div{
    margin: 0 auto;
    width:80% /* value of your choice which suits your alignment */
}

вам класс .container.Add width:xx % к нему, и вы получите идеально центрированный div!

например:

<div class="container center_div">

но я чувствую, что по умолчанию container центрируется в BS!

Ответ 2

В бутстрапе есть простой способ сделать это. Всякий раз, когда мне нужно создать div-центр на странице, я делю все столбцы на 3 (общие столбцы начальной загрузки = 12, разделенные на 3 → > 12/3 = 4). Разделение на четыре дает мне три столбца. то я положил свой div в средний столбец. И вся эта математика выполняется таким образом:

<div class="col-md-4 col-md-offset-4">my div here</div>

col-md-4 делает один столбец из 4 столбцов начальной загрузки. Скажем, это главный столбец. col-md-offset-4 добавить один столбец (шириной 4 столбца начальной загрузки) в обе стороны основного столбца.

Ответ 3

Всего столбцов в строке должно быть до 12. Таким образом, вы можете сделать col-md-4 col-md-offset-4. Таким образом, вы разбиваете свои столбцы на 3 группы по 4 столбца каждый. Прямо сейчас у вас есть форма из 4 столбцов со смещением на 6, так что вы получаете только 2 столбца в правой части формы. Вы также можете сделать col-md-8 col-md-offset-2, который предоставит вам 8-ти столбцовую форму с 2-мя столбцами в каждом левом и правом пространстве или col-md-6 col-md-offset-3 (6-ти столбцовая форма с 3 столбцами на каждой стороне) и т.д.

Ответ 4

используйте центрированный класс со смещением-6, как показано ниже.

<body class="container">
<div class="col-lg-1 col-offset-6 centered">
    <img data-src="holder.js/100x100" alt="" />
</div>

Ответ 5

Полагаю, вы пытаетесь центрировать форму как по горизонтали, так и по вертикали относительно любого контейнера div.

Вам не нужно использовать bootstrap для этого. Просто используйте популярный метод (ниже), чтобы центрировать форму.

.container{
 position relative;
}
.form{
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
}

Ответ 6

Bootstrap 4 используйте horizontal-centering

HTML:

<!-- 
    mx-auto: Bootstrap class
    my-form: Your class
-->
<div class="my-form mx-auto">
    <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>

CSS

.my-form{
    width: 30%; /* value of your choice */
}

Ответ 7

Используйте d-flex в классе container а затем добавьте justify-content-center и 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>

Ответ 8

Просто используйте центральную метку:

<center>StackOverflow centered</center>

Ответ 9

я пробую это его работа

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

Ответ 10

если вы настаиваете на использовании Bootstrap, используйте d-inline-block как показано ниже

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

Ответ 11

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