I've noticed something strange with Bootstrap 3's rendering of input groups, at least on Firefox and IE (Chrome untested):
As you can see, if there are two or more buttons preceding a text input, its left margin becomes wider.
Here is the code I used to reproduce this issue:
<div class="input-group">
<span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
<span class="btn btn-default input-group-addon" id="basic-addon2">B</span>
<input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
</div>
<br/><br/>
<div class="input-group">
<span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
<input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
</div>
Is this expected/normal? How can I fix this?
Associated JSFiddle: https://jsfiddle.net/DTcHh/21418/
I assume you are talking about the double border you see on B? If so its just because there are 1px borders for B and C so when they show next to each other there are 2. This could be easily removed by using something like this:
.form-control {
border-left: 0;
}
But in doing this it will remove the border and it will show incorrectly if you use this technique with no other button elements next to it. If you add this HTML or view your updated js.fiddle so can see what I mean.
<div class="input-group">
<span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
<span class="btn btn-default input-group-addon" id="basic-addon2">B</span>
<input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
</div>
<br/><br/>
<div class="input-group">
<span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
<input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
</div>
<br/><br/>
<div class="input-group">
<span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
<span class="btn btn-default input-group-addon" id="basic-addon2">B</span>
</div>
So I believe this is why the Bootstrap team has the double borders there because depending on what you need to do its probably better to have 2 borders on some occasions then none. Hope that helps.
Your structure is not correct per the Docs --> Multiple Button Input Group.
You're currently applying input-group-addon directly to the buttons, you want input-group-btn as the parent of the buttons (this is also why you're not seeing the btn-default styling also, it should be white, not grey).
Working Example;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<br/>
<br/>
<h1>Correct per Docs</h1>
<div class="input-group">
<div class="input-group-btn">
<span class="btn btn-default" id="basic-addon1">A</span>
<span class="btn btn-default" id="basic-addon2">B</span>
</div>
<input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
</div>
<br/>
<br/>
<h1>Questions Example</h1>
<div class="input-group">
<span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
<span class="btn btn-default input-group-addon" id="basic-addon2">B</span>
<input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
</div>
</div>
Related
I'm using the following input-group with bootstrap:
<div class="input-group" style="padding-left: 20px;">
<input type="text" name="s" class="form-control input-sm">
<span class="input-group-btn">
<button class="btn btn-default input-sm" type="submit"><span class="fa fa-search"></span></button>
</span>
</div>
The outcome is a text-area not aligned with the button:
I want the text-area to be aligned with the input group button
yes, they are in a bootstrap column .
<div class="row">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
" your code should be there "
</div>
</div>
see here , your code is given here.
try it , it's working
Make sure its formatted correctly in a bootstrap column, it's working fine on my end.
HTML:
<div class="col-sm-6">
<div class="input-group" style="padding-left: 20px;">
<input type="text" name="s" class="form-control input-sm">
<span class="input-group-btn">
<button class="btn btn-default input-sm" type="submit"><span class="fa fa-search"></span></button>
</span>
</div>
</div>
CodePen Example
Hi i'm having trouble resizing the search button so that it will be the same height as the textfield. Thank you in advance!.
<div class="form-group col-md-4">
<div class="col-md-9">
<label for="search">Search:</label>
<div class="input-group">
<input type="text" class="input-sm form-control" id="search" />
<span class="input-group-addon">
<button type="submit" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
You can use Input Group instead of Input Group Addon and change the button to match the input size of small. See example Snippet.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="form-group col-md-4">
<div class="col-md-9">
<label for="search">Search:</label>
<div class="input-group">
<input type="text" class="input-sm form-control" id="search" /> <span class="input-group-btn">
<button type="submit" class="btn btn-default btn-sm" type="button"><span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
<!-- /input-group -->
I need to change the style on a working search box to match the theme.
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
<!-- /input-group -->
<div class="search_box">
<form id="form_search" name="form_search" method="get" action="<?php echo site_url();?>">
<input type="text" name="s" id="search_top" />
<input type="button" name="btn1" id="btn_top" value="" />
</form>
</div>
The first div is the style I need, the second is the working search box.
Respectively, here is what each looks like currently:
http://gyazo.com/ecd1b696f723879d5512588b1d384017
Manage the width of your parent container as per your requirement, but the get the search bar, as you are showing: check the linked fiddle:
https://jsfiddle.net/happy2deepak/d4jad6ah/
<div class="input-group">
<input type="text" class="form-control input-lg" placeholder="Search">
<span class="input-group-btn">
<button type="button" class="btn btn-dark btn-lg">Go!</button>
</span>
</div>
I am trying to have a textbox in bootstrap, which has the same look and feel as the one you place inside a panel (large, rounded corners, full div length). On the right side of such a textbox I want to have a few buttons.
I tried a bunch of stuff - either it becomes correctly aligned, but the textbox loses all styles. Or the textbox looks correct, but the buttons wrap down to next line!
Some of what I have tried:
<div class="row">
<div class='col-md-8'>
<input type="text" class="input-block-level input-lg" placeholder="Stuff 2">
<button type="submit" class="btn">Save</button>
<button type="submit" class="btn">Delete</button>
</div>
</div>
and...
<div class="input-group">
<input type="text" class="form-control" placeholder="Stuff 2">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
and...
<div class="form-horizontal">
<input type="text"/>
<button class="btn">Sign up</button>
</div>
Nothing works!I am thinking it shouldnt be so hard to place a bunch buttons next to a textbox that takes all available space and is nice and large :(
Any help is very much appreciated
Couldn't you just do it like this?
<div class="form-group">
<div class="col-md-9">
<input type="text" class="form-control" placeholder="Stuff2" />
</div>
<div class="col-md-3">
<button class="btn btn-primary">Save</button> <button class="btn btn-danger">Delete</button>
</div>
</div>
As far as I know that to combine textbox and button, I use:
class="input-group"
and give class="form-control" to all textboxes
You mean like this follows:
<div class="row">
<div class='col-md-8'>
<div class="input-group">
<input type="text" class="form-control" placeholder="Stuff 2">
<span class="input-group-btn">
<button type="submit" class="btn">Save</button>
<button type="submit" class="btn">Delete</button>
</span>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Stuff 2">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
<div class="form-horizontal">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn">Sign up</button>
</span>
</div>
</div>
</div>
If it is what you mean, here's the demo:
Demo in jsFiddle
I used an input group straight from the bootstrap documentation, and for some reason the button is way bigger than the text input.
Here's the HTML:
<div class="jumbotron">
<div class="input-group">
<input ng-model="businessName" ng-model="chosenPlace" googleplace type="text" class="form-control input-lg">
<span class="input-group-btn">
<button ng-click="findGPlace2()" class="btn btn-default" type="button">Find!</button>
</span>
</div>
</div>
I haven't made any changes to the css, just vanilla bootstrap.
Try to use the samples in Boostrap page. This is the bootply link you can customize it.
<div class="jumbotron">
<form class="form-horizontal" role="form">
<div class="input-group">
<input ng-model="businessName" ng-model="chosenPlace" class="form-control input-lg">
<span class="input-group-btn">
<button ng-click="findGPlace2()" class="btn btn-default btn-lg" type="button">Find!</button>
</span>
</div>
</form>
</div>