Я хочу, чтобы моя форма Bootstrap была выровнена по центру, я использовал стандартные классы BS Form, но форма всегда выровнена по левому краю

Question

Я использовал различные классы для поля:0 авто, и для выравнивания по центру, но не работал.

 <div class="container">
    <div class="col-md-12 newsletter">
                <form action="#" method="post">                   
                    <div class="form-group col-md-6 col-xs-10 col-sm-10 col-lg-4">
                             <label for="email">Email address:</label>
                             <input type="email" class="form-control" id="email">
                        </div>

              <div class="clearfix"></div>

                        <div class="form-group col-md-6 col-xs-10 col-sm-10 col-lg-4">
                            <label for="email">Email address:</label>
                            <input type="email" class="form-control" id="email">
                        </div>
                </form> 
              </div>
       </div>

Answer 1

Вы можете добавить -offset- class к div с помощью col-классов. Например:

<div class="form-group col-md-offset-4 col-md-6 col-xs-10 col-sm-10 col-lg-4">

col-md-offset-4 добавит дополнительное пространство, поэтому ввод с меткой будет центрирован. Для получения дополнительной информации прочитайте эту документацию

UPD Вы также можете использовать flexbox. Примените этот стиль CSS к своему коду:

.newsletter {
  display: flex;
  justify-content: center;
}

Но имейте в виду, что вам нужно будет удалить классы начальной загрузки (col-md, col-xs и т. Д.) Из div с именем класса form-group. Вы можете посмотреть рабочий пример с flexbox здесь

HTML:

<div class="container">
    <div class="col-md-12 newsletter">
                <form action="#" method="post">                   
                    <div class="form-group">
                             <label for="email">Email address:</label>
                             <input type="email" class="form-control" id="email">
                        </div>

              <div class="clearfix"></div>

                        <div class="form-group">
                            <label for="email">Email address:</label>
                            <input type="email" class="form-control" id="email">
                        </div>
                </form> 
              </div>
       </div>

CSS:

.newsletter {
  display: flex;
  justify-content: center;
}

Answer 2

Попробуй это:

Проверьте Демо здесь

HTML:

<div class="container">
  <div class="row">
    <div class="section-form">
      <div class="col-md-12 newsletter">
        <form action="#" method="post">
          <div class="form-group">
            <label for="email">Email address:</label>
            <input type="email" class="form-control" id="email">
          </div>

          <div class="clearfix"></div>

          <div class="form-group">
            <label for="email">Email address:</label>
            <input type="email" class="form-control" id="email">
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

CSS:

.section-form {
  max-width:550px;
  margin:auto;
}