How to set up the center of the Bootstrap panel on a web page?

Question

I would like to align this entire center of the web page panel. Can anyone help me with this?

Also, could you help me with a good book that I can use to study 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> 

thanks
Swetha

Answer 1

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

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

Answer 2

just add

position: fixed

and he will keep him in sight, even if you scroll down. see http://jsfiddle.net/xyrkyxe8/

 #mydiv { position:fixed; top: 50%; left: 50%; width:30em; height:18em; margin-top: -9em; /*set to a negative number 1/2 of your height*/ margin-left: -15em; /*set to a negative number 1/2 of your width*/ border: 1px solid #ccc; background-color: #f3f3f3; } 

Answer 3

It is worth saying that to center a panel or even a group of panels, you can also use a combination of the flex property and justify-content :

 .row-fluid { display: flex; justify-content: center; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row text-center row-fluid"> <div class="col-xs-3"> <div class="panel panel-default"> <div class="panel-heading">Panel 1</div> <div class="panel-body"> <ul class="list-group"> <li class="list-group-item">Line 1</li> <li class="list-group-item">Line 2</li> </ul> </div> </div> </div> <div class="col-xs-3"> <div class="panel panel-default"> <div class="panel-heading">Panel 2</div> <div class="panel-body"> <ul class="list-group"> <li class="list-group-item">Line 1</li> <li class="list-group-item">Line 2</li> </ul> </div> </div> </div> <div class="col-xs-3"> <div class="panel panel-default"> <div class="panel-heading">Panel 3</div> <div class="panel-body"> <ul class="list-group"> <li class="list-group-item">Line 1</li> <li class="list-group-item">Line 2</li> </ul> </div> </div> </div> </div> </div>