I am trying to beautify a form in bootstrap. I don't understand why I can not add some margin to a hyperlink thats below an input? I tried to remove bootstrap and that didn't work, so I don't think it has something to do with bootstrap!
https://jsfiddle.net/k8ws75je/
<div class="col-md-8 col-md-offset-2">
<form class="form-horizontal" role="form" method="POST" action="{{ route('register') }}">
<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
<label for="name" class="col-md-4 control-label">Name</label>
<div class="col-md-6">
<input id="name" type="text" class="form-control" name="name" value="" required autofocus>
<span class="help-block">
<strong></strong>
</span>
</div>
</div>
<div class="form-group">
<label for="email" class="col-md-4 control-label">E-Mail Address</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control" name="email" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
</div>
<div>
<div class="col-md-6 col-md-offset-4">
<a id="linkpassword" href="#">Change Password</a>
<button type="submit" class="btn btn-success pull-right">
Update
</button>
</div>
</div>
</form>
#linkpassword{
margin-top: 400px;
}
That's because a elements are inline elements, which cannot have vertical margins. Change it to an inline-block to make it work
#linkpassword{
margin-top: 200px;
display: inline-block;
}
https://jsfiddle.net/knu1badd/1/
#linkpassword{
margin-top: 400px;
position:absolute;
}
Make it display: block. Thus it will be as you want.
warp a element in a div block and apply the position/margin on this block.
Because a is an inline element.
<div class="margin-top">
<a id="linkpassword" href="#">Change Password</a>
</div>
Related
I got some questions related to positioning I don't want to use a fixed position as my browser is dynamic, how can I move my + - to the right position of the contact: input (Position here)
I try many as it seems only ways is a position to be fixed is there another way to do it?
Here the image
<div class="form-group row">
<label for="validationNumber" class="col-2 col-form-label">Contact:</label>
<div class="col-4">
<input id="validationNumber" name="phonenumber" type="text" class="form-control" pattern="\b\d{8}\b" required>
<a onclick="add()"><label style="cursor: pointer;"><i data-feather="plus" ></i></label></a>
<a onclick="remove()"><label style="cursor: pointer;"><i data-feather="minus"></i></label></a>
<div id="new_chq">
</div>
<input type="hidden" value="1" id="total_chq">
<div class="invalid-feedback">
Enter a correct PhoneNumber!
</div>
</div>
</div>
.flex{display: flex;}
<div class="form-group row">
<label for="validationNumber" class="col-2 col-form-label">Contact:</label>
<div class="col-4">
<div class="flex">
<input id="validationNumber" name="phonenumber" type="text" class="form-control" pattern="\b\d{8}\b" required>
<a onclick="add()"><label style="cursor: pointer;"><i data-feather="plus" >+</i></label></a>
<a onclick="remove()"><label style="cursor: pointer;"><i data-feather="minus">-</i></label></a>
</div>
<div id="new_chq">
</div>
<input type="hidden" value="1" id="total_chq">
<div class="invalid-feedback">
Enter a correct PhoneNumber!
</div>
</div>
</div>
Please help me out, after adding the extra input-group-addon I am losing the markup of this form field. I would also like to have the chevron icon moved to the end of the form field instead of the input-group-addon. Even the label is now in the wrong position.
<?php
<div class="col-md-6">
<div class="input-group has-success has-feedback" id="add_km_tarief_div">
<label for="add_km_tarief_div">Tarief</label>
<span class="input-group-addon">€</span>
<input type="number" min="0" step="0.01" max="1" class="form-control" id="add_km_tarief" name="add_km_tarief" value="0.19" onkeyup="validate_add_table_1()">
<span class="input-group-addon">p/km</span>
<span class="glyphicon glyphicon-ok form-control-feedback" id="add_km_tarief_glyp"></span>
</div>
</div>
?>
Try With This
<div class="col-md-6">
<div class="input-group has-success has-feedback" id="add_km_tarief_div">
<label for="add_km_tarief_div" class="addyourclassname">Tarief</label>
<span class="input-group-addon">€</span>
<input type="number" min="0" step="0.01" max="1" class="form-control" id="add_km_tarief" name="add_km_tarief" value="0.19" onkeyup="validate_add_table_1()">
<span class="input-group-addon">p/km</span>
<span class="glyphicon glyphicon-ok form-control-feedback addyourownclass" id="add_km_tarief_glyp"></span>
</div>
</div>
Css:
.addyourclassname{float:left}
.addyourownclass{float: left;
position: relative;
top: 0;}
When I put 2 fields in a row, their glyphicons are being shown with a nasty offset:
<div class="form-inline">
<div class="form-group col-xs-6 has-feedback has-error">
<input data-placeholder="Your Latitude" id="latitude" name="latitude" type="text" class="form-control">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
<div class="form-group col-xs-6 has-feedback has-error">
<input data-placeholder="Your Longitude" id="longitude" name="longitude" type="text" class="form-control">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</div>
The full JSFiddle is here: https://jsfiddle.net/v_melnik/f8u9hvLa/6/
Is there a way to make them being shown properly?
Lots of thanks to everyone!
UPDATE: Someone marked this question as a duplicate of this one. But this question isn't about adding a glyhicon, it's rather about using glyphicons with a "narrowed" input box.
change your html
<div class="form-inline">
<div class="col-xs-6">
<div class="form-group has-feedback has-error">
<input data-placeholder="Your Latitude" id="latitude" name="latitude" type="text" class="form-control">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</div>
<div class="col-xs-6">
<div class="form-group has-feedback has-error">
<input data-placeholder="Your Longitude" id="longitude" name="longitude" type="text" class="form-control">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</div>
</div>
jsfiddle
Use position:absolute for glyphicon.
.glyphicon-remove::before {
left: 0;
position: absolute;
}
DEMO
only for Mobile Device Because you can use xs class. Add Style.
.form-control-feedback
{
right: 7px;
}
Fiddle Demo
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.form-control-feedback
{
right: 7px;
}
.
<!-- We'll use col-xs-* here, as JSFiddle's result window is really narrow -->
<div class="ibox col-xs-12">
<div class="ibox-content">
<form action="#">
<div>
<label>Location</label>
<div class="form-inline">
<div class="form-group col-xs-6 has-feedback has-error">
<input data-placeholder="Your Latitude" id="latitude" name="latitude" type="text" class="form-control">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
<div class="form-group col-xs-6 has-feedback has-error">
<input data-placeholder="Your Longitude" id="longitude" name="longitude" type="text" class="form-control">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</div>
</div>
</form>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I cannot seem to make the search button and input box be aligned on the same line...currently the textbox is above the search button...any tips?
<!-- Search Bar -->
<div class="headline headline-md"><h2>Search</h2></div>
<div class="input-group margin-bottom-40">
<form method="get" action="#Url.ArticulateSearchUrl(Model)">
<input type="text" name="term" class="form-control" placeholder="Search">
<span class="input-group-btn"><button type="submit" class="btn-u"><i class="fa fa-search"></i></button></span>
</form>
</div>
<!-- End Search Bar -->
The problem is that the <div>s the <h2> and the <form> are display:block and fill the width of their container
You can convert your HTML to
<div class="headline headline-md"><h2>Search</h2></div>
<form method="get" action="#Url.ArticulateSearchUrl(Model)">
<input type="text" name="term" class="form-control" placeholder="Search">
<span class="input-group-btn"><button type="submit" class="btn-u"><i class="fa fa-search"></i></button></span>
</form>
and add this CSS
.headline-md,h2,form{
display:inline-block;
}
.headline-md{
width:80px;
margin-right:15px;
}
I added !important to force the new CSS rules. I added a code snippet to demonstrate the code.
.headline-md,h2,form{
display:inline-block !important;
}
.headline-md{
width:80px !important;
margin-right:15px !important;
}
<div class="headline headline-md"><h2>Search</h2></div>
<form method="get" action="#Url.ArticulateSearchUrl(Model)">
<input type="text" name="term" class="form-control" placeholder="Search">
<span class="input-group-btn"><button type="submit" class="btn-u"><i class="fa fa-search"></i></button></span>
</form>
I figured it out. This did the trick:
<!-- Search Bar -->
<div class="headline headline-md"><h2>Search</h2></div>
<div class="input-group margin-bottom-40">
<form class="input-group" method="get" action="#Url.ArticulateSearchUrl(Model)">
<div class="input-group-btn">
<input type="text" name="term" class="form-control" placeholder="Search">
<span><button type="submit" class="btn-u"><i class="fa fa-search"></i></button></span>
</div>
</form>
</div>
<!-- End Search Bar -->
I am trying to align textfields with bootstrap however I keep failing to adopt anything I found on sources to my project. What I am trying to do is aligning e-mail and password text-fields but leave 'Remember me' and 'Login' centered.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<form method="POST" action="/auth/login">
<div class="form-group">
<div>
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email" value="{{ old('email') }}">
</div>
</div>
<div class="form-group">
<div>
<label for="exampleInputPassword1">Password</label>
<input type="password" name="password" id="password">
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember me
</label>
</div>
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-default">Login</button>
</div>
</div>
</form>
You can use Bootstrap's form-horizontal class to help achieve the layout.
Demo: http://www.bootply.com/nJ2P2gi76B
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Log in</button>
</div>
</div>
</form>
You can access only the text input by using a css attribute selector.
For Example...
input[type="text"] {
...
}
You can get more specific if needed...
#someID input[type="text"] {
...
}
you can use text-center to center the inner content of your div. you can use text-left, text-center, text-right classes to align the contents.
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css);
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css);
<form method="POST" action="/auth/login">
<div class="form-group">
<div>
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email" value="{{ old('email') }}">
</div>
</div>
<div class="form-group">
<div>
<label for="exampleInputPassword1">Password</label>
<input type="password" name="password" id="password">
</div>
</div>
<div class="form-group text-center">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember me
</label>
</div>
</div>
<div class="form-group text-center">
<div>
<button type="submit" class="btn btn-default">Login</button>
</div>
</div>
</form>
It would help if you could post a JSFiddle with the css you are using!
Guessing from what i see:
You could add a class to both fields and override the css.
or put both fields in a div and align them without impacting the rest.
Using an enclosing div:
JSFiddle
CSS:
.input-fields {
width: 300px;
}
.input-fields .form-group {
float: right;
}
.form-group {
clear: both;
text-align: center;
}
HTML:
<form method="POST" action="/auth/login">
<div class="input-fields">
<div class="form-group">
<div>
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email" value="{{ old('email') }}">
</div>
</div>
<div class="form-group">
<div>
<label for="exampleInputPassword1">Password</label>
<input type="password" name="password" id="password">
</div>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember me
</label>
</div>
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-default">Login</button>
</div>
</div>
</form>