Center Bootstrap Форма обратной связи

Question

Я настраиваю контактную форму и хочу, чтобы эта форма была в центре моей страницы. Но я не хочу всю ширину (col-md-12) страницы. Мне нужна только ширина col-md-6 в центре страницы. Проблема в том, что, поскольку я выбираю col-md-6, форма отображается в левой части страницы. Как мне это отцентрировать?

HTML:

<div class="container">
    <div class="row">
        <div class="col-md">
            <form action="contact" method="post"> {{--action = where the data must go--}}

                <div class="form-group">
                    <label for="name">Name:</label>
                    <input type="text" class="form-control" id="name" placeholder="Your Name">
                </div>
                <div class="form-group">
                    <label for="email">Email address:</label>
                    <input type="email" class="form-control" id="email" placeholder="name@example.com">
                </div>
                <div class="form-group">
                    <label for="mobile">Mobile Nr:</label>
                    <input type="email" class="form-control" id="mobile" placeholder="Mobile Nr should start with 08, 07 or 06">
                </div>
                <div class="form-group">
                    <label for="message">Your message...</label>
                    <textarea class="form-control" id="message" rows="3"></textarea>
                </div>

            </form>
        </div>
    </div>
</div>

Answer 1

Попробуйте добавить класс "m-auto" в ваш col-md-6 div.Как это:

<div class="container">
<div class="row">
    <div class="col-md-6 m-auto">
        <form action="contact" method="post"> {{--action = where the data must go--}}

            <div class="form-group">
                <label for="name">Name:</label>
                <input type="text" class="form-control" id="name" placeholder="Your Name">
            </div>
            <div class="form-group">
                <label for="email">Email address:</label>
                <input t`enter code here`ype="email" class="form-control" id="email" placeholder="name@example.com">
            </div>
            <div class="form-group">
                <label for="mobile">Mobile Nr:</label>
                <input type="email" class="form-control" id="mobile" placeholder="Mobile Nr should start with 08, 07 or 06">
            </div>
            <div class="form-group">
                <label for="message">Your message...</label>
                <textarea class="form-control" id="message" rows="3"></textarea>
            </div>

        </form>
    </div>
</div>

Answer 2

Самый простой способ, который я вижу, это добавить еще два деления с col-md-3 по обе стороны от вашей формы div следующим образом:

<div class="container">
<div class="row">
    <div class="col-md-3">
    </div>
    <div class="col-md-6">
        <form action="contact" method="post"> {{--action = where the data must go--}}

            <div class="form-group">
                <label for="name">Name:</label>
                <input type="text" class="form-control" id="name" placeholder="Your Name">
            </div>
            <div class="form-group">
                <label for="email">Email address:</label>
                <input type="email" class="form-control" id="email" placeholder="name@example.com">
            </div>
            <div class="form-group">
                <label for="mobile">Mobile Nr:</label>
                <input type="email" class="form-control" id="mobile" placeholder="Mobile Nr should start with 08, 07 or 06">
            </div>
            <div class="form-group">
                <label for="message">Your message...</label>
                <textarea class="form-control" id="message" rows="3"></textarea>
            </div>

        </form>
    </div>
    <div class="cold-md-3">
    </div>
</div>