How to center Bootstrap form

Question

I have this form:

<form style="margin-top:20px">

            <div class="row form-group">
                <div class="col-lg-3">
                    <label for="exampleInputEmail1">Original Amount</label>
                    <div class="input-group">
                        <div class="input-group-addon" id="OriginalAmountAddon">$</div>
                        <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
                    </div>
                </div>

                <div class="col-lg-3">
                    <label for="exampleInputEmail1">Billing Amount</label>
                    <div class="input-group">
                        <div class="input-group-addon" id="BillingAmountAddon">$</div>
                        <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
                    </div>
                </div>
            </div>

            <div class="row form-group">
                <div class="col-lg-3">
                    <label for="exampleInputEmail1">Original Currency Code</label>
                    <div class="input-group">
                        <div class="input-group-addon" id="OriginalCurrencyAddon">$</div>
                        <select class="form-control" id="OriginalCurrencySelect">
                            <option value="$">USD</option>
                            <option value="€">EUR</option>
                            <option value="£">GBP</option>
                            <option value="₪">ILS</option>
                        </select>
                    </div>
                </div>

                <div class="col-lg-3">
                    <label for="exampleInputEmail1">Billing Currency Code</label>
                    <div class="input-group">
                        <div class="input-group-addon" id="BillingCurrencyAddon">$</div>
                        <select class="form-control" id="BillingCurrencySelect">
                            <option value="$">USD</option>
                            <option value="€">EUR</option>
                            <option value="£">GBP</option>
                            <option value="₪">ILS</option>
                        </select>
                    </div>
                </div>
            </div></form>

It looks like this:

I want the whole form in the center, how to? Do I need to center each row separately? And another question, I want for example, the "Supllier Account" field, to be in the same lenght of the two fields above, how to?

Answer 1

This is basically a duplicate of a question that's already been asked many times..

Center a column using Twitter Bootstrap 3

To specifically center your form you can use column offsets like this, but there are several different methods for centering:

<div class="container">
    <div class="row">
        <div class="col-md-9 col-md-offset-3 col-sm-10 col-sm-offset-1">
            <form style="margin-top:20px">
                <div class="row form-group">
                    <div class="col-md-4">
                        <label for="exampleInputEmail1">Original Amount</label>
                        <div class="input-group">
                            <div class="input-group-addon" id="OriginalAmountAddon">$</div>
                            <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <label for="exampleInputEmail1">Billing Amount</label>
                        <div class="input-group">
                            <div class="input-group-addon" id="BillingAmountAddon">$</div>
                            <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
                        </div>
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-md-4">
                        <label for="exampleInputEmail1">Original Currency Code</label>
                        <div class="input-group">
                            <div class="input-group-addon" id="OriginalCurrencyAddon">$</div>
                            <select class="form-control" id="OriginalCurrencySelect">
                                <option value="$">USD</option>
                                <option value="€">EUR</option>
                                <option value="£">GBP</option>
                                <option value="₪">ILS</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <label for="exampleInputEmail1">Billing Currency Code</label>
                        <div class="input-group">
                            <div class="input-group-addon" id="BillingCurrencyAddon">$</div>
                            <select class="form-control" id="BillingCurrencySelect">
                                <option value="$">USD</option>
                                <option value="€">EUR</option>
                                <option value="£">GBP</option>
                                <option value="₪">ILS</option>
                            </select>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

http://www.codeply.com/go/sRbuCfloDX

Answer 2

When i want to do it, margin: 0 auto; works quite fine