bootstrap Form Layout --horizontal with labels on top - angular-ui-bootstrap

Question

I am just trying to have a horizontal form with labels on top. keep in mind I am going to add validation so grouping is important
I am looking for something like this
Name email ID
Mike Mike#hotmail.com something
code
<div class="col-lg-12">
<div class="row">
<div class="page-content">
<div class="panel panel-primary">
<form name="searchform" role="form" >
<fieldset>
<legend></legend>
<div class="form-horizontal">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-horizontal">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-horizontal">
<label for="exampleInputPassword1">Employee ID</label>
<input type="text" class="form-control" id="exampl">
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>

Answer 1

this worked for me...let me know if there is a better solution
<form name="searchform" role="form" novalidate>
<fieldset>
<legend></legend>
<div class="col-lg-12">
<div class="row">
<div class="form-group col-xs-3 col-md-3">
<label for="Name" class="control-label"> Name</label>
<input type="text" value='' class="form-control" id="Name" placeholder="Name">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="associateID" class="control-label">Associate ID</label>
<input type="text" value='' class="form-control" id="associateID" placeholder="Associate ID">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="ID" class="control-label">ID</label>
<input type="text" value='' class="form-control" id="ID" placeholder="Racf ID">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="Role" class="control-label">Gateway Role</label>
<p-autoComplete [(ngModel)]="RoleVal" [suggestions]="iRole" name="gatewayRole" placeholder="Gateway Role" (completeMethod)="searchRole($event)" [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="name" dataKey="id" [dropdown]="true"></p-autoComplete>
</div>
</div>
<div class="row">
<div class="form-group col-xs-3 col-md-3">
<label for="Name" class="control-label">Location</label>
<input type="text" value='' class="form-control" id="Name" placeholder=" Name">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="associateID" class="control-label">Associate ID</label>
<input type="text" value='' class="form-control" id="associateID" placeholder="Associate ID">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="racfID" class="control-label">ID</label>
<input type="text" value='' class="form-control" id="ID" placeholder="ID">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="gatewayRole" class="control-label">Role</label>
<p-autoComplete [(ngModel)]="RoleVal" [suggestions]="iRole" name="Role" placeholder="Role" (completeMethod)="searchyRole($event)" [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="name" dataKey="id" [dropdown]="true"></p-autoComplete>
</div>
</div>
</div>
</fieldset>
</form>