align items in a form at center
Question
I am new to the front end . I actually want to make a markup which looks like ,
so, I tried in the following way,
<div className="row">
<div className="col-xs-4">
<div className="has-feedback">
<label className="control-label">Search Job</label>
<input type="text" className="form-control" id="inputValidation" placeholder="Search"/>
<span className="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</div>
</div>
Now, Here, What I am getting is
Can anyone help me with this?
5 answers
solution1
1 2018-08-31 10:21:19
Here is complete code for you :)
<!DOCTYPE html>
<html lang="en">
<head>
<title>form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<style>
.mi-abc {
padding: 10px;
display: inline-block;
background: lightgrey;
}
.mi-control {
width: 75%;
height: 35px;
padding-left: 10px;
}
.mi-icon {
position: absolute;
right: 30px;
top: 20px;
}
</style>
</head>
<body>
<div class="col-md-3 mi-abc">
<div class="wrapper">
<label class="mi-label">Search Job</label>
<input type="text" class="mi-control" placeholder="Search"/>
<span class="glyphicon glyphicon-search mi-icon"></span>
</div>
</div>
</body>
solution2
0 2018-08-31 09:54:47
you can use float property.
.control-label,.form-control{
float:left;
}
it will put elements from left for you. so label comes first and then input will come at the right of it
also you can use flex
solution3
0 2018-08-31 10:01:58
<div class="form-inline"> <div class="form-group mb-2"> <label for="staticEmail2" class="sr-only">Search</label> <input type="text" readonly class="form-control" id="staticEmail2" value="" placeholder="search"> </div> </div>
solution4
0 2018-08-31 10:05:16
Please use "class" instead of "className", you can either use the "pull-left" class which is already available in bootstrap documentation. you can use the below link as a reference.
solution5
0 2018-08-31 11:04:59
As mentioned, the best way would be with the flex property on .has-feedback as follows:
.has-feedback{
display: flex;
}
By default this will align it's children horizontally.
You could also float the children of .has-feedback left and right.
If you choose to float the children however, be prepared to have to clear .has-feedback so that it can calculate the height around it's children. You can find an example on how to do that here: https://css-tricks.com/snippets/css/clear-fix/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.