Combine two input verticaly in one form using Bootstrap 3 - html

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

Related

How to make a Bootstrap input-group look like a form-group

I'm trying to make the last row look exactly like the others, but with the icon appended to the text box. I can't seem to get the width right!
(I apologize... I don't know how to make the code snippet render properly in this page. You have to view full screen.)
<link href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row justify-content-md-center">
<div class="col-sm-3">
<div class="form-group row">
<label>Name:</label>
<input type="text" class="form-control" />
</div>
<div class="form-group row">
<label>Date From:</label>
<input type="text" class="form-control" />
</div>
<div class="input-group row">
<label>Date To:</label>
<input type="text" class="form-control" />
<div class="input-group-append">
<div class="input-group-text" id="btnGroupAddon2">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
Retain the form group of the div above "Date to:" label, then you can insert a div wrapping the input and image div's and add the input-group class which will produce the required result, please check my below example!
<link href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row justify-content-md-center">
<div class="col-sm-3">
<div class="form-group row">
<label>Name:</label>
<input type="text" class="form-control" />
</div>
<div class="form-group row">
<label>Date From:</label>
<input type="text" class="form-control" />
</div>
<div class="form-group row">
<label>Date To:</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-append">
<div class="input-group-text" id="btnGroupAddon2">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
If you want to keep it to the left, it takes a bit of out of class work like so:
<link href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row justify-content-md-center">
<div class="col-sm-3">
<div class="form-group row">
<label>Name:</label>
<input type="text" class="form-control" />
</div>
<div class="form-group row">
<label>Date From:</label>
<input type="text" class="form-control" />
</div>
<div class="input-group row">
<label class="pt-2">Date To:</label>
<input type="text" class="form-control ml-2"
style="border-top-left-radius: .25rem;border-bottom-left-radius: .25rem;"/>
<div class="input-group-append">
<div class="input-group-text" id="btnGroupAddon2">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>

Bootstrap 4 set a width of input-group inputs

Can you help me with this problem? I have an input-group within bootstrap 4. In my input-group I have 2 inputs, first with prepend and second with append.
It's wrapped in a col-12 div in a form-group and I need to set the width of the first input and second to some specific (but different) value. I tried to set the width in my custom css, but without success. Is it possible? I know, that I can set it via wrapping it in a div with another col, but than I have both input below and not side by side.
Code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="form-group">
<label for="telephone">Telephone</label>
<div class="row">
<div class="col-12">
<div class="input-group telephone-input">
<div class="input-group-prepend preselection-prepend">
<div class="input-group-text">+</div>
</div>
<input class="form-control" id="preselection" type="text" maxlength="3" name="preselection" placeholder="Preselection" autocomplete="off" required>
<input class="form-control" id="telephone" placeholder="Telephone number" type="tel" maxlength="11" name="telephone" autocomplete="off" required>
<span class="placeholder" id="tele-holder"></span>
<div class="input-group-append" id="preselectionToggle">
<div class="input-group-text">
<i class="far fa-plus-square"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>
You can do it with class w-50 and w-100
like this
<div class="input-group">
<div class="input-group-prepend w-50">
<span class="input-group-text w-100">label</span>
</div>
<input type="text" class="form-control " />
</div>
I've found a solution on the internet and you can visit it at codeply!.
It is pretty neat and simple. To do so, you just need to add the following CSS to your stylesheet.
.input-group>.input-group-prepend {
flex: 0 0 30%;
}
.input-group .input-group-text {
width: 100%;
}
To set the width of the input-group-text, just change the value of the flex of the input-group, for instance, as seen above 30% of the total width.
Thank the author of the link above for this simple code snippet.
I found a solution. I tried set max-width instead of only width and it works.
For the above example it would be:
#preselection {
max-width: 15%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="form-group">
<label for="telephone">Telephone</label>
<div class="row">
<div class="col-12">
<div class="input-group telephone-input">
<div class="input-group-prepend preselection-prepend">
<div class="input-group-text">+</div>
</div>
<input class="form-control" id="preselection" type="text" maxlength="3" name="preselection" placeholder="Preselection" autocomplete="off" required>
<input class="form-control" id="telephone" placeholder="Telephone number" type="tel" maxlength="11" name="telephone" autocomplete="off" required>
<span class="placeholder" id="tele-holder"></span>
<div class="input-group-append" id="preselectionToggle">
<div class="input-group-text">
<i class="far fa-plus-square"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>

Bootstrap font awesome in textbox not working properly with label

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/

Create vertical form elements inside an inline form in Bootstrap 3.3.6

I've been trying to create a bootstrap form with multiple horizontal and vertical elements but couldn't get what I wanted
Requirement
Main <form> contains vertical <formfield> elements
<formfield> element contain all elements horizontally
<formfield> element has one <div> element that contain some vertical elements inside it
I have accomplished first two requirements without any issue but I'm clueless when it comes to last requirement.I've tried searching on google and stakoverflow but no luck yet.
Needed form
Form I'm getting right now
My Code
<form id="grn_items_form">
<div class="form-inline">
<fieldset id="1" class="grn_item_fieldset ">
<div class="form-group">
<button class="form-control" id="1" class="remove_product" type="button">
<i class="fa fa-trash"></i>
</button>
</div>
<div class="form-group">
<input class="form-control" id="1" type="text" placeholder="Variation">
</div>
<div class="form-group">
<input class="form-control" id="1" type="text" placeholder="Unit Price">
</div>
<div class="form-group">
<input class="form-control" id="1" class="quantity" type="text" disabled="">
</div>
<div class="form-group">
<button class="form-control" id="1" class="add_serial" type="button">Add Serials</button>
</div>
<div class="row ">
<div class="form-group">
<input class="form-control" type="text" name="mytext[]" placeholder="Serial Here">
<a class="form-control remove_field" href="#">
<i class="fa fa-close"></i>
</a>
</div>
<div class="form-group">
<input class="form-control" type="text" name="mytext[]" placeholder="Serial Here">
<a class="form-control remove_field" href="#">
<i class="fa fa-close"></i>
</a>
</div>
<div class="form-group">
<input class="form-control" type="text" name="mytext[]" placeholder="Serial Here">
<a class="form-control remove_field" href="#">
<i class="fa fa-close"></i>
</a>
</div>
</div>
</fieldset>
</div>
<div class="form-inline">
<fieldset id="2" class="grn_item_fieldset">
<div class="form-group">
<button class="form-control" id="2" class="remove_product" type="button">
<i class="fa fa-trash"></i>
</button>
</div>
<div class="form-group">
<input class="form-control" id="2" type="text" placeholder="Variation">
</div>
<div class="form-group">
<input class="form-control" id="2" type="text" placeholder="Unit Price">
</div>
<div class="form-group">
<input class="form-control quantity" id="2" type="text" placeholder="Quantity">
</div>
</fieldset>
</div>
</form>
Any suggestion on right direction is highly appreciated.
This should help. It's not actually showing right on jsfiddle but try to copy the HTML and run local.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<form>
<div class="row" id="row1">
<fieldset>
<div class="row" id="main">
<div class="col-md-1">
<button class="form-control" id="1" class="remove_product" type="button">
<i class="fa fa-trash"></i>
</button>
</div>
<div class="col-md-2">
<input type="text" class="form-control" placeholder="Variation">
</div>
<div class="col-md-2">
<input type="text" class="form-control" placeholder="Unit Price">
</div>
<div class="col-md-2"></div>
<div class="col-md-2">
<button class="form-control" id="1" class="add_serial" type="button">
Add Serials
</button>
</div>
<div class="col-md-3">
<div class="col-md-10">
<input class="form-control " type="text" name="mytext[]" placeholder="Serial Here">
</div>
<div class="col-md-1">
<a class="form-control remove_field" href="#"> D </a>
</div>
</div>
</div>
<div class="row" id="sub1">
<div class="col-md-3 pull-right">
<div class="col-md-10">
<input class="form-control " type="text" name="mytext[]" placeholder="Serial Here">
</div>
<div class="col-md-1">
<a class="form-control remove_field" href="#"> D </a>
</div>
</div>
</div>
<div class="row" id="sub1">
<div class="col-md-3 pull-right">
<div class="col-md-10">
<input class="form-control " type="text" name="mytext[]" placeholder="Serial Here">
</div>
<div class="col-md-1">
<a class="form-control remove_field" href="#"> D </a>
</div>
</div>
</div>
</fieldset>
</div>
</form>
</div>

Fixed length of span size in input form

I have a form with some input tags and for each of it(I'm using bootstrap). I would like to use span with backgroud coloro but I have a problem with the size of it, because depends of text length (the best way is to use awesome, but I don't find icons useful to my purpose).
Is there a way to fix the width of the grey part of div? I tried with width, like the image, but it resize all the input fields.Thanks
<div class="row">
<!-- Fleet fields -->
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-car fa-fw"></i> Fleet inputs
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<form role="form">
<div class="form-group input-group">
<span class="input-group-addon">Ap</span> <input type="text"
class="form-control" placeholder="Application">
</div>
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="Cubic">
<span class="input-group-addon">cm<sup>3</sup></span>
</div>
<div class="form-group input-group">
<input type="number" class="form-control" placeholder="Power">
<span class="input-group-addon">H P</span>
</div>
<div class="form-group input-group">
<span class="input-group-addon">Eu</span> <input type="text"
class="form-control" placeholder="Euro class">
</div>
<div class="form-group input-group">
<span class="input-group-addon">Et</span> <input type="text"
class="form-control" placeholder="Engine type">
</div>
<div class="form-group input-group">
<span class="input-group-addon">Tr</span> <input type="text"
class="form-control" placeholder="Traction">
</div>
<div class="form-group input-group">
<span class="input-group-addon">Ts</span> <input type="text"
class="form-control" placeholder="Transmission">
</div>
<div class="form-group">
<label>Note</label>
<textarea class="form-control" rows="2" maxlength="100"></textarea>
</div>
</form>
</div>
<!-- /.panel-body -->
</div>
</div>
Css of input -group-addon
.input-group-addon{color:#3c763d;background-color:#dff0d8;border-color:#3c763d}
you can use for fixed width of grey part of div
you can use for fixed width of grey part of div
1.<div class="input-group input-group-lg"> <span class="input-group-addon" id="sizing-addon3">#</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3"> </div>
2. can use also another div <div class="input-group input-group-sm">
3. can use also <div class="input-group">
for the Icon you can use Class="fa fa-edit" or Class="glyphicon glyphicon-pencil"
for the Icon you can use Class="fa fa-edit" or Class="glyphicon glyphicon-pencil"