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
Related
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 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>
I am trying to place a checkbox within an input group addon whilst using a bootstrap 3 form.
The checkbox is to show password on a sign in form.
<form class="form-signin">
<h1 class="form-signin-heading" align="center"><strong>Owner Gateway</strong></h1>
<input type="text" class="form-control" placeholder="Username" required autofocus></input>
<div class="wrapper">
<div class="input-group" style="width: 100%">
<input type="text" class="form-control" placeholder="Password"/>
<span class="input-group-addon">Show</span>
</div>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Log in</button>
<button class="btn btn-lg btn-primary btn-block" id="new-btn" type="submit">Stay Logged in</button>
</div>
</form>
If anyone could help, I would be very grateful.
<div class="input-group" style="width: 100%">
<input type="text" class="form-control" placeholder="Password"/>
<span class="input-group-addon"><input type="checkbox"> Show</span>
</div>
Just try simply that.