How To Center A Form Using Bootstrap?
I want to center a form containing two inputs(username and password):
Authentication
Solution 2:
Slim Hmidi Hi there, You were close with your class of .form-horizontal.
Using this will center the form in the middle of the page.
.center {
position: absolute;
left: 0;
right: 0;
margin: auto;
}
You will just now need to adjust the col-sm-xx within the form to fill and work correctly at all screen sizes.
Here is a screenshot, the blue div that holds the form is centered horizontally.
Here is the form with the classes in the form changed to fill and work on all screen sizes.
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><metaname="description"content=""><metaname="author"content=""><linkrel="icon"href="../../favicon.ico"><title>How to center a form using Bootstrap</title><!-- Bootstrap core CSS --><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"><style>body {
padding-top: 50px;
}
.spacer {
margin-top: 2%;
margin-bottom: 2%;
}
.block {
height: 300px;
padding-top: 15px;
background-color: darkorange;
}
.block2 {
min-height: 160px;
padding-top: 15px;
}
.center {
position: absolute;
/* top: 0;
bottom: 0; */left: 0;
right: 0;
margin: auto;
}
</style></head><body><navclass="navbar navbar-inverse navbar-fixed-top "><divclass="container"><divclass="navbar-header"><buttontype="button"class="navbar-toggle collapsed"data-toggle="collapse"data-target="#navbar"aria-expanded="false"aria-controls="navbar"><spanclass="sr-only">Toggle navigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand "href="#">Project name</a></div><divid="navbar"class="collapse navbar-collapse"><ulclass="nav navbar-nav navbar-right"><liclass="active"><ahref="#">Home</a></li><li><ahref="#about">About</a></li><li><ahref="#contact">Contact</a></li></ul></div><!--/.nav-collapse --></div></nav><divclass="container col-lg-12 spacer"></div><divclass="container col-lg-12 block"><divclass="row col-xs-6 block2 bg-primary center"><formmethod="post"action="/signin"class="form-horizontal"role="form"align="center"><divclass="form-group" ><labelclass="control-label col-sm-3"for="username">username<em>*</em></label><divclass="col-sm-8 col-xs-12"><inputtype="text"name="username"id="username"placeholder="username"required="true"class="form-control"/></div></div><divclass="form-group"><labelclass="control-label col-sm-3"for="password">password<em>*</em></label><divclass="col-sm-8 col-xs-12"><inputtype="password"name="password"id="password"required="true"class="form-control"/></div></div><divclass="form-group"><divclass="col-sm-offset-2 col-sm-8"><inputtype="submit"name="signin"id="signin"value="sign in"class="btn btn-default"/></div></div></form></div></div><!-- /.container --><!-- Bootstrap core JavaScript --><!-- Placed at the end of the document so the pages load faster --><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script></body></html>Solution 3:
Wrap the whole form in <div class="container">your form HTML</div>.
Like this: http://codepen.io/anon/pen/pJLrOq. Code centers form container to the middle of a site. Edit a CSS and input text's classes to get the layout you want.
Solution 4:
You can add text-align: center; in css .
Post a Comment for "How To Center A Form Using Bootstrap?"