I want to select first input from this structure. I need only CSS selector, not jQuery.
<div class="sonata-ba-collapsed-fields">
<div class="form-group" id="sonata-ba-field-container-s55e92cd5ce823_logoFile">
<label class=" control-label">Logo File</label>
<div class=" sonata-ba-field sonata-ba-field-standard-natural ">
<div class="vich-image">
<div class="form-group ">
<label class=" control-label" for="s55e92cd5ce823_logoFile_file">Logo File</label>
<div class="">
<input type="file" id="s55e92cd5ce823_logoFile_file" name="s55e92cd5ce823[logoFile][file]" class=" form-control">
</div>
</div>
</div>
</div>
</div>
<div class="form-group" id="sonata-ba-field-container-s55e92cd5ce823_iconFile">
<label class=" control-label">Icon File</label>
<div class=" sonata-ba-field sonata-ba-field-standard-natural ">
<div class="vich-image">
<div class="form-group ">
<label class=" control-label" for="s55e92cd5ce823_iconFile_file">Icon File </label>
<div class="">
<input type="file" id="s55e92cd5ce823_iconFile_file" name="s55e92cd5ce823[iconFile][file]" class=" form-control">
</div>
</div>
</div>
</div>
</div>
</div>
I'm doing something like this http://jsfiddle.net/T4kAq/60/ but as you can see it selects both.
CSS selector can be like this:
div.sonata-ba-collapsed-fields > .form-group:nth-child(1) input {
background-color: #ff0000;
}
Demo: http://jsfiddle.net/T4kAq/61/
div.sonata-ba-collapsed-fields > .form-group:first-child input:nth-child(1) {
background-color: #ff0000;
}
Jsfiddle Demo
Related
I have been trying since the morning to correctly align the start date and the end date but without success.
The start and end date do not line up like other blocks.
I do not understand anything...
If you solve my problem, I will be infinitely grateful to you. I really don't understand why the date blocks are not aligned.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<h1 id="welcome">HTML CSS JS</h1>
<div class="row">
<div class="col-12" *ngIf="currentView == 0">
<div class="card mb-4">
<div class="card-body">
<div class="row">
<div class="col-12 col-lg-4">
<div class="form-group row">
<label for="name" class="col-sm-3 col-form-label">Libellé</label>
<div class="col-12 col-sm-9">
<input id="name" type="text" class="form-control" [(ngModel)]="search.name"
style="background-color: white; max-width: 300px;width: 100%;"
placeholder="Libellé" autofocus>
</div>
</div>
<div class="form-group row">
<label for="ticker" class="col-12 col-sm-3 col-form-label">Bourse</label>
<div class="col-12 col-sm-9">
<input id="ticker" type="text" class="form-control" [(ngModel)]="search.ticker"
style="background-color: white; max-width: 300px;width: 100%;"
placeholder="Bourse" autofocus>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="form-group row">
<label for="isin" class="col-12 col-sm-3 col-form-label">ISIN</label>
<div class="col-12 col-sm-9">
<input id="isin" type="text" class="form-control" [(ngModel)]="search.isin"
style="background-color: white; max-width: 300px;width: 100%;"
placeholder="ISIN" autofocus>
</div>
</div>
<div class="form-group row">
<label for="filterForMarkets" class="col-12 col-sm-3 col-form-label">Marché</label>
<div class="col-12 col-sm-9">
<select id="filterForMarkets" class="form-control"
style="width:100%; max-width: 300px;"
(change)="filterForMarkets($event.target.value)">
<option value="">--Tous les marchés--</option>
<option *ngFor="let m of markets" value={{m.marketID}}>
{{m.name}}
</option>
</select>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="form-group" >
<label for="date">Date de départ</label>
<div class="input-group">
<input name="beginDate" id="beginDate" type="text" class="form-control"
style="background-color: white; "
(ngModelChange)="changedBeginDateInput($event)" [(ngModel)]="beginDate">
<input id="picker1" class="form-control" placeholder="dd/mm/yyyy" name="dp1"
ngbDatepicker #dp1="ngbDatepicker" [(ngModel)]="begin.validityDate"
(ngModelChange)="changedBeginDate($event)"
style="position: absolute; left: 0; visibility: hidden">
<div class="input-group-append" (click)="dp1.toggle()">
<span class="input-group-text" id="basic-addon2">
<i class="icon-regular i-Calendar-4"></i>
</span>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="form-group" >
<label for="date">Date de fin</label>
<div class="input-group">
<input name="endDate" id="endDate" type="text" class="form-control"
style="background-color: white;"
(ngModelChange)="changedEndDateInput($event)" [(ngModel)]="endDate">
<input id="picker1" class="form-control" placeholder="dd/mm/yyyy" name="dp2"
ngbDatepicker #dp2="ngbDatepicker" [(ngModel)]="end.validityDate"
(ngModelChange)="changedEndDate($event)"
style="position: absolute; left: 0; visibility: hidden">
<div class="input-group-append" (click)="dp2.toggle()">
<span class="input-group-text" id="basic-addon2">
<i class="icon-regular i-Calendar-4"></i>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 ">
<div class="text-right">
<button type="button" class="btn btn-primary" (click)="launchSearch(modalConfirm)">
Rechercher
</button>
<button type="button" class=" ml-1 btn btn-primary" (click)="getTransactions(0)">
Affichez tous les mouvements
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Using flex property of CSS will solve your problem, it's very beneficial in aligning things as we want.
Try this:
.form-group {
display: flex;
}
And then you could obviously add margin and other properties for aligning all your items together.
I am creating a UI that would contain four controls on each row. It would have a label and control followed by another label and control. If you see in my markup i have set col-md-2 for label and col-md-4 for the control but the second control seems to wrap and go on the next line. I am not sure why it is doing this because in total it is width 12. If you click the Edit button on the top right corner , you could toggle to see the controls
I have also created a stackblitz to replicate the issue
https://angular-lmck2c.stackblitz.io
Markup
<style>
label {
margin-left: 0.5rem;
vertical-align: middle
}
.panel-heading {
color: black;
/* background-color: #F5F7F7; */
border-color: #ddd;
overflow: hidden;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.panel-heading .left-label {
display: inline-block;
padding-top: 5px !important;
}
.panel-heading label {
margin-bottom: 0px !important;
}
</style>
<div class="card" style="height: 100%; width: 100%;">
<div class="card-header panel-heading">
<span class="left-label" style="font-size: 18px; font-weight: bold; ">Fund Terms</span>
<div class="pull-right" style="padding-right:10px; display: inline-block; vertical-align:middle">
<label style="text-align: center; vertical-align:middle" class="btn btn-primary"
[ngClass]="{'btn-primary': EditMode, 'btn-default': !EditMode }"><input type="checkbox"
[(ngModel)]="EditMode" class="hidden" />Edit Mode</label>
</div>
</div>
<div class="card-body">
<div class="form-group row" style="width: 100%;">
<label for="inputName" class="col-md-2 col-form-label modal-label">Name</label>
<div class="col-md-4">
<div *ngIf="!EditMode">Test Name</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control form-control-sm"
/>
</div>
<label for="inputOffice" class="col-md-2 col-form-label ">Side Letter Agreement</label>
<div class="col-md-4">
<div *ngIf="!EditMode">Test</div>
<label *ngIf="EditMode" style="font-size: 13px;font-weight: normal;cursor: pointer">
<input type="checkbox" style="width: 13px; height: 13px;" />
Yes </label>
</div>
</div>
<div class="form-group row">
<label for="inputTitle" class="col-md-2 col-form-label ">Vehicle Type</label>
<div class="col-md-4">
<div *ngIf="!EditMode">Test Vehicle Type</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" class="form-control form-control-sm"
[filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
<label for="inputEmail" class="col-md-2 col-form-label ">Side Letter Details</label>
<div class="col-md-4">
<div *ngIf="!EditMode">Test</div>
<textarea *ngIf="EditMode" kendoTextArea></textarea>
</div>
<div class="col-md-4">
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-2 col-form-label ">Investment Manager (Firm)</label>
<div class="col-md-4">
<div *ngIf="!EditMode">Test</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control form-control-sm" />
</div>
<label for="inputTitle" class="col-md-2 col-form-label ">Plan Asset Fund</label>
<div class="col-md-4">
<div *ngIf="!EditMode">Test Asset Fund</div>
<label style="font-size: 13px;font-weight: normal;cursor: pointer">
<input type="checkbox" style="width: 13px; height: 13px;" />
Yes </label>
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-2 col-form-label ">Investment Manager (Firm)</label>
<div class="col-md-4">
<div *ngIf="!EditMode">Test</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control form-control-sm" />
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-2 col-form-label ">NAV Reporting Cycle</label>
<div class="col-md-4">
<div *ngIf="!EditMode">Test</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" class="form-control form-control-sm"
[filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<div class="form-group row">
<label for="inputName" class="col-md-2 col-form-label ">Fund Currency</label>
<div class="col-sm-4">
<div>Test</div>
</div>
</div>
<div class="form-group row">
<label for="inputName" class="col-md-2 col-form-label ">Audit Year End</label>
<div class="col-sm-4">
<div>Test</div>
</div>
</div>
<div class="btn-toolbar" style="padding-top:40px;">
<span *ngIf="EditMode"><button type="button" class="btn btn-primary btn-view-all btn mr-3"
(click)="saveManager()">Save</button>
</span>
</div>
</div>
</div>
I think the answer is because your labels have a margin-left. If you take that out, the elements should all fit on one row.
Generally, when items don't fit in the Bootstrap rows, my first check is always to see if there's extra margins or padding somewhere there shouldn't be.
If you do need that extra spacing before the labels, try wrapping them in a containing div, and adding the .col-* class on that wrap instead. Then you can try adding the extra spacing to the label.
<div class="col-md-4">
<label></label>
</div>
I tidied up your code a bit, have a look and see if this works for you.
.panel-heading {
color: black;
/* background-color: #F5F7F7; */
border-color: #ddd;
overflow: hidden;
padding-top: 5px;
padding-bottom: 5px;
}
.panel-heading .left-label {
display: inline-block;
padding-top: 5px;
font-size: 18px;
font-weight: bold;
}
.panel-heading label {
margin-bottom: 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card w-100">
<div class="card-header panel-heading">
<span class="left-label">Fund Terms</span>
<div class="float-right">
<label style="text-align: center; vertical-align:middle" class="btn btn-primary" [ngclass]="{'btn-primary': EditMode, 'btn-default': !EditMode }"><input type="checkbox" [(ngmodel)]="EditMode" class="hidden">Edit Mode</label>
</div>
</div>
<div class="card-body">
<div class="form-group row">
<label for="inputName" class="col-md-2 col-form-label">Name</label>
<div class="col-md-4">
<div *ngif="!EditMode">Test Name</div>
<input *ngif="EditMode" kendotextbox="" [readonly]="false" class="form-control form-control-sm">
</div>
<label for="inputOffice" class="col-md-2 col-form-label">Side Letter Agreement</label>
<div class="col-md-4">
<div *ngif="!EditMode">Test</div>
<div *ngif="EditMode" class="form-check">
<input type="checkbox" class="form-check-input">
<label class="form-check-label">Yes</label>
</div>
</div>
</div>
<div class="form-group row">
<label for="inputTitle" class="col-md-2 col-form-label">Vehicle Type</label>
<div class="col-md-4">
<div *ngif="!EditMode">Test Vehicle Type</div>
<kendo-dropdownlist *ngif="EditMode" class="form-control form-control-sm" [filterable]="false" textfield="NAME" [valueprimitive]="true" valuefield="ID">
</kendo-dropdownlist>
</div>
<label for="inputEmail" class="col-md-2 col-form-label">Side Letter Details</label>
<div class="col-md-4">
<div *ngif="!EditMode">Test</div>
<textarea *ngif="EditMode" kendotextarea="" class="form-control form-control-sm"></textarea>
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-2 col-form-label">Investment Manager (Firm)</label>
<div class="col-md-4">
<div *ngif="!EditMode">Test</div>
<input *ngif="EditMode" kendotextbox="" [readonly]="false" class="form-control form-control-sm">
</div>
<label for="inputTitle" class="col-md-2 col-form-label">Plan Asset Fund</label>
<div class="col-md-4">
<div *ngif="!EditMode">Test Asset Fund</div>
<div *ngif="EditMode" class="form-check">
<input type="checkbox" class="form-check-input">
<label class="form-check-label">Yes</label>
</div>
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-2 col-form-label">Investment Manager (Firm)</label>
<div class="col-md-4">
<div *ngif="!EditMode">Test</div>
<input *ngif="EditMode" kendotextbox="" [readonly]="false" class="form-control form-control-sm">
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-2 col-form-label">NAV Reporting Cycle</label>
<div class="col-md-4">
<div *ngif="!EditMode">Test</div>
<kendo-dropdownlist *ngif="EditMode" class="form-control form-control-sm" [filterable]="false" textfield="NAME" [valueprimitive]="true" valuefield="ID">
</kendo-dropdownlist>
</div>
</div>
<div class="form-group row">
<label for="inputName" class="col-md-2 col-form-label">Fund Currency</label>
<div class="col-sm-4">
<div>Test</div>
</div>
</div>
<div class="form-group row">
<label for="inputName" class="col-md-2 col-form-label">Audit Year End</label>
<div class="col-sm-4">
<div>Test</div>
</div>
</div>
<div class="btn-toolbar" style="padding-top:40px;">
<span *ngif="EditMode"><button type="button" class="btn btn-primary btn-view-all btn mr-3" (click)="saveManager()">Save</button></span>
</div>
</div>
</div>
If you still want to set a left margin on the labels, you can either wrap the label in a containing div:
.col-form-label {
margin-left: 0.5rem;
}
<div class="form-group row">
<div class="col-md-2">
<label for="inputName" class="col-form-label">Name</label>
</div>
<div class="col-md-4">
...
or wrap the label text in a span:
.col-form-label span {
display: inline-block;
margin-left: 0.5rem;
}
<div class="form-group row">
<label for="inputName" class="col-md-2 col-form-label"><span>Name</span></label>
<div class="col-md-4">
...
I need that when the focus is in the input, the label changes color, however, in my structure does not work. I'm using Bootstrap 4, Angular 5+ and my form is horizontal and vertical.
here is the html:
<form>
<div class="col-lg-12">
<div class="form-row">
<div class="col-12 col-xl-4 col-sm-12 col-md-4">
<label for="rg">Número do RG</label>
<div class="input-group">
<input [(ngModel)]="dados.rg" name="rg" id="rg" type="text" class="form-control"><span class="separator d-none d-md-block">-</span>
</div>
</div>
<div class="col-12 col-xl-4 col-sm-12 col-md-4">
<label for="data">Data de emissão</label>
<div class="input-group">
<input [textMask]="mask" id="data" [(ngModel)]="dados.data" name="data" type="text" class="form-control"><span class="separator d-none d-md-block">-</span>
</div>
</div>
<div class="col-12 col-xl-4 col-sm-12 col-md-4">
<label for="orgao">Orgão Expedidor</label>
<ng-select class="custom" [(ngModel)]="dados.orgaoExpedidor" id="orgao" name="orgao" (change)="onChange($event)">
<ng-option *ngFor="let orgao of orgaos" [value]="orgao.value">{{orgao.label}}</ng-option>
</ng-select>
</div>
</div>
</div>
<div class="col-lg-12 input-radio">
<div class="form-row form-inline justify-content-center">
<label class="radio-label">Sexo</label>
<div class="btn-group" btnRadioGroup [(ngModel)]="dados.sexo" name="radio">
<label class="btn btn-info" [value]="Masculino" btnRadio="Masculino" tabindex="0" name="masculino" role="button">Masculino</label>
<span class="separator">-</span>
<label class="btn btn-info" [value]="Feminino" btnRadio="Feminino" tabindex="0" name="feminino" role="button">Feminino</label>
</div>
</div>
</div>
</form>
in scss I do it like this:
input:focus {
border-color: $verde;
color: $verde;
}
I tried like this:
input:focus + label {
border-color: $verde;
color: $verde;
}
but it did not work, and the input lost its color
This is not working as the label is not directly placed after the input element. The + selector looks at direct decedents of the first selector, i.e. input + label targets all label elements IMMEDIATELY present after an input element.
In your case the span is the first element following the input.
A small structure change should do the trick.
The first input is structured to work:
<input [(ngModel)]="dados.rg" name="rg" id="rg" type="text" class="form-control">
<label for="rg"><span class="separator d-none d-md-block">-</span>Número do RG</label>
EDIT 1: The second input now uses the pseudo class focus-within. No support for this in IE/Edge yet. If this will not work. you can use the first case but style the label so it appears above. Also, you can use Javascript/JQuery to do this via code.
input:focus {
border-color: green;
color: green;
}
input:focus + label {
color: red;
}
.input-group:focus-within label {
color: red;
}
<form>
<div class="col-lg-12">
<div class="form-row">
<div class="col-12 col-xl-4 col-sm-12 col-md-4">
<div class="input-group">
<input [(ngModel)]="dados.rg" name="rg" id="rg" type="text" class="form-control">
<label for="rg"><span class="separator d-none d-md-block">-</span>Número do RG</label>
</div>
</div>
<div class="col-12 col-xl-4 col-sm-12 col-md-4">
<div class="input-group">
<label for="data">Data de emissão</label>
<input [textMask]="mask" id="data" [(ngModel)]="dados.data" name="data" type="text" class="form-control"><span class="separator d-none d-md-block">-</span>
</div>
</div>
<div class="col-12 col-xl-4 col-sm-12 col-md-4">
<label for="orgao">Orgão Expedidor</label>
<ng-select class="custom" [(ngModel)]="dados.orgaoExpedidor" id="orgao" name="orgao" (change)="onChange($event)">
<ng-option *ngFor="let orgao of orgaos" [value]="orgao.value">{{orgao.label}}</ng-option>
</ng-select>
</div>
</div>
</div>
<div class="col-lg-12 input-radio">
<div class="form-row form-inline justify-content-center">
<label class="radio-label">Sexo</label>
<div class="btn-group" btnRadioGroup [(ngModel)]="dados.sexo" name="radio">
<label class="btn btn-info" [value]="Masculino" btnRadio="Masculino" tabindex="0" name="masculino" role="button">Masculino</label>
<span class="separator">-</span>
<label class="btn btn-info" [value]="Feminino" btnRadio="Feminino" tabindex="0" name="feminino" role="button">Feminino</label>
</div>
</div>
</div>
</form>
try this in your css
.input-group {
input {
background-color: transparent;
&:focus {
border-color: $verde;
color: $verde;
}
}
}
I need to style a bootstrap 3 form such as there is a border around each form field and label. Something like this -
I am not able to make out how to go about doing this. Here is my attempt to achieve this (Please expand the output so that you see 2 columns in each row) -
https://jsfiddle.net/yy7ddtby/15/
.custom-label {
line-height: 3.3em !important;
}
.label-size {
/*font-size: 10px;*/
line-height: 2.1em;
/*padding-right:0px;
width: 10%;*/
}
.border {
color: #555;
border: 1px solid #ccc;
border-radius: 1px;
padding: 5px;
}
<div class="container-fluid">
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name" class="col-md-4 label-size custom-label border">Name</label>
<div class="col-md-8 border">
<input type="text" id="name" class="form-control input-field">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="gender" class="col-md-4 label-size custom-label border">Gender</label>
<div class="col-md-8 border">
<select id="gender" class="form-control input-field">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-md-4 label-size custom-label">Functions</label>
<div class="checkbox col-md-8 label-size">
<label>
<input type="checkbox" id="Func1"> Func1</label>
<label>
<input type="checkbox" id="Func2">Func2</label>
<label>
<input type="checkbox" id="Func3">Func3</label>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="country" class="col-md-4 label-size custom-label">Country</label>
<div class="col-md-8">
<select id="country" class="form-control input-field">
<option>Select</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="options" class="col-md-4 label-size custom-label">Options</label>
<div class="col-md-8">
<select id="options" class="form-control input-field">
<option>Select</option>
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="addr" class="col-md-4 label-size custom-label">ADDR</label>
<div class="col-md-8">
<input type="text" id="addr" class="form-control input-field">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="author" class="col-md-4 label-size custom-label">Author</label>
<div class="col-md-8">
<input type="text" id="author" class="form-control input-field">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="range1" class="col-md-4 label-size custom-label">Range1</label>
<div class="col-md-3">
<input type="text" id="range1" class="form-control input-field">
</div>
<div class="col-md-2">
to
</div>
<div class="col-md-3">
<input type="text" id="range2" class="form-control input-field">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="ip" class="col-md-4 label-size custom-label">IP</label>
<div class="col-md-8">
<input type="text" id="ip" class="form-control input-field">
</div>
</div>
</div>
</div>
</form>
</div>
I have tried to style the first row using a custom CSS called border. However, it doesn't look the way I want it to. The border it generates is quite untidy and not the way in the image.
How can I go about achieving the expected UI with borders?
I would actually give the entire row the border, then use left/right borders on the form elements to divide them up.
Here's the basic idea:
.row {
border: 2px solid black;
}
.form-group > label {
border-right: 2px solid black;
}
input {
border-right: 2px solid black;
}
revised demo
I would like to add a button to the right of the zip code without effecting the size of the field.
Any suggestions would be appreciated.
My original markup was (which is what picture matches):
<div class="col-md-6 col-md-offset-3 text-center" style="border:solid">
// All my fields...
</div>
I then tried:
<div class="col-md-3"></div>
<div class="col-md-6">
// All my fields using form-group
</div>
<div class="col-md-3">
<div class="form-group"></div>
<div class="form-group"></div>
<div class="form-group"></div>
<div class="form-group"></div>
<div class="form-group"></div>
<div class="form-group"></div>
<div class="form-group">
#(Html.Kendo().Button()
.Name("btnLookup")
.Content("Lookup")
)
</div>
</div>
However it placed the button to the top of the form.
Before I added the button the page looks like:
Have you tried adding them via display: absolute?
.form-group {
position: relative;
}
.lookup {
position: absolute;
top: 0;
right: -50px;
width: 40px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-3">
<div class="form-group">
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Postal">
<button class="btn btn-primary lookup"><i class="glyphicon glyphicon-search"></i>
</button>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="City">
</div>
</div>
</div>
</div>