user3595632 user3595632 - 3 months ago 20
CSS Question

Bootstrap grid system works strangely

This is my code :

<div id="loginbox" class="mainbox col-md-6 col-md-offset-3 ">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Sign In</div>
<div class="forget"><a href="#">Forgot password?</a></div>
</div>

<div class="panel-body" >
<div id="login-alert" class="alert alert-danger col-sm-12"></div>
<form id="loginform" class="form-horizontal" role="form">
<!-- id / pw -->
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="password">
</div>

<div class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<div class="row">
<a id="btn-login" href="#" class="btn btn-success col-xs-12"> Login</a>
<a id="btn-fblogin" href="#" class="btn btn-primary col-xs-12"><i class="icon-facebook"></i>Login with Facebook</a>
</div>
</div>
</div>

<div class="form-group">
<div class="col-md-12 control">
<div class="signup">
Don't have an account?
<a href="#" id="signuplink">
Sign Up Here
</a>
</div>
</div>
</div>
</form>
</div> <!-- <div style="padding-top:30px" class="panel-body" > -->
</div>
</div>


The only thing that I changed is
<div id="loginbox" class="mainbox col-md-6 col-md-offset-3 ">


And here is before/after :
enter image description here
enter image description here

Before I inserted
col-md-6 col-md-offset-3
, the blue-shaded box looks balanced.
After I inserted
col-md-6 col-md-offset-3
, it looks unbalanced.

Why does it happen? I think that grid should work well(login box should be located at center" because it means `3(offset) - 6 - 3(offset)'.

Need your help.

Answer

Its because your loginbox does not have 12 columns in total as you specified 6+3(offset) =9

I would suggest this way as I dont like using offset

<div class="col-md-3 "></div>
<div id="loginbox" class="mainbox col-md-6">
    <div class="panel panel-info">
        <div class="panel-heading">
            <div class="panel-title">Sign In</div>
            <div class="forget"><a href="#">Forgot password?</a></div>
        </div>

        <div class="panel-body" >
            <div id="login-alert" class="alert alert-danger col-sm-12"></div>
            <form id="loginform" class="form-horizontal" role="form">
                <!-- id / pw -->
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                    <input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">
                </div>
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                    <input id="login-password" type="password" class="form-control" name="password" placeholder="password">
                </div>

                <div class="form-group">
                    <!-- Button -->
                    <div class="col-sm-12 controls">
                            <div class="row">
                                <a id="btn-login" href="#" class="btn btn-success col-xs-12"> Login</a>
                                <a id="btn-fblogin" href="#" class="btn btn-primary col-xs-12"><i class="icon-facebook"></i>Login with Facebook</a>
                            </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-md-12 control">
                        <div class="signup">
                            Don't have an account?
                            <a href="#" id="signuplink">
                                Sign Up Here
                            </a>
                        </div>
                    </div>
                </div>
            </form>
        </div>  <!-- <div style="padding-top:30px" class="panel-body" > -->
    </div>
</div>
<div class="col-md-3 "></div>