Hi i have created login form and need to display that box to center of any screens.Gap should be equal on all the sides in any of the screens.Tried with postion:absolute display flexbut not working.
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-heading">
<h2 class="text-center"><img src="images/logo.png"></h2>
</div>
<hr />
<div class="modal-body">
<form action="" role="form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" class="form-control" placeholder="User Name" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-lock"></span>
</span>
<input type="password" class="form-control" placeholder="Password" />
</div>
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn-success btn-lg">Login</button>
forget Password
</div>
</form>
</div>
</div>
</div>
Style.css
.modal-content{
background-color: #fff;
}
.btn-link{
color:white;
}
.modal-heading h2{
color:#ffffff;
}
.modal-dialog{
position:absolute;
left:50%;
width:400px;
top:50%;
transform:translate(-50% , -50%)
}
add this and it should work!
You can making it with display block, margin auto and text align on modal-dialog
.modal-content{
background-color: #fff;
}
.btn-link{
color:white;
}
.modal-heading h2{
color:#ffffff;
}
.modal-dialog {
width:400px;
display: block;
margin: 0px auto;
text-align:center;
}
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-heading">
<h2 class="text-center"><img src="images/logo.png"></h2>
</div>
<hr />
<div class="modal-body">
<form action="" role="form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" class="form-control" placeholder="User Name" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-lock"></span>
</span>
<input type="password" class="form-control" placeholder="Password" />
</div>
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn-success btn-lg">Login</button>
forget Password
</div>
</form>
</div>
</div>
</div>
Related
How can I do it so that the label and input elements are placed on the same row? Can anyone help me with this?
.entry:not(:first-of-type) {
margin-top: 10px;
}
.glyphicon {
font-size: 12px;
}
<div class="container">
<div class="row">
<div class="control-group" id="fields">
<label class="control-label" for="field1">Nice Multiple Form Fields</label>
<div class="controls">
<form role="form" autocomplete="off">
<div class="entry input-group col-xs-3">
<input class="form-control" name="fields[]" placeholder="Type something">
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
The for attribute of the tag should be equal to the id attribute of the related element to bind them together, however you don't have id in your input div..
try add this :
<input class="form-control" id="field1" name="fields[]" type="text" placeholder="Type something" />
Just place the label above the input element since both are inline elements by default:
.entry:not(:first-of-type) {
margin-top: 10px;
}
.glyphicon {
font-size: 12px;
}
<div class="container">
<div class="row">
<div class="control-group" id="fields">
<div class="controls">
<form role="form" autocomplete="off">
<div class="entry input-group col-xs-3">
<label class="control-label" for="field1">Nice Multiple Form Fields</label>
<input class="form-control" name="fields[]" type="text" placeholder="Type something">
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
I'm trying to align recaptcha box with input fields using bootstrap. I used this code on ckeditor. The position of recaptcha changed when the time out for captcha was display. How to keep the position of recaptcha box same even after display error?
.g-recaptcha {
margin-left: -1px!important;
margin-top: -50px
}
width: 300px; !important;
.captcha{
margin-left:7px;
margin-top:-47px!important;
}
.recaptcha-wrap {
position:relative;
height:76px;
padding:1px 0 0 1px;
background:#222;
>div{
position:absolute;
bottom: 2px;
right:2px;
font-size:10px;
color:#ccc;
}
}
width: 300px; !important;
.captcha{
margin-left:7px;
margin-top:-47px!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<form class="well form-horizontal" action=" " method="post"
id="contact">
<div class="form-group">
<div class="col-md-8 inputGroupContainer">
<div class="input-group required"><span class="input-group-addon"><i class="glyphicon glyphicon-envelope" ></i> </span> <input class="form-control" id="email" name="email" placeholder="Email" type="text" value="" /></div>
</div>
</div>
<div class="form-group">
<div class="col-md-8 inputGroupContainer">
<div class="input-group required"><span class="input-group-addon"><i class="glyphicon glyphicon-user" ></i> </span> <input class="form-control" id="name" name="name" placeholder="Name" type="text" value="" /></div>
</div>
</div>
<div class="form-group">
<div class="col-md-8 inputGroupContainer">
<div class="input-group"> </div>
</div>
</div>
<div class="form-group">
<div class="col-md-8 inputGroupContainer">
<div class="input-group captcha"><input data-error="Check `I am human` !" id="recaptchaValidator" name="recaptcha" pattern="1" required="" style="visibility: hidden" type="text" value="" />
<div class="g-recaptcha" data-callback="test" data-sitekey="6Lc7vh8UAAAAAEkcVjo-Cz5rOKSmE22V7x8-0MXP" name=""> </div>
</div>
</div>
</div>
</form>
i have two forms. One form for login and the other form for reset the password.
Now i want to set the both buttons (login, password reset) side by side.
But i don't know, how to do that.
And here is my code:
<form action="login" method="POST">
<div class="row">
<div class="col-md-2">Username:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="text" name="username" id="username" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2">Passwort:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="password" name="password" id="password" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2 input-group-sm">
<input type="submit" class="form-control btn-default" value="Login" />
</div>
</div>
</form>
<form action="reset" method="POST">
<div class="row">
<div class="col-md-2 input-group-sm">
<input class="form-control btn-default" type="submit" value="Passwort vergessen" />
</div>
</div>
</form>
I hope you can help me.
Keep the button elements in same form and add form attribute to the other button to which you want to associate with other form element.
From MDN:
The form element that the button is associated with (its form owner). The value of the attribute must be the id attribute of a element in the same document. If this attribute is not specified, the element will be associated to an ancestor element, if one exists. This attribute enables you to associate elements to elements anywhere within a document, not just as descendants of elements.
Example:
<form id="firstForm">
<button>Submit First form</button>
<button form="secondForm">Submit Second form</button>
</form>
<form id="secondForm">
</form>
Give your second form an id (e.g. "form2"), and add this CSS:
#form2 {
position: relative;
bottom: 25px;
left: 55px;
}
i changed css of two buttons, now it works, here you can run, nd see it's working now.
i added style="float:left;" in <input type="submit" class="form-control btn-default" value="Login"/> and <input class="form-control btn-default" type="submit" value="Passwort vergessen"/>
<form action="login" method="POST">
<div class="row">
<div class="col-md-2">Username:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="text" name="username" id="username" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2">Passwort:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="password" name="password" id="password" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2 input-group-sm">
<input type="submit" class="form-control btn-default" value="Login" style="float:left;" />
</div>
</div>
</form>
<form action="reset" method="POST">
<div class="row">
<div class="col-md-2 input-group-sm">
<input class="form-control btn-default" type="submit" value="Passwort vergessen" style="float:left;" />
</div>
</div>
</form>
<style>
#resetForm {
position: relative;
bottom: 37px;
left: 55px;
}
</style>
<form action="login" method="POST">
<div class="row">
<div class="col-md-2">Username:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="text" name="username" id="username" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2">Passwort:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="password" name="password" id="password" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2 input-group-sm">
<input type="submit" class="form-control btn-default" value="Login" />
</div>
</div>
</form>
<form action="reset" method="POST">
<div class="row" id="resetForm">
<div class="col-md-2 input-group-sm">
<input class="form-control btn-default" type="submit" value="Passwort vergessen" />
</div>
</div>
</form>
If you want to put the buttons side by side you can add the css property float: left; to the login button and it'll work, but it'll work only for this example.
<form action="login" method="POST">
<div class="row">
<div class="col-md-2">Username:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="text" name="username" id="username" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2">Passwort:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="password" name="password" id="password" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2 input-group-sm">
<input type="submit" class="form-control btn-default" value="Login" style="float:left; />
</div>
</div>
</form>
<form action="reset" method="POST">
<div class="row">
<div class="col-md-2 input-group-sm">
<input class="form-control btn-default" type="submit" value="Passwort vergessen" />
</div>
</div>
</form>
Important note:
I don't think it's a good idea to use a form only for a button element, you should think of using it in the same form and apply the float: left; property to the buttons, it makes more sense and it's better for your DOM.
Better way to do
You should not use a second form to reset your first form.
You have to use only one form and add an input with type="reset"
By this way you can place your buttons side by side in only one line and reset works !
<div class="col-md-2 input-group-sm">
<input type="submit" class="form-control btn-default" value="Login" />
<input type="reset" value="Reset"/>
</div>
Live demo :
https://jsfiddle.net/20o2ahnr/
I'm very sorry if this is just a simple question but I'm really bad when it comes to alignment/positioning of elements and stuff like that so here it goes.
My problem is shown here:
http://imgur.com/a/xscLJ
I just want the glyphicon to appear beside the textfield not above it. Just that. I tried putting it inside the form tag but the result is the same. Here is my code.
<div id="form" class="collapse in">
<div id="loginwrong" style="display: inline-block; vertical-align: top;">
<div id="loginwrong2" style="display: none;">
<span class='glyphicon glyphicon-remove-circle' style="color: red; font-size: 2em;"></span>
</div>
</div>
<form method="POST" class="form-inline" role="form">
<input type="password" name="pw" placeholder="Enter Password" class="form-control">
<input type="submit" class="btn btn-primary" name="submit" value="Submit">
</form>
</div>
I also have a script that will show the glyphicon if the password is wrong. (it's basically a password-accepting textfield)
<?php
echo "<script type='text/javascript'>
$('#loginwrong2').show();
</script>";
?>
From http://getbootstrap.com/css/#forms-control-validation
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>
Example fiddle: https://jsfiddle.net/s8p0xyyc/
if you are using bootstrap, you should use bootstrap to design the form
<?php
echo "<script type='text/javascript'>$('#loginwrong2').show();</script>";
?>
<div class="container">
<div class="row">
<div class="col-md-1">
<span id="loginwrong2" class='glyphicon glyphicon-remove-circle' style="color: red; font-size: 2em; display:none;"></span>
</div>
<div class="col-md-11">
<form method="POST" class="form-inline" role="form">
<input type="password" name="pw" placeholder="Enter Password" class="form-control">
<input type="submit" class="btn btn-primary" name="submit" value="Submit">
</form>
</div>
</div>
</div>
PD: this is not a php question
Just add the right classes and move back the span with the incon inside the form
<div id="form" class="collapse in form-group ">
<form method="POST" class="form-inline has-feedback" role="form">
<input type="password" name="pw" placeholder="Enter Password" class="form-control">
<input type="submit" class="btn btn-primary" name="submit" value="Submit">
<span id="loginwrong2" class="glyphicon glyphicon-remove-circle form-control-feedback" aria-hidden="true" style="color: red; font-size: 2em;"></span>
</form>
</div>
Thanks for everyone who answered! I got what I want by making a div for the glyphicon and a div for the form. Both divs has the display: inline-block in their styles.
<div id="form" class="collapse in">
<div id="loginwrong" style="display: inline-block; vertical-align: top;">
<div id="loginwrong2" style="display: none;">
<span class='glyphicon glyphicon-remove-circle' style="color: red; font-size: 2em;"> </span>
</div>
</div>
<div style="display: inline-block;">
<form method="POST" class="form-inline" role="form">
<input type="password" name="pw" placeholder="Enter Password" class="form-control">
<input type="submit" class="btn btn-primary" name="submit" value="Submit">
</form>
</div>
</div>
Change your css make <span id="loginwrong2"> {position:absolute;left:12%;top:10%}
See this
http://www.bootply.com/BLgAr0zrLA
I am using bootstrap's grid to layout a form within a modal. There is too much space in between the label and the input element, and if I have two form controls in one row there is too much space between them. I am using 3 columns for each element, any less for any of them and I get word wrapping or clipping.
<div class="modal-body">
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-3">Start Time:</label>
<div class="col-xs-3 margin-top-sm">
<div class="input-group bootstrap-timepicker timepicker">
<input type="text" class="form-control" data-provide="timepicker" data-bind="value:startTime" id="StartTime" />
<span class="input-group-addon" ><i class="fa fa-clock-o"></i></span>
</div>
</div>
<label class="control-label col-xs-3">End Time:</label>
<div class="col-xs-3 margin-top-sm">
<div class="input-group bootstrap-timepicker timepicker">
<input type="text" class="form-control" data-provide="timepicker" data-bind="value:endTime" id="EndTime" />
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
</div>
</div>
</div>
I've altered your HTML and CSS to get this desired result. Instead of using cols-* I used spans, and row-fluid
HTML:
<div id="myModal" class="modal show" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="row-fluid">
<div class="span6">
<label class="control-label">Start Time:</label>
<div class="input-group bootstrap-timepicker timepicker">
<input type="text" class="form-control" data-provide="timepicker" data-bind="value:endTime" id="EndTime" />
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
<div class="span6">
<label class="control-label">End Time:</label>
<div class="input-group bootstrap-timepicker timepicker">
<input type="text" class="form-control" data-provide="timepicker" data-bind="value:endTime" id="EndTime" />
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.span6{
display: inline-block;
max-width: 40%;
margin-left: 6%;
}
CODEPEN DEMO