Bootstrap Input Group with Image - html

I am using bootstrap 3 for creating input groups with normal text as shown in image below
How can I get input group with image and also more than 2 span text.
I am using following code for normal input group
<div class="input-group input-group-lg">
<input type="text" style="background-color: black; color: white" class="form-control" aria-label="You Send">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<!-- /btn-group -->
</div>
<!-- /input-group -->
Edit 1:

There are many CSS tricks out there to embed images in the input field. Personally for me, if we're gonna be using Bootstrap, let's really use Bootstrap. And perhaps an icon pack like FontAwesome.
.search-icon:before {
font: normal normal normal 14px/1 FontAwesome;
content: "\f002";
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text border-right-0 bg-white">
<!-- Stack overflow doesn't allow this, but if it did, I would not need
any custom css, just the following html only this:
<i class="fas fa-search"></i>
Instead I have to use this over here. -->
<span class="search-icon"></span>
</span>
</div>
<input type="text" class="form-control border-left-0" placeholder="Search">
</div>
If you want to put your own custom image, you can edit the css like so:
.search-icon:before {
content: url(path/to/your-image.jpg);
}
I'll update my answer once you clarify what you mean by two-span text.

Related

Bootstrap's input width 100% within form-inline

I am trying to make a bootstrap inline form like dropdown-input-button. I was able to do this, but how can I make 100% width of input tag? Code snippet below.
<div class="row">
<div class="col-md-12">
<div class="form-inline">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
<div class="form-group">
<input type="text" class="form-control " placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Search</button>
</div>
</div>
</div>
Fiddle: https://jsfiddle.net/xt4zk62v/
You need to create a class and apply it to the parent div that adds a width to it and update the width on the input to 100%;
#media (min-width: 768px){
.form-inline .form-control {
display: inline-block;
width: 100%;
vertical-align: middle;
}
}
https://jsfiddle.net/t3xd3esq/4/

how to put <span> and <button> on the same line

here is what it looks like:
and my html:
<div>
<div class="dropdown col-md-6">
<span class="input-group-addon" id="basic-addon1" style="width:150px;">warehouse</span>
<button class="btn btn-default dropdown-toggle "type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style="display:inline;">
select warehouse
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</div>
</div>
I want to put the warehouse and select warehouse on the same line,how to do it?
You need to make the surrounding div an input group (add the "input-group" class):
<div class="dropdown col-md-6 input-group">
Instead of:
<div class="dropdown col-md-6">
You might want to look at the Input Group / Input Group Add-On documentation:
http://v4-alpha.getbootstrap.com/components/input-group/
You need to also specify display:inline for the span to overwrite the display: table-cell; of the .input-group-addon class on it.
See this bootply fiddle
(bad practice alert)
To make exactly what you ask, you can use this style
<span class="input-group-addon" id="basic-addon1" style="display:inline-block; width:auto;float:left;height:35px;line-height:21px;">warehouse</span>
Can also be like this.
<div class="form-group form-inline">
<span class="col-md-2 control-label">Metadata</span>
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example</button>
</div>

Bootstrap adjust dropdown-menu width

I am using a dropdown-menu to show the candidate options I can choose. And I also want an input to filter the options, so when I enter something, the dropdown-menu should also be shown. So I want to adjust the width of the dropdown-menu to be equal to the input. And how can I show it when the I enter something in the input?
The html I current use is:
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div><!-- /btn-group -->
Actually you are searching for some kind of suggestion search box with given selectable choices if I understood correctly.
See this thread:twitter bootstrap autocomplete dropdown / combobox with Knockoutjs
Solution suggestions: selectize.js or Select2
The aspect of automatically adjusting the dropdown's width to be equal to the input's width is hard to achieve because it would cut off some of your given choices (example: Input is only one character - Dropdown would only show first character of every choice). This can't be what you want to achieve.
possible solution:
$('.dropdown-menu').width($('.input-group').width());
.input-group{
width:33%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div><!-- /btn-group -->

Inline search box form with input group dropdown - problems with text input width

I'm trying to do seach box like this:
What's the best way of doing it with bootstrap?.
I was playing with inline form and input group dropdown list, but I have problems with text input width, as it's not fills out whole page width.
http://www.bootply.com/LRUm7PdeMN
How about checking the snippet..
Rest of styling you can do yourself..
.container {
padding-top: 50px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="search-box">
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" aria-label="..." placeholder="Search ...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">All categories <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Wszystkie kategorie
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
</ul>
<button type="submit" class="btn btn-default">
<i class="fa fa-search"></i>
</button>
</div>
<!-- /btn-group -->
</div>
<!-- /input-group -->
</div>
</form>
</div>
</div>
</div>
</div>

Bootstrap Input Group with Dropdown Menu

I am using a Legacy Bootstrap version (2.3) to support a tool that is not planned for upgrade anytime soon.
I am trying to make a simple Filter Style Dropdown & Input Group but I am having some issues with the menus.
Here is my code:
<div id="main" class="container">
<div class="page-header">
<h3 class="text-info">
Training Summary <small>Schedule Breakdown</small>
<span class="pull-right">
<div class="input-prepend input-append">
<button tabindex="-1" data-toggle="dropdown" class="btn dropdown-toggle">
Start Date <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
<input class="span2 dp cen" type="text" placeholder="Select a Start Date" name="startDate">
<button tabindex="-1" data-toggle="dropdown" class="btn dropdown-toggle">
End Date <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
<input class="span2 dp cen" type="text" placeholder="Select an End Date" name="endDate">
<button class="btn" type="button" name="fetch"><i class="icon-refresh"></i></button>
</div>
</span>
</h3>
</div>
What I am trying to do is get the dropdown menus to fire when you click on the "Start Date" or "End Date" dropdowns. Nothing appears to be happening and I'm not too sure why.
I created a fiddle to show the issue: http://jsfiddle.net/3h6x6ztw/1/
My goal is to get the dropdown menu to show up under the buttons as they normally would in a dropdown menu. Not sure if it's something I am missing or just a syntax issue.
In Bootstrap plugins can be included individually (using Bootstrap's individual *.js files), or all at once (using bootstrap.js or the minified bootstrap.min.js).
Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files).
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Also you have to set a content for the button an the ul.dropdown-menu with position: relative because ul.dropdown-menu has position: absolute the default in bootstrap is btn-group
something like this:
<div class="btn-group">
<button tabindex="-1" data-toggle="dropdown" class="btn dropdown-toggle">
Start Date <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
</ul>
</div>
Here a jsfiddle example to play with