How to align Bootstrap panel center of a web page?

Question

I would like to align this entire panel center of the web page. Could someone help me out on this?

Also could you please help me a good book I can use to learn Bootstrap design?

<div class="panel panel-default" style="max-width:500px;margin-left:auto;margin-right:auto;">
            <div class="panel-heading">
                <h3 class="panel-title text-center">User Login</h3>
            </div>
            <div class="panel-body">
                @Html.ValidationSummary(true)

                <table class="table">
                    <tbody>
                        <tr>
                            <td>@Html.LabelFor(model => model.Username)</td>
                            <td>@Html.EditorFor(model => model.Username)</td>
                            <td>@Html.ValidationMessageFor(model => model.Username)</td>                            
                        </tr>
                        <tr>
                            <td>@Html.LabelFor(model => model.Password)</td>
                            <td>@Html.EditorFor(model => model.Password)</td>
                            <td>@Html.ValidationMessageFor(model => model.Password)</td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <input type="submit" value="Login" class="btn btn-default" style="" />
                            </td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>             

            </div>
        </div>

Thanking you
Swetha

Answer 1

You can remove css style from panel and wrap this as follows.

<div class="col-sm-6 col-sm-offset-3">
  <div class="panel panel-default">
    ...
  </div>
</div>