CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
SpringLearner
SpringLearner

Reputation: 13854

How to keep form at centre using bootstrap 2.2.2

In this bootply the welcome as well as the form is coming on the left hand side.But I want to bring it at the centre.Can any body please tell me how to do?

<form id="form1">
        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span1"></div>
                <div class="span10" style="margin-bottom: 6px; margin-top: 0px; background: #efeee9">
                    <img src="ui_resources/img/ title.jpg" alt="" align="left">
                    <h2 align="center" style="margin-top: 18px;"></h2>
                </div>
                <div class="span1"></div>
            </div>

            <div class="row-fluid">
                <div class="span1"></div>
                <div class="span10" style="background: #eee; border: 1px solid #ddd;">

                    <div class="span7 center login-header">
                    <h2 style="color:#E86537 " align="center">Welcome </h2>
                </div><!--/span-->
                        <div class="row-fluid">
                <div class="well span7 center login-box">
                    <div class="alert alert-info">
                        Please login with your Username and Password.
                    </div>




                        <fieldset>
                            <div class="input-prepend" title="Username" data-rel="tooltip" style="margin-left:80px;">
                                <span class="add-on"><i class="icon-user"></i></span><input autofocus="" class="input-large span10" name="j_username" id="username" type="text" value="">
                            </div>
                            <div class="clearfix"></div>

                            <div class="input-prepend" title="Password" data-rel="tooltip" style="margin-left:80px;">
                                <span class="add-on"><i class="icon-lock"></i></span><input class="input-large span10" name="j_password" id="password" type="password" value="">
                            </div>
                            <div class="clearfix"></div>

                            <div class="input-prepend" style="margin-left:80px;">
                            <label class="remember" for="remember"><input type="checkbox" id="remember" style="display:">Remember me</label>
                            </div>
                            <div class="clearfix"></div>

                            <p class="center span6" style="margin-left:80px;">
                            <button type="submit" class="btn btn-primary">Login</button>
                            New User<a href="/NewPatient">register</a>
                            </p>
                        </fieldset>

                </div><!--/span-->
            </div><!--/row-->


            </div><!--/row-->




                </div>
                <div class="span1"></div>
            </div></form>
            <div class="row-fluid">
                <div class="span1"></div>
                <div class="span10" style="margin-top: 6px;">
                <div class="span1"></div>

                </div>

            </div>

Upvotes: 0

Views: 943

Answers (3)

Felix
Felix

Reputation: 38112

Since .span* has float: left style by default, you can override it by using float:none;

.login-box {
    margin:0 auto;
    float:none;
}

margin:0 auto; is used to center your loginbox horizontally.

Upvotes: 1

James
James

Reputation: 4580

Try using this in your CSS

.row-fluid .login-header,
.row-fluid .login-box{
      float:none;
      margin:0 auto !important;
}

Upvotes: 1

MaiKaY
MaiKaY

Reputation: 4482

try to set your welcome div in another div like this

<div class="row-fluid">
    <div class="offset3 span6 center login-header">
        <h2 style="color:#E86537 " align="center">Welcome </h2>
    </div>
</div>

use offset

Move columns to the right using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.

DEMO

Upvotes: 2

Related Questions