How to centralize a panel in the middle?

Question

I am learning bootstrap for the first time. I am having difficulty to centralize a panel in the middle of the page for a login.

Example:

<div class="container">
    <div style='width:500px' class="panel panel-default">

        <div class="panel-heading">Login</div>
        <div class="panel-body">
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label class="col-sm-2 control-label">Login</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="inputEmail">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">Password</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="inputPassword">
                    </div>
                </div>


                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" class="btn btn-lg btn-primary">Login</button>
                    </div>
                </div>
            </form>
        </div>

    </div>
</div>

How can it be done?

_centralize in the middle_... Can you centralize outside the middle? — putvande, Jul 30 '14 at 12:33

Suresh Karia · Answer 1 · 2014-07-30T13:08:04.720

1

See Your Modified Code >> Middle Panel

<div style='width:500px;margin:0 auto;' class="panel panel-default">

edited Jul 30 '14 at 13:08

answered Jul 30 '14 at 12:40

Suresh Karia

17,550
18
67
85

insilenzio · Answer 2 · 2014-07-30T13:30:08.090

1

Assign

.container { 
    width:100%; 
}

.panel-default{
    margin: 0 auto;
}

with margin: 0 auto it's possible to set margin to the div: 0 is refered to top and bottom, while auto is refered to left and right. With 0, will be added a margin of 0px (no margin at all). With auto you ask the browser to set an automatic calculated amount of pixel given the possibility to center the div into a div parent (.container). To apply auto, the div parent should have a width at least greater than its child. In this case, to center the child div to center of page, we should set parent's width to 100% (that means the same width of its container (in this case container of ".container" should be body!).

edited Jul 30 '14 at 13:30

answered Jul 30 '14 at 12:50

insilenzio

918
1
9
23

Please consider adding an explanation to this answer to improve it :-) – TylerH Jul 30 '14 at 13:13
I've added the explanation right now. I'm sorry, but I'm not the best in written english, I hope the explanation is clear enought! – insilenzio Jul 30 '14 at 13:31

score 0 · Answer 3 · answered Jul 30 '14 at 12:36

0

This is generally achieved by giving the div a specific width (percentage or fixed) as well as margin:0 auto;.

answered Jul 30 '14 at 12:36

FreeAsInBeer

12,937
5
50
82

How to centralize a panel in the middle?

3 Answers3