I have a bootstrap form in which i have used text boxes with the label and it is not working properly. If i removed the font awesome icon which is inside the span tag it is working properly this is my html
<form>
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form>
I want to do something like this
https://jsbin.com/quxodidebi/edit?html,js,output
How about this code? Bootstrap 3:
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
</div>
Bootstrap 4
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-user fa-fw"></i></span>
</div>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
</div>
Code snippet:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-user fa-fw"></i>
</span>
</div>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
</div>
Link to JS Fiddle: https://jsfiddle.net/sefnanLm/
Related
I have this code:
<div class="{{($type != 'forecast')?'col-md-8':'col-md-8'}}">
<div class="form-group">
<label>Name:</label>
<input type="text" class="form-control" name="name" value="12" {{($viewOnly)?'disabled':''}} >
<i class="fa fa-info-circle" title="test"></i>
</div>
</div>
this is the UI
I just want the <i> icon be next to the input field and not in the bottom.
How I can achieve that?
Wrap the input field and the icon within a div with the class input-group.
<div class="input-group">
<input type="text" class="form-control" name="name" value="12" {{($viewOnly)?'disabled':''}}>
<i class="fa fa-info-circle" title="test"></i>
</div>
this is the solution
<div class="form-group">
<label>Name:</label>
<div class="input-group" style="display: flex">
<input type="text" class="form-control" name="name" value="12" {{($viewOnly)?'disabled':''}} >
<i class="fa fa-info-circle" title="test"></i>
</div>
</div>
I have two datepickers with different Id's and only one is working with
<div class="form-group">
<label class="col-sm-3 control-label">From</label>
<div class="col-sm-4">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control" name="peak_start_date_from" value="" id="start_datepicker" required>
</div>
</div>
Not working
<div class="form-group">
<label class="col-sm-3 control-label">From</label>
<div class="col-sm-4">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control" name="peak_start_date_from" value="" id="peak_start_date_from" required>
</div>
</div>
$(document).ready(function() {
$('#peak_start_date_from').datepicker();
});
<form class="form-inline">
<div class="form-group">
<div class="input-daterange input-group" id="datepicker">
<label>From:</label>
<input type="text" class="input-sm form-inline" name="start" />
<span class="input-group-addon"><i class="fa fa-calendar fa-lg" aria-hidden="true"></i></span>
</div>
</div>
<div class="form-group">
<div class="input-daterange input-group" id="datepicker">
<label>To:</label>
<input type="text" class="input-sm form-inline" name="end" />
<span class="input-group-addon"><i class="fa fa-calendar fa-lg" aria-hidden="true"></i></span>
</div>
</div>
</form>
when I change class="form-control" for input, it will be ok, but it also change size of whole form :(
Solve:
<form class="form-inline">
<div class="form-group">
<div class="input-daterange" id="datepicker">
<span>From:</span>
<div class="input-group">
<input type="text" class="input-sm form-inline" name="start"/>
<span class="input-group-addon"><i class="fa fa-calendar fa-lg" aria-hidden="true"></i></span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-daterange" id="datepicker">
<span>To:</span>
<div class="input-group">
<input type="text" class="input-sm form-inline" name="end"/>
<span class="input-group-addon"><i class="fa fa-calendar fa-lg" aria-hidden="true"></i></span>
</div>
</div>
</div>
</form>
bootstrap http://i.stack.img
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<form>
<div class="input-group inp">
<span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group inp">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input class="form-control" type="password" placeholder="Password">
</div>
</form>
</div>
ur.com/liYfx.png
Good evening . Can you help me with bootstrap? I can not combine two inputs into one form and add Font Awesome icon using Twitter Botstrap , like in this picture. Thank You very much .
I did something similar in my last project so here you go:
<div class="container">
<div class="row">
<form role="form">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" placeholder="MinVal">
</div>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" placeholder="MinVal">
</div>
</div>
</div>
</form>
</div>
</div>
Working fiddle:
JSFiddle
Fiddle update:
UpdateFiddle
I'm trying to create a simple inline form using input groups to display icons before the inputs. As far as I'm aware of I'm following the documentation but the form doesn't display as expected. See this JSFiddle, it demonstrates the problem. I assumed it should be displayed like this (only with the icons prepended of course). How can this be solved?
My code:
<form class="form-inline" role="form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input type="email" class="form-control" placeholder="Enter email"/>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input type="password" class="form-control" placeholder="Choose password"/>
</div>
</div>
<button type="submit" class="btn btn-default">Create account</button>
</form>
This is known issue and will be fixed in Bootstrap v.3.2.0 according to this ship list.
Before that you can fix it your self like this:
.input-group {
display: inline-table;
vertical-align: middle;
.input-group-addon,
.input-group-btn,
.form-control {
width: auto !important;
}
}
i've made it work like this:
<form class="form-inline" role="form">
<div class="row">
<div class="form-group col-sm-3">
<div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input type="email" class="form-control" placeholder="Enter email" />
</div>
</div>
<div class="form-group col-sm-3">
<div class="input-group"> <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input type="password" class="form-control" placeholder="Choose password" />
</div>
</div>
<button type="submit" class="btn btn-default">Create account</button>
</div>
http://jsfiddle.net/n5qmc/
Taken from Bootstrap Docs
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form. Doing so changes .form-groups to behave as grid rows, so no need for .row.
I also added in semantic attributes for the labels you should always be using on every input (use .sr-only to hide the labels if necessary). This makes the form not inline but horizontal.
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="email" class="sr-only">Email</label>
<div class="input-group col-sm-3">
<span class="input-group-addon">
<i class="fa fa-envelope-o fa-fw"></i>
</span>
<input type="email" id="email" name="email" class="form-control" placeholder="Enter email" />
</div>
<div class="form-group">
<label for="password" class="sr-only">Password</label>
<div class="input-group col-sm-3">
<span class="input-group-addon">
<i class="fa fa-key fa-fw"></i>
</span>
<input type="password" id="password" name="password" class="form-control" placeholder="Choose password" />
</div>
</div>
<button type="submit" class="btn btn-default">Create account</button>
</form>
Not sure if this is helpful, but I thought I would post as I haven't seen this elsewhere. I was trying to get an inline form with inline labels and an add-on using Bootstrap v3. Here is the code that worked for me. I used the grid system in divs to position the label and input group and the add-on within a grid item.
<div class="form-group">
<div class="col-sm-2">
<label class="control-label" for="input_one">Label Text</label>
</div>
<div class="col-sm-10">
<div class="input-group">
<input class="form-control" placeholder="Placeholder Text" type="text" name="input_one" id="input_one">
<span class="input-group-addon">Add on text</span>
</div>
</div>
</div>