Please help me out, after adding the extra input-group-addon I am losing the markup of this form field. I would also like to have the chevron icon moved to the end of the form field instead of the input-group-addon. Even the label is now in the wrong position.
<?php
<div class="col-md-6">
<div class="input-group has-success has-feedback" id="add_km_tarief_div">
<label for="add_km_tarief_div">Tarief</label>
<span class="input-group-addon">€</span>
<input type="number" min="0" step="0.01" max="1" class="form-control" id="add_km_tarief" name="add_km_tarief" value="0.19" onkeyup="validate_add_table_1()">
<span class="input-group-addon">p/km</span>
<span class="glyphicon glyphicon-ok form-control-feedback" id="add_km_tarief_glyp"></span>
</div>
</div>
?>
Try With This
<div class="col-md-6">
<div class="input-group has-success has-feedback" id="add_km_tarief_div">
<label for="add_km_tarief_div" class="addyourclassname">Tarief</label>
<span class="input-group-addon">€</span>
<input type="number" min="0" step="0.01" max="1" class="form-control" id="add_km_tarief" name="add_km_tarief" value="0.19" onkeyup="validate_add_table_1()">
<span class="input-group-addon">p/km</span>
<span class="glyphicon glyphicon-ok form-control-feedback addyourownclass" id="add_km_tarief_glyp"></span>
</div>
</div>
Css:
.addyourclassname{float:left}
.addyourownclass{float: left;
position: relative;
top: 0;}
As you can see in the picture the height gets all crazy when I add a label element to the form-group I'm using Bootstrap 3.7
here is my HTML
<div class="form-group date input-group {{ $errors->has('medical_date_test') ? 'has-error' : ''}}">
<label>Medical date test <span class="required">*</span></label>
<input type="text" class="form-control" name="medical_date_test" value="{{ old('medical_date_test') }}">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
here is a JSFiddle
https://jsfiddle.net/0d2a0kzr/
you just need to put a label outside the div class "form-group https://jsfiddle.net/j1aw98jm/2/
<label>Medical date test <span class="required">*</span></label>
<div class="form-group date input-group">
<input type="text" class="form-control" name="medical_date_test">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
No clue how I can do this, since BS 4 doesn't support glyphicons. Do I set it up as a background or do I apply different positioning to a font-awesome icon?
This is my code so far:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="form-group col-md-4">
<input class="form-control rounded-0 py-2" type="search" value="search" id="example-search-input">
</div>
<!-- /.form-group -->
I want to use this font-awesome icon. And I've tried adding it as a background-image too, as in:
.form-control {
background-image: url('https://res.cloudinary.com/dt9b7pad3/image/upload/v1502810110/angle-down-dark_dkyopo.png');
background-position: right center 5px;
}
But that doesn't do anything. The only way I can think of is to add font-awesome icon and then set the positioning to absolute, right? But I'm not sure if that's the 'clean' and correct way to do it? Do I need to take a different approach to this? Someone help! Thank you!
Bootstrap 5 Beta - (update 2021)
<div class="input-group">
<input class="form-control border-end-0 border rounded-pill" type="text" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary bg-white border-start-0 border rounded-pill ms-n3" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
Demo
Bootstrap 4 (original answer)
Why not use an input-group?
<div class="input-group col-md-4">
<input class="form-control py-2" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
And, you can make it appear inside the input using the border utils...
<div class="input-group col-md-4">
<input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border-left-0 border" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
Or, using a input-group-text w/o the gray background so the icon appears inside the input...
<div class="input-group">
<input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<div class="input-group-text bg-transparent"><i class="fa fa-search"></i></div>
</span>
</div>
Alternately, you can use the grid (row>col-) with no gutter spacing:
<div class="row no-gutters">
<div class="col">
<input class="form-control border-secondary border-right-0 rounded-0" type="search" value="search" id="example-search-input4">
</div>
<div class="col-auto">
<button class="btn btn-outline-secondary border-left-0 rounded-0 rounded-right" type="button">
<i class="fa fa-search"></i>
</button>
</div>
</div>
Or, prepend the icon like this...
<div class="input-group">
<span class="input-group-prepend">
<div class="input-group-text bg-transparent border-right-0">
<i class="fa fa-search"></i>
</div>
</span>
<input class="form-control py-2 border-left-0 border" type="search" value="..." id="example-search-input" />
<span class="input-group-append">
<button class="btn btn-outline-secondary border-left-0 border" type="button">
Search
</button>
</span>
</div>
Demo of all Bootstrap 4 icon input options
Example with validation icons
I made another variant with dropdown menu (perhaps for advanced search etc)..
Here is how it looks like:
<div class="input-group my-4 col-6 mx-auto">
<input class="form-control py-2 border-right-0 border" type="search" placeholder="Type something..." id="example-search-input">
<span class="input-group-append">
<button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split border border-left-0 border-right-0 rounded-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<button class="btn btn-outline-primary rounded-right" type="button">
<i class="fas fa-search"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</span>
</div>
Note: It appears green in the screenshot because my site main theme is green.
Here is an input box with a search icon on the right.
<div class="input-group">
<input class="form-control py-2 border-right-0 border" type="search" placeholder="Search">
<div class="input-group-append">
<div class="input-group-text" id="btnGroupAddon2"><i class="fa fa-search"></i></div>
</div>
</div>
Here is an input box with a search icon on the left.
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon2"><i class="fa fa-search"></i></div>
</div>
<input class="form-control py-2 border-right-0 border" type="search" placeholder="Search">
</div>
Here's a fairly simple way to achieve it by enclosing both the magnifying glass icon and the input field inside a div with relative positioning.
Absolute positioning is applied to the icon, which takes it out of the normal document layout flow. The icon is then positioned inside the input. Left padding is applied to the input so that the user's input appears to the right of the icon.
Note that this example places the magnifying glass icon on the left instead of the right. This is recommended when using <input type="search"> as Chrome adds an X button in the right side of the searchbox. If we placed the icon there it would overlay the X button and look fugly.
Here is the needed Bootstrap markup.
<div class="position-relative">
<i class="fa fa-search position-absolute"></i>
<input class="form-control" type="search">
</div>
...and a couple CSS classes for the things which I couldn't do with Bootstrap classes:
i {
font-size: 1rem;
color: #333;
top: .75rem;
left: .75rem
}
input {
padding-left: 2.5rem;
}
You may have to fiddle with the values for top, left, and padding-left.
in ASPX bootstrap v4.0.0, no beta (dl 21-01-2018)
<div class="input-group">
<asp:TextBox ID="txt_Product" runat="server" CssClass="form-control" placeholder="Product"></asp:TextBox>
<div class="input-group-append">
<asp:LinkButton ID="LinkButton3" runat="server" CssClass="btn btn-outline-primary">
<i class="ICON-copyright"></i>
</asp:LinkButton>
</div>
It is also possible with position-absolute in Bootstrap 5:
<form class="d-flex flex-row position-relative">
<input type="search" class="form-control" id="example-search-input">
<button class="btn btn-outline-success border-0 position-absolute end-0" type="submit">
<i class="fa fa-search"></i> Search
</button>
</form>
With Bootstrap 5 and bootstrap-icons library:
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search"
aria-describedby="button-addon">
<button class="btn btn-outline-secondary" type="button" id="button-addon"><i class="bi bi-search"></i></button>
</div>
you can also do in this way using input-group
<div class="input-group">
<input class="form-control"
placeholder="I can help you to find anything you want!">
<div class="input-group-addon" ><i class="fa fa-search"></i></div>
</div>
codeply
I am using a Bootstrap Template (INSPINIA), and integrating it with PHP.
All of the sample data structures use buttons, but to make these interact with the server I need to change them to a submit and wrap them in a form.
Can I best retain the original bootstrap styling of a button, but gain the functionality of a form submit without having to amend bootstraps own CSS?
Original Bootstrap code:
<div class="input-group">
<input type="text" placeholder="Add new task. " class="input input-sm form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-sm btn-white"> <i class="fa fa-plus"></i> Add task</button>
</span>
</div>
What I have ended up with:
<div class="input-group">
<form action="index.php" method="post">
<span class="input-group-btn">
<input type="text" placeholder="Add new task. " name="ToDo" class="input input-sm form-control">
<input type="submit" class="btn btn-sm btn-white" value="Add Task" name="addToDo" />
</span>
</form>
</div>
The above code doesn't look the same and shows some odd behaviour on smaller devices.
You can just change the type of the button to submit, and you're good to go:
<div class="input-group">
<input type="text" placeholder="Add new task. " class="input input-sm form-control">
<span class="input-group-btn">
<button type="submit" class="btn btn-sm btn-white"> <i class="fa fa-plus"></i> Add task</button>
</span>
</div>
You have to add the form tag outside input-group to keep the styling:
<form action="index.php" method="post">
<div class="input-group">
<input type="text" placeholder="Add new task. " class="input input-sm form-control">
<span class="input-group-btn">
<button type="submit" class="btn btn-sm btn-white"> <i class="fa fa-plus"></i> Add task</button>
</span>
</div>
</form>
What I have done here is use the standard Bootstrap grid system of .col-md-5 and .col-md-7 under .row to place all the element on 1 row but I can't seem to make it work.
Another thing is the element keeps getting pulled down to another line below the input.
<div class='col-md-12'>
<div class='row'>
<div class='col-md-5'>
<select class='form-control'>
<option value='us'>USA</option>
</select>
</div>
<div class='col-md-7'>
<span class="" style="display: inline">
<span class="input-group">
<span class="input-group-addon">
ZIP/Postal code
</span>
<input class="form-control" type="text">
</span>
<a href='#' class=''>
cancel
</a>
</span>
</div>
</div>
</div>
How can I put all these onto 1 line?
Here's a jsfiddle for it: http://jsfiddle.net/2656xt63/
There's nothing wrong with your bootstrap column classes, but the elements will only appear side by side on md screen widths (>= 992px). The fiddle panel is narrower than that so the elements are stacked.
If you use col-xs-* the elements will appear side by side at all times.
Alternatively, for a small form such as this, you could use an inline form:
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="country">Country</label>
<select class='form-control' id="country">
<option value='us'>USA</option>
</select>
</div>
<div class="form-group">
<span class="input-group">
<span class="input-group-addon">
ZIP/Postal code
</span>
<input class="form-control" type="text">
</span>
</div>
<div class="form-group">
<a href="#" class="btn btn-default">
cancel
</a>
</div>
</form>
Here's a bootply demonstrating the inline form.