Center a bootstrap registration form
I am trying to put a registration page in the center of my html page. I am
using bootstrap, but a little confused how to center it after a couple of
attempts. Here is part of the html page I am working on. These html code
goes to the <body>:
<div class="container registration-container">
<div class="row">
<div class="span6">
<form class="form-horizontal" id="registerHere" method='post'
action=''>
<fieldset>
<legend>Registration</legend>
<div class="control-group">
<label class="control-label">Name</label>
<div class="controls">
<input type="text" class="input-xlarge"
id="user_name" name="user_name" rel="popover"
data-content="Enter your first and last name."
data-original-title="Full Name">
</div>
</div>
<div class="control-group">
<label class="control-label">Email</label>
<div class="controls">
<input type="text" class="input-xlarge"
id="user_email" name="user_email" rel="popover"
data-content="What's your email address?"
data-original-title="Email">
</div>
</div>
<div class="control-group">
<label class="control-label"></label>
<div class="controls">
<button type="submit" class="btn btn-success"
>Create My Account</button>
</div>
<div class="control-group success">
<!-- TODO -->
</div>
<div class="control-group error">
<!-- TODO -->
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
and this is the CSS I am trying to make this registration form looks good:
.registration-container{
position: relative;
background: rgba(240, 248, 255, 0.5);
width: 600px;
/*margin-top: 40%;*/
margin-bottom: auto;
}
legend{
text-align: center;
}
However, this form looks really ugly: the legend is not centered and not
fit in the container, and everything looks strange.... Can someone please
help me figure out how I can make this form be more professional and good
styled?
No comments:
Post a Comment