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?
Try This css this will work fine DEMO HERE
.registration-container{
position: relative;
background: rgba(240, 248, 255, 0.5);
width: 600px;
margin:0px auto;
}
try this with using property in css - margin: 0 auto;
.registration-container{
position: relative;
background: rgba(240, 248, 255, 0.5);
width: 600px;
/*margin-top: 40%;*/
margin-bottom: auto;
margin: 0 auto;
}
.registration-container{ margin: 0 auto; }
set your container Center of the screen :)
Related
I'm developing a Java Spring Boot Web App, but CSS is not my specialty. I've attached two images. One is the login page before an attempted login, and the next is after a failed attempted login. The issue is that after the text showing the failed login is added to the page, for some reason, the size of the input fields gets larger. I'm not sure why this is, but I've attached both the HTML and CSS for the relevant tags below:
<div id="parentLogin">
<div class="row">
<div class="col-md-12 col-md-offset-2">
<div>
<c:if test="${param.error != null}">
<div class="login-error" style="margin: 0 auto;">Incorrect username or password</div>
</c:if>
</div>
<div class="panel panel-default" style="width: 275%;">
<div class="panel-heading">
<div class="panel-title" style="text-align: center; font-weight: bold; font-size: x-large; margin: 1%;">User Login</div>
</div>
<div class="panel-body">
<form method="post" action="${loginUrl}" class="login-form">
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
<div class="input-group">
<input type="text" name="username" placeholder="Username"
class="form-control" />
</div>
<div class="input-group">
<input type="password" name="password" placeholder="Password"
class="form-control" />
</div>
<button type="submit" class="suit_and_tie">Sign In</button>
</form>
</div>
</div>
</div>
</div>
</div>
#profileAbout, #parentLogin {
display: flex;
justify-content: center;
align-items: center;
height: 75vh;
}
.login-error {
margin-top: 10px;
margin-bottom: 10px;
color: red;
font-weight: bold;
}
Thank you in advance for the help!
The parent container .row doesn't have a specified width. This allows content inside of the container to take up space as it needs. When the login error message text is introduced, the <input> elements widen as the text from error message is filling the entire width of the parent container.
Try this. I gave .row a specific width and updated some CSS to mimic the photos you included. Now, with or without the error message text, your .row container with login content will always be 240px wide or whatever width you'd like.
#profileAbout, #parentLogin {
display: flex;
justify-content: center;
align-items: center;
height: 75vh;
}
.row {
width: 240px;
padding: 10px;
}
.panel-body {
width: 100%;
}
input {
width: 95%;
margin: 3px;
height: 25px;
}
.panel-title {
text-align: center;
margin: 5px;
}
.suit_and_tie {
background: #FFF;
margin-top: 5px;
border-radius: 500px;
border: 1.5px solid #000;
padding: 5px 25px 5px 25px;
}
.login-error {
margin-top: 10px;
margin-bottom: 10px;
width: auto;
color: red;
font-weight: bold;
}
<div id="parentLogin">
<div class="row">
<div class="col-md-12 col-md-offset-2">
<div>
<c:if test="${param.error != null}">
<div class="login-error" style="margin: 0 auto;">Incorrect username or password</div>
</c:if>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title" style="font-weight: bold; font-size: x-large; margin: 1%;">User Login</div>
</div>
<div class="panel-body">
<form method="post" action="${loginUrl}" class="login-form">
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
<div class="input-group">
<input type="text" name="username" placeholder="Username"
class="form-control" />
</div>
<div class="input-group">
<input type="password" name="password" placeholder="Password"
class="form-control" />
</div>
<button type="submit" class="suit_and_tie">Sign In</button>
</form>
</div>
</div>
</div>
</div>
</div>
I have a bootstrap form with the following css code in it. I have tried to close up the blank spaces in the form by adding margin:0 attribute but still the spaces between the element is there.
css form code
<div class="row-fluid">
<form style="width: 90%; height: 100%; margin-top:1px;" method="post"novalidate="novalidate" class="form well">
<div class="row-fluid">
<div>
<label for="complaints">Message *</label>
<textarea style="width:100%;" name="complaints" rows="3" required></textarea>
</div>
</div>
<div class="form-actions">
<input style="width:100%; background-color:#da291c;" class="btn btn-primary" name="commit" type="submit" value="Send">
</div>
</form>
</div>
this is the picture of the above form
My challenge is to close the gaps on the areas pointed with arrows.
I am using this version of bootstrap
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css">
You can remove the margin-bottom that bootstrap adds to the class .control-group
.row-fluid div.control-group, div.form-actions {
margin-bottom: 0px;
}
div.my-form{
padding-bottom: 0px;
margin-top:0px;
padding-top:0px;
}
.control-group input,.control-group textarea{
margin-bottom: 0px;
}
form.form{
padding-bottom: 0;
padding-top:0;
}
UPDATED jsfiddle with your code
You can use this code:
input[type=text], .txtarea{
margin-bottom: 10px;
}
In bootstrap already they keep on the margin property always. we can overwrite that to solve your problem.
you need to add one class like this:
.splclass{
margin:0 !important;
padding:0 !important;
}
Add additionally in the form inline style like this:
<form style="width: 90%; height: 100%; margin-top:1px; padding-top:5px;" method="post"novalidate="novalidate" class="form well ">
i think it will helpful
Well if you don't want any space in between, you definitely don't want any margin. Move the CSS to it's own file:
.send {
width:100%;
background-color:#da291c;
}
.message {
width:100%;
}
.form {
width: 90%;
height: 100%;
margin: 0;
}
and html:
<div class="row-fluid">
<form class="form" method="post" novalidate="novalidate" class="form well">
<div class="row-fluid">
<div class="control-group span12">
<label for="name">Name *</label>
<input ng-model="name" name="name" type="text" class="input-block-level" required>
</div>
</div>
<div class="row-fluid">
<div class="control-group span12">
<label for="email">Email *</label>
<input name="email" placeholder="" type="email" class="input-block-level" ng-model="email"ng-change="id=email" required>
</div>
</div>
<div class="row-fluid">
<div class="control-group span12">
<label for="complaints">Message *</label>
<textarea class="message" name="complaints" rows="3" required></textarea>
</div>
</div>
<div class="form-actions">
<input class="btn btn-primary send" name="commit" type="submit" value="Send">
</div>
</form>
</div>
and you can see the fiddle here: https://jsfiddle.net/6j98311j/
I have a header-div on my Site. Inside the header I want to have a login-form in-line on the right side.
css:
#header {
position: absolute;
top: 0;
width: 100%;
height: 45px;
padding: 5;
background: #fff;
border-bottom: 1pt solid #ccc;
text-align: right;
font-weight: bold;
}
#header div {
/*display: inline-block;*/
cursor: pointer;
/*padding: 4px;*/
float: right;
text-decoration: none;
font-size: 15px;
margin-right: 5px;
}
#submitButton {
float:right;
}
html:
<div id="header">
<div id="login">
<form class="form-inline" role="form">
<div class="row">
<button type="submit" class="btn btn-default" id="submitButton">Login</button>
<div class="form-group col-sm-3">
<div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input type="email" class="form-control" placeholder="Enter email" />
</div>
</div>
<div class="form-group col-sm-3">
<div class="input-group"> <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input type="password" class="form-control" placeholder="password" />
</div>
</div>
</div>
</form>
</div>
</div>
That's what I have so far:
http://jsfiddle.net/n5qmc/254/
But if I go in the password form and press TAB I don't get in the email input field. Because of the float:right thing. I need to do this somehow different.
What is the right way to do this? Thanks!
What you need is tabindex but as your html is not good and in bootstrap you have used your own style so tabindex got different behaviour.
I have updated your fiddle with changes in html and css. Please check and let me know if its ok for you..
I have removed float and also removed extra margin which were causing problem now if you will use tab then it will go one by one and also will work better in resizing. I have also changed html so email field will be first in both case.
So, I've got a requirement to have two forms in a dialog, where there are four sections.
I'll attach an image.
I want the first form to contain the orange blocks, and the second form to contain only the green block.
Is there any way to achieve this?
Forms are natively blocks, so that means that if I try, the green block will be put below the bottom-left block, which is now what I want.
In short
.outer {
width: 224px;
}
.inset {
float: left;
margin: 6px;
padding: 6px;
background-color: green;
width: 200px;
}
.outset {
float: left;
margin: 6px;
padding: 6px;
background-color: orange;
width: 200px;
}
<div class="outer" style="width:448px;">
<form action="login.php" method="post">
<div class="outer" style="float: left;">
<div class="outset" style="height: 100px;">Top Left
<input type="text" name="user">
</div>
<div class="outset" style="height: 50px;">Bottom Left
<input type="password" name="password">
</div>
</div>
<div class="outer" style="float: left;">
<div class="outset" style="height: 50px;">Top Right
<input type="submit" value="Login">
</div>
</div>
</form>
<form action="register.php" method="post">
<div class="inset" style="height: 100px;">Bottom right
<input type="text" name="user">
<input type="password" name="password">
<input type="submit" value="Register">
</div>
</form>
</div>
I have two divs in which they should be side by side. But once I add a padding to the input box in the left div, the right div shifts.
Any idea why?
The html and css is in the fiddle as below
<div style="text-align:center">
<div style="display:inline-block;width:350px;height:200px;background-color:rgba(43, 171, 145, 0.54);margin-right:30px">
<div style="text-align:left;height:30px;font-size:21px;padding:5px 0px 0px 10px;letter-spacing:7px;font-weight:bold;color:white;background-color:#2bab91"><u>NEW USER</u></div>
<div style="
/* text-align: left; */
padding-top: 20px;
width: 100%;
">
<input type="text" name="email" id="email" placeholder="(Email)" style="
width: 90%;
/* margin: 10px; */
height: 30px;
">
</div>
</div>
<div style="display:inline-block;width:350px;height:200px;background-color: rgba(193, 89, 97, 0.61);margin-left:30px">
<div style="text-align:left;height:30px;font-size:21px;padding:5px 0px 0px 10px;letter-spacing:7px;font-weight:bold;color:white;background-color:#c15961;"><u>EXISTING USER</u></div>
<div>
<input type="text" name="email" id="email" placeholder="(Email)">
</div>
</div>
</div>
http://jsfiddle.net/cAJgq/
Add vertical-align: top to the div styles
Your code aren't clean... Put your css into css file it's better to see clearly your html code
<div style="display:inline-block;width:350px;height:200px;background-color:rgba(43, 171, 145, 0.54);margin-right:30px">
<div style="text-align:left;height:30px;font-size:21px;padding:5px 0px 0px 10px;letter-spacing:7px;font-weight:bold;color:white;background-color:#2bab91"><u>EXISTING USER<</u></div>
<div style="padding-top: 20px;width: 100%;">
<input type="text" name="email" id="email" placeholder="(Email)" style="width: 90%;height: 30px;">
</div>
</div>
<div style="display:inline-block;width:350px;height:200px;background-color:red;margin-right:30px">
<div style="text-align:left;height:30px;font-size:21px;padding:5px 0px 0px 10px;letter-spacing:7px;font-weight:bold;color:white;background-color:#c15961"><u>NEW USER</u></div>
<input type="text" name="email" id="email" placeholder="(Email)" style="width: 90%;height: 30px;margin-top: 20px;">
</div>
http://jsfiddle.net/cAJgq/1/