How would you let bootstrap self-spread buttons to 100% width of their parent, without adjusting each of the button's width separately ?
for example if i have 8 buttons, 100% containers width / 8 buttons = 12% width for each button.
i would like to:
avoid specifying each button's width (today i got 8 tomorrow i'll
have 20).
adjusting the whole .btn-group's child buttons to the center (if you pay close attention you'll see the buttons inside the container are left-aligned for some reason).
.btn-group {
width: 100%;
}
.btn-group>input.btn {
width: 12%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container panel panel-default">
<div class="btn-group">
<input type="button" class="btn btn-primary btn-responsive" value="A" />
<input type="button" class="btn btn-primary btn-responsive" value="AB" />
<input type="button" class="btn btn-primary btn-responsive" value="ABC" />
<input type="button" class="btn btn-primary btn-responsive" value="ABCD" />
<input type="button" class="btn btn-primary btn-responsive" value="ABCDE" />
<input type="button" class="btn btn-primary btn-responsive" value="ABCD" />
<input type="button" class="btn btn-primary btn-responsive" value="ABC" />
<input type="button" class="btn btn-primary btn-responsive" value="AB" />
</div>
<br/>
<br/>
<br/>
<p>the buttons above don't take full width of the container</p>
</div>
Example CSS:
.btn-group {
width: 100%;
}
.btn-group>input.btn {
width: 12%;
}
Codepen
This effect is easiest achieved with flexbox.
.btn-group {
display: flex;
justify-content: center;
}
.btn-group > input.btn {
flex-grow: 1;
}
Depending on your what browers you target you might want to prefix
HTML added .row inside grid which will allow you to reach 100%.
no I have added .col-xs-12 inside .row which might not be necessary but i have tried to follow what bootstrap gives ie container > row > column.
additions .. make .btn-group to be .btn-block too, it spans it 100%.
<div class="container panel panel-default">
<div class="row">
<div class="col-xs-12 no-padding">
<div class="btn-group btn-block my-btn-group">
<input type="button" class="btn btn-primary btn-responsive" value="A"/>
<input type="button" class="btn btn-primary btn-responsive" value="AB"/>
<input type="button" class="btn btn-primary btn-responsive" value="ABC"/>
<input type="button" class="btn btn-primary btn-responsive" value="ABCD"/>
<input type="button" class="btn btn-primary btn-responsive" value="ABCDE"/>
<input type="button" class="btn btn-primary btn-responsive" value="ABCD"/>
<input type="button" class="btn btn-primary btn-responsive" value="ABC"/>
<input type="button" class="btn btn-primary btn-responsive" value="AB"/>
</div>
</div>
</div>
<br/>
<br/>
<br/>
<p>the buttons above don't take full width of the container</p>
</div>
CSS : i have removed padding from 'column' and removed margin from buttons insided button group
.btn-group>input.btn {
width:12.5%;
}
.no-padding {
padding-left: 0 !important;
padding-right: 0 !important;
}
.my-btn-group .btn+.btn {
margin-left: 0px;
}
If using Flexbox isn't the best option for your use case then you can use a table layout. Another advantage is the control you have with regard to responsive behavior since the default btn-group doesn't offer much in this regard.
These elements behave like <table> HTML elements. It defines a
block-level box.
Basic Example: Run with FullPage
/*Basic Rules*/
.panel-btn {
width: 100%;
display: table;
}
.panel-btn div {
display: table-cell;
}
.panel-btn div .btn {
float: none;
width: 100%;
border-radius: 0;
}
/*Rounded Corner Rules*/
.panel-btn div:first-of-type .btn {
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
.panel-btn div:last-of-type .btn {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<h2>11 Buttons</h2>
<div class="panel panel-default panel-btn">
<div>
<input type="button" class="btn btn-primary" value="A" />
</div>
<div>
<input type="button" class="btn btn-primary" value="AB" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABC" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABCD" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABCDEF" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABCDEFG" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABCDEFGH" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABCDEFGHI" />
</div>
<div>
<input type="button" class="btn btn-primary" value="1" />
</div>
<div>
<input type="button" class="btn btn-primary" value="12" />
</div>
<div>
<input type="button" class="btn btn-primary" value="123" />
</div>
</div>
</div>
Responsive Example: Run with FullPage and reduce the browser window
/*Basic Rules*/
.panel-btn {
width: 100%;
display: table;
}
.panel-btn div {
display: table-cell;
}
.panel-btn div .btn {
float: none;
width: 100%;
border-radius: 0;
}
/*Rounded Corner Rules*/
.panel-btn div:first-of-type .btn {
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
.panel-btn div:last-of-type .btn {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}
/*Responsive CSS*/
#media screen and (max-width: 850px) {
.panel-btn div {
width: 50%;
}
.panel-btn div:nth-child(even) {
float: right;
}
.panel-btn div:nth-child(odd) {
float: left;
}
.panel-btn div:last-child:not(:nth-child(even)) {
width: 100%;
display: block;
}
/*Rounded Corner Rules*/
.panel-btn div:first-of-type .btn {
border-bottom-left-radius: 0px;
border-top-left-radius: 4px;
}
.panel-btn div:nth-child(2) .btn {
border-top-right-radius: 4px;
}
.panel-btn div:last-of-type .btn {
border-bottom-right-radius: 4px;
border-top-right-radius: 0px;
}
.panel-btn div:last-child:not(:nth-child(even)) .btn {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
.panel-btn div:nth-last-child(2):not(:nth-child(even)) .btn {
border-bottom-left-radius: 4px;
}
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
<h2>11 Buttons</h2>
<div class="panel panel-default panel-btn">
<div>
<input type="button" class="btn btn-primary" value="A" />
</div>
<div>
<input type="button" class="btn btn-primary" value="AB" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABC" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABCD" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABCDEF" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABCDEFG" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABCDEFGH" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABCDEFGHI" />
</div>
<div>
<input type="button" class="btn btn-primary" value="1" />
</div>
<div>
<input type="button" class="btn btn-primary" value="12" />
</div>
<div>
<input type="button" class="btn btn-primary" value="123" />
</div>
</div>
<br/>
<h2>10 Buttons</h2>
<div class="panel panel-default panel-btn">
<div>
<input type="button" class="btn btn-danger" value="123456789" />
</div>
<div>
<input type="button" class="btn btn-danger" value="12345678" />
</div>
<div>
<input type="button" class="btn btn-danger" value="1234567" />
</div>
<div>
<input type="button" class="btn btn-danger" value="123456" />
</div>
<div>
<input type="button" class="btn btn-danger" value="12345" />
</div>
<div>
<input type="button" class="btn btn-danger" value="1234" />
</div>
<div>
<input type="button" class="btn btn-danger" value="123" />
</div>
<div>
<input type="button" class="btn btn-danger" value="12" />
</div>
<div>
<input type="button" class="btn btn-danger" value="1" />
</div>
<div>
<input type="button" class="btn btn-danger" value="A" />
</div>
</div>
<br/>
<h2>9 Buttons</h2>
<div class="panel panel-default panel-btn">
<div>
<input type="button" class="btn btn-success" value="A" />
</div>
<div>
<input type="button" class="btn btn-success" value="AB" />
</div>
<div>
<input type="button" class="btn btn-success" value="ABC" />
</div>
<div>
<input type="button" class="btn btn-success" value="ABCD" />
</div>
<div>
<input type="button" class="btn btn-success" value="ABCDEF" />
</div>
<div>
<input type="button" class="btn btn-success" value="ABCDEFG" />
</div>
<div>
<input type="button" class="btn btn-success" value="ABCDEFGH" />
</div>
<div>
<input type="button" class="btn btn-success" value="ABCDEFGHI" />
</div>
<div>
<input type="button" class="btn btn-success" value="1" />
</div>
</div>
<br/>
<h2>20 Buttons</h2>
<div class="panel panel-default panel-btn">
<div>
<input type="button" class="btn btn-warning" value="1" />
</div>
<div>
<input type="button" class="btn btn-warning" value="2" />
</div>
<div>
<input type="button" class="btn btn-warning" value="3" />
</div>
<div>
<input type="button" class="btn btn-warning" value="4" />
</div>
<div>
<input type="button" class="btn btn-warning" value="5" />
</div>
<div>
<input type="button" class="btn btn-warning" value="6" />
</div>
<div>
<input type="button" class="btn btn-warning" value="7" />
</div>
<div>
<input type="button" class="btn btn-warning" value="8" />
</div>
<div>
<input type="button" class="btn btn-warning" value="9" />
</div>
<div>
<input type="button" class="btn btn-warning" value="10" />
</div>
<div>
<input type="button" class="btn btn-warning" value="11" />
</div>
<div>
<input type="button" class="btn btn-warning" value="12" />
</div>
<div>
<input type="button" class="btn btn-warning" value="13" />
</div>
<div>
<input type="button" class="btn btn-warning" value="14" />
</div>
<div>
<input type="button" class="btn btn-warning" value="15" />
</div>
<div>
<input type="button" class="btn btn-warning" value="16" />
</div>
<div>
<input type="button" class="btn btn-warning" value="17" />
</div>
<div>
<input type="button" class="btn btn-warning" value="18" />
</div>
<div>
<input type="button" class="btn btn-warning" value="19" />
</div>
<div>
<input type="button" class="btn btn-warning" value="20" />
</div>
</div>
</div>
Related
I am working on this demo. I am not sure why I not able to set the width of #input-box to 0. I am trying to hide this container and animate the width of that to required size as it is requested but I can not properly set the width to 0
body {
padding: 30px;
}
#input-box{
width:0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary" id="input-box">
<div class="input-group m-0">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">Zip Zode</span>
</div>
</div>
</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
You also need to set the following CSS properties:
body {
padding: 30px;
}
#input-box {
width: 0px;
padding: 0;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary" id="input-box">
<div class="input-group m-0">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">Zip Zode</span>
</div>
</div>
</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
Padding of button
#input-box{
width:0px;
padding:0;
}
Is this what you would like it to look like?screenshot
If so, you need to specify some other css properties:
#input-box{
width:0px;
padding: 0;
margin: 0;
border: 0;
}
I'm having trouble finding the right code to allign my div element to the right of the page.
Now I have this:
I want to have this:
Here is my code:
<h1 class="pb-2 mt-4 mb-2 border-bottom">Producten</h1>
<button type="button" name="button" class="btn btn-warning" *ngIf="!newProduct" (click)="newProductForm()">Nieuwe productvraag</button>
<button [disabled]="loading" type="button" name="button" class="btn btn-default" *ngIf="!newProduct" (click)="reload()"><i class="fas fa-sync-alt"></i> Reload</button>
<form name="searchForm" (submit)="search()" class="form-check-inline">
<div class="float-right">
<input type="text" name="title" class="form-control" placeholder="*Zoek product" aria-label="Search"/>
<button type="submit" style="display:none;">Hidden</button>
</div>
</form>
The 2 buttons (yellow and grey) don't have anything to do with the form. The form is a search function of my page. I use bootstrap for styling.
I have resolved your problem please check following code
<h1 class="pb-2 mt-4 mb-2 border-bottom">Producten</h1>
<div class="clearfix">
<button type="button" name="button" class="btn btn-warning" *ngIf="!newProduct" (click)="newProductForm()">Nieuwe productvraag</button>
<button [disabled]="loading" type="button" name="button" class="btn btn-default" *ngIf="!newProduct" (click)="reload()"><i class="fas fa-sync-alt"></i> Reload</button>
<form name="searchForm" (submit)="search()" class="form-check-inline float-right">
<input type="text" name="title" class="form-control" placeholder="*Zoek product" aria-label="Search"/>
<button type="submit" style="display:none;">Hidden</button>
</div>
</form>
</div>
add class to you input tag like search-input
then in your css file
.search-input {
float: right
}
If you are using bootstrap 4 then you can do something like this. wrap your buttons and form into one div and give him class d-flex and ml-auto class to form tag
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<h1 class="pb-2 mt-4 mb-2 border-bottom">Producten</h1>
<div class="d-flex">
<button type="button" name="button" class="btn btn-warning" *ngIf="!newProduct" (click)="newProductForm()">Nieuwe productvraag</button>
<button [disabled]="loading" type="button" name="button" class="btn btn-default" *ngIf="!newProduct" (click)="reload()"><i class="fas fa-sync-alt"></i> Reload</button>
<form name="searchForm" (submit)="search()" class="form-check-inline ml-auto">
<div>
<input type="text" name="title" class="form-control" placeholder="*Zoek product" aria-label="Search"/>
<button type="submit" style="display:none;">Hidden</button>
</div>
</form>
<div>
I have this HTML:
<h4><span class="label label-default">1546 - some text</span></h4>
<div class="pull-left">
<button type="button" class="btn btn-primary" ng-click="list.saveItems();" ng-disabled="!list.currentItems.length || list.currentItemsStatus.id == 1">Submit</button>
<button type="button" class="btn btn-default" ng-click="list.getItems()">Reload</button>
<button type="button" class="btn btn-default" ng-disabled="true">Cancel</button>
</div>
How can I make <h4> element on the same row with the buttons on the right side?
You have to add the following CSS for the heading <h4>:
h4 {
display:inline-block;
float:left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h4><span class="label label-default">1546 - some text</span></h4>
<div class="pull-left">
<button type="button" class="btn btn-primary" ng-click="list.saveItems();" ng-disabled="!list.currentItems.length || list.currentItemsStatus.id == 1">Submit</button>
<button type="button" class="btn btn-default" ng-click="list.getItems()">Reload</button>
<button type="button" class="btn btn-default" ng-disabled="true">Cancel</button>
</div>
The default value of the display property is block so the heading (<h4>) takes the full width of the parent container. With display: inline-block the heading takes only the space needed.
Bootstrap 3.3
You can set the class .pull-left to the <h4> element. So you don't need additional CSS rules:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h4 class="pull-left"><span class="label label-default">1546 - some text</span></h4>
<div class="pull-left">
<button type="button" class="btn btn-primary" ng-click="list.saveItems();" ng-disabled="!list.currentItems.length || list.currentItemsStatus.id == 1">Submit</button>
<button type="button" class="btn btn-default" ng-click="list.getItems()">Reload</button>
<button type="button" class="btn btn-default" ng-disabled="true">Cancel</button>
</div>
Bootstrap 4.0+
Since Bootstrap 4.0 you have to use .float-left instead of .pull-left:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<h4 class="float-left"><span class="label label-default">1546 - some text</span></h4>
<div class="float-left">
<button type="button" class="btn btn-primary" ng-click="list.saveItems();" ng-disabled="!list.currentItems.length || list.currentItemsStatus.id == 1">Submit</button>
<button type="button" class="btn btn-default" ng-click="list.getItems()">Reload</button>
<button type="button" class="btn btn-default" ng-disabled="true">Cancel</button>
</div>
You have to add some CSS for h4 and pull-left-class:
h4{
display: inline-block;
}
.pull-left{
display: inline-block;
}
example:
https://jsfiddle.net/y6f0ddLg/
I want to have a form, containing a checkbox, a textfield and a button, with textfield taking as much width as available.
Is that possible?
<form>
<input type="checkbox">
<input class='form-control'>
<button class="btn btn-danger pull-right">
<i class="glyphicon glyphicon-minus"></i>
</button>
</form>
Here's a codepen with my (failed) intent
EDIT: Changed my question to not require form-inline to achieve the same result
You can use calc() in input="text" and according to Bootstrap Docs Examples the button would be a sibling of form-group and not a child as you have.
Remember that .form-inline only applies to forms within viewports that are at least 768px wide. So you need to see full-page of the snippet.
.form-group {
border: red solid
}
input[type="text"] {
width: calc(100% - 17px)
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-inline">
<div class="form-group">
<input type="checkbox">
<input type="text" placeholder="textfield">
</div>
<button type="submit" class="btn btn-default">
Remove<i class="glyphicon glyphicon-minus"></i>
</button>
</form>
UPDATE (based on your updated question) - that you want the same outcome even for smaller screen - therefore don't require form-inline)
I'll say lets keep form-inline but make button child of form-group instead of sibling (as I had earlier in my answer - and as it should be accordingly to Bootstrap Docs Examples)
.form-group {
border: red solid
}
#f1 input[type="text"] {
width: calc(100% - 113px) /* regular button */
}
#f2 input[type="text"] {
width: calc(100% - 101px) /* small button */
}
#f3 input[type="text"] {
width: calc(100% - 91px) /* extra small button */
}
#f4 input[type="text"] {
width: calc(100% - 141px) /* large button */
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<form id="f1" class="form-inline">
<div class="form-group">
<input type="checkbox">
<input type="text" placeholder="textfield">
<button type="submit" class="btn btn-default">
Remove<i class="glyphicon glyphicon-minus"></i>
</button>
</div>
</form>
<form id="f2" class="form-inline">
<div class="form-group">
<input type="checkbox">
<input type="text" placeholder="textfield">
<button type="submit" class="btn btn-sm btn-default">
Remove<i class="glyphicon glyphicon-minus"></i>
</button>
</div>
</form>
<form id="f3" class="form-inline">
<div class="form-group">
<input type="checkbox">
<input type="text" placeholder="textfield">
<button type="submit" class="btn btn-xs btn-default">
Remove<i class="glyphicon glyphicon-minus"></i>
</button>
</div>
</form>
<form id="f4" class="form-inline">
<div class="form-group">
<input type="checkbox">
<input type="text" placeholder="textfield">
<button type="submit" class="btn btn-lg btn-default">
Remove<i class="glyphicon glyphicon-minus"></i>
</button>
</div>
</form>
Try this:
<div class="container">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default">
<input type="checkbox">
</button>
<button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-minus"></i></button>
</div>
</div>
</div>
I am on the way and trying to create a modal's design like this.
Hence I begin by creating a layout first by selecting the elements that I like. However I got a question which is how do I create lines like this? Do I create a fake div so that the lines won't get there?
The lines
HTML
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
New entry
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<span class="tc">New Note</span>
<button type="button" class="close" data-dismiss="modal">Add</button>
</div>
<div class="modal-body">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Note
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Image
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Voice
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Video
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Data
</label>
</div>
</div>
<div class="modal-footer">
<div class="input-group">
<span class="input-group-addon">Episode:</span>
<input type="text" class="form-control" placeholder="Choose a episode">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Info</button>
</span>
</div>
<div class="input-group">
<span class="input-group-addon">Episode:</span>
<input type="text" class="form-control" placeholder="Choose a episode">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Info</button>
</span>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Write here">
</div>
</div>
</div>
</div>
</div>
CSS
.tc{
margin-left:192px;}
Thanks for taking your time!
If I fully understanded, correct me if I am wrong, you want something like this:
http://jsfiddle.net/VDesign/9cuxr59y/
CSS Code
.tc{
margin-left:192px;}
.input-group-addon {
background-color: #fff;
border: none;
border-radius: none;
}
.form-control, .form-control:focus {
background-color: #fff;
box-shadow: none;
border: none;
}
.input-group + .input-group {
border-top: 1px solid #ccc;
}
.input-group {
width: 100%;
padding: 7px;
}
.btn-default {
border-radius: 100%;
color: #3071A9;
border: 1px solid #3071A9;
}
.input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group > .btn, .input-group-btn:last-child > .dropdown-toggle, .input-group-btn:first-child > .btn:not(:first-child), .input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
border-bottom-left-radius: 100%;
border-top-left-radius: 100%;
}
.input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group {
margin-left: 0;
}