The following code shows how to create fluid inline form.
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
src='http://code.jquery.com/jquery-2.0.2.js'></script>
<link rel="stylesheet" type="text/css"
href="http://getbootstrap.com/dist/css/bootstrap.css">
<script type='text/javascript'
src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css"
href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<style type='text/css'>
.fa.form-control-feedback {<!--from w w w . jav a 2 s . c o m-->
line-height: 34px;
}
.input-lg ~ .fa.form-control-feedback {
line-height: 46px;
}
.has-feedback-left input.form-control {
padding-left: 34px;
padding-right: 12px;
}
.has-feedback-left .form-control-feedback {
left: 0;
}
.form-horizontal .has-feedback-left .form-control-feedback {
left: 12px;
}
</style>
</head>
<body style='margin:30px'>
<h2>Form Inline</h2>
<form class="form-inline" role="form">
<div class="form-group has-feedback has-feedback-left">
<label class="sr-only">Search</label>
<input type="text" class="form-control" placeholder="Username" />
<i class="fa fa-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="sr-only">Search</label>
<input type="search" class="form-control" placeholder="Search" />
<i class="fa fa-search form-control-feedback"></i>
</div>
</form>
</body>
</html>