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>
Related
Can anyone give me some advice on how to transform this:
<p>Find Entry/Exit: #Html.TextBox("SearchString", null, new { #placeholder = "Search..." }) <input class="btn btn-danger btn btn-xs" type="submit" value="Search" />`
to bootstrap button add on?
I want to do something like this:
<div class="col-lg-4">
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div>
</div>
, but I don't know where to put "Search String" in it. Thanks in advance!
try following
<div class="col-lg-4">
<div class="input-group">
<input type="text" class="form-control" id="SearchString" name="SearchString" placeholder="Search String"/>
<span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div>
</div>
Please make sure to add bootstrap css and JS libraries in your page.
Reference to bootstrap
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>
So I have my search box as follows:
<div class="input-group-">
<form id="form_search" name="form_search" method="get" action="<?php echo site_url();?>">
<input type="text" name="s" id="search_top" class="form-control" placeholder="Search For Patches"/>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</form>
</div>
However, is displays like this: http://gyazo.com/7c6d81ea6341d2d4461c74eb4afb76e2
Any help? Thanks.
EDIT:
Using the bootstrap min css.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css
To make Inline form keep your code like this
<form id="form_search" name="form_search" method="get" action="" class="form-inline">
<div class="form-group">
<div class="input-group">
<input class="form-control" placeholder="Search for..." type="text">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</form>
http://www.bootply.com/p1BgBMMjN9
Updated URL:
http://www.bootply.com/6wVwlnjp0a
For the Attached Search btn
http://www.bootply.com/1jX4AhOZ3o
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div>
This will resolve your issue.
put in inside a div like this.
<div class="input-group">
<input type="text" name="s" id="search_top" class="form-control" placeholder="Search For Patches"/>
<span class="input-group-btn">
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
That should solve the problem.
<div class="input-group">
<input type="text" name="s" id="search_top" class="form-control" placeholder="Search For Patches"/>
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
This is how you can do. You want the Input and the Search on one Line.
Code for this is
<form class="form-inline" role="form">
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="Enter email">
<button type="submit" class="btn btn-xs"><span class="glyphicon glyphicon-search" style="font-size:24px"></span></button>
</div>
</form>
It happens because 'search' properties are:
display:block;
width:100%;
so change that in css of the class 'form-control' like:
.form-control{
display:inline;
width:50px;
}
Does it work now?
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've had the following issue occur with a bootstrap-styled text field and input button many times. Notice that they are not vertically aligned:
How do I align these two elements? Here is the HTML:
<div class="span6">
<input type="text" placeholder="email"> <button type="button" class="btn btn-info">Sign up</button>
</div>
In order to complete that, you must use proper Twitter Bootstrap classes for forms.
In this case, that is .form-inline class.
Here is proper markup:
<form class="form-inline">
<input type="text" class="input-small" placeholder="Email"/>
<button type="submit" class="btn">Sign in</button>
</form>
Here is demo http://jsfiddle.net/YpXvT/42/
<div class="navbar-form pull-left">
<input type="text" class="span2">
<button class="btn">Sign up</button>
</div>
copied from http://twitter.github.io/bootstrap/components.html#navbar
or
<div class="input-append">
<input type="text"/>
<button class="btn">Sign up</button>
</div>
or
<div class="form-horizontal">
<input type="text"/>
<button class="btn">Sign up</button>
</div>
<div class="input-group">
<input type="email" class="form-control" required="required" placeholder="monEmail#domaine.fr">
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fa fa-send"></i></button>
</span>
</div>
change css for class input-group-btn in boostrap-min: vertical-align =>top
it s work for me