I would like to connect multiple text inputs with the same layout as connecting text-inputs with appends. However, I am not sure how to do that. As per docs, it is only possible to append a button or text to a text-input:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="input-group">
<label class="input-group-addon">
<input type="checkbox">
</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
However, I would like to connect 2 text-inputs. But when I try, the inputs start stacking instead of beeing displayed next to eachother:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="input-group">
<label class="input-group-addon">
<input type="checkbox">
</label>
<input type="text" class="form-control">
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
How can I achieve what I want?
You have to change the width property of class .input-group .form-control to auto. It's currently 100%. That's why the input is taking the entire space.
Note: This will override the default behaviour, so you may add custom class name and then modify, if you want to avoid default modification.
Related
I have this html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="form-control-label" for="salary" name="salary">Specify the salary for <span
class="user-detail">{{user?.first_name}}</span></label>
<input id="salary" class="form-control form-control-alternative" type="text">
</div>
</div>
</div>
</div>
when I apply form-control then the input goes till the end of the parent container.
Here I will need to write numbers on the input so it will be too big.
How can I decrease its size ?
If I try to apply custom style
.form-control {
width:200px !important;
}
then it starts to be inline-block instead like block element.
You can use Bootstrap's column sizing on form controls. Here I'm using col-* for various sizes.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="form-group">
<label class="form-control-label" for="salary" name="salary">Specify the salary for <span
class="user-detail">{{user?.first_name}}</span></label>
<input id="salary" class="form-control form-control-alternative col-4" type="text">
</div>
<div class="form-group">
<label class="form-control-label" for="salary" name="salary">Specify the salary for <span
class="user-detail">{{user?.first_name}}</span></label>
<input id="salary" class="form-control form-control-alternative col-6" type="text">
</div>
<div class="form-group">
<label class="form-control-label" for="salary" name="salary">Specify the salary for <span
class="user-detail">{{user?.first_name}}</span></label>
<input id="salary" class="form-control form-control-alternative col-8" type="text">
</div>
</div>
</div>
</div>
See Bootstrap's column sizing docs.
I have a HTML input.
The small help text i populate with Jquery.
My problem is that the input-group-addon height will stretch all way down to the smallelement. I´d like it to be as high as the input.
How can i solve this?
<div class="input-group">
<div class="input-group-addon">Obj. Nr</div>
<input type="text" class="form-control">
<small class="form-text text-muted"></small>
</div>
Just add small element after input
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-addon">Obj. Nr</div>
<input type="text" class="form-control">
</div>
<small class="form-text text-muted">Small element</small>
</div>
I'm facing a problem I don't really know how to deal with.
I'm working on BootStrap 3 and i'm trying to make some inline forms because it is more user-friendly than a full vertical form (I don't want to scroll for ever)
I find some way to inline the normal inputs, but when it comes to the input with icons (font awesome), I can figure how to inline them, but they inline side to side without any space between them.
Also, I don't figure out how to change their width as I would do with normal input (col-sm-4 for example).
I would like the "Email" and "Telephone" to be scaped and to change their width
Please have a look at my code and the following image explaining it:
http://www.bootply.com/T8w3oRE3Sn
You were missing few things in the form group so I have wrapped things up. Hope it will help you :)
Below is the working snippet:
.myform .form-inline .input-group .input-group-addon{ width:20px;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row myform">
<div class="col-xs-12">
<form name="myform" role="form" novalidate>
<div class="form-inline ">
<div class="form-group col-xs-6">
<div class="input-group col-xs-12">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input type="email" class="form-control" placeholder="Email de l'interlocuteur">
</div>
</div>
<div class="form-group col-xs-6">
<div class="input-group col-xs-12">
<span class="input-group-addon"><i class="fa fa-phone"></i></span>
<input type="email" class="form-control" placeholder="Téléphone de l'interlocuteur">
</div>
</div>
</div>
</form>
</div>
</div>
Try this
IF you see it in large screen it will be inline.
You have to use form-inline class to make form inline.
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<form class="form-inline">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
You just need to deal with good understanding of bootstrap grid system
<div class="form-group row">
<label for="inputEmail3" class="col-sm-1 control-label">Interlocuteur</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="inputEmail3">
</div>
<label for="inputEmail5" class="col-sm-1 control-label">Poste</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="inputEmail5" placeholder="DeInterlocuteur">
</div>
I will like to put an image beside and input field using bootstrap. i want my output to be like :`
but with the below code i get
<div class="form-group row">
<label for="inputTitle" class="col-sm-2 col-form-label">Title</label>
<div class="col-sm-10">
<span class="glyphicon glyphicon-phone"></span>
<input type="title" class="form-control" id="inputTitle" >
</div>
</div>
The form-control class will make your input 100% wide, meaning it will flow onto the next line. Additionally, it will make it display as a block element.
If I were you, I would look at using input groups instead, this is a nice tidy way of achieving the same effect:
Also, you have given your text input a type of title which is not valid. It's likely just a text input.
<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.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-phone"></span></span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
I think this should do it
<div class="form-group">
<label class="control-label">Title</label>
<div class="input-group"><span class="input-group-addon"></span>
<input type="text" class="form-control">
</div>
</div>
I have a row that is split down into various columns and sub-columns. In the proper example there are several more inputs but I've removed them for clarity as they're not needed for this example.
<form id="inputForm" class="form-inline" role="form">
<div class="row">
<div class="col-xs-4">
<label class="control-label">Primary Packaging:</label>
</div>
<div class="col-xs-6">
<label for="pack1Height" class="control-label">Height:</label>
<div class="input-group">
<input type="text" id="pack1Height" class="form-control small text-right" />
<span class="input-group-addon">mm</span>
</div>
</div>
<div class="col-xs-2">
<label class="control-label">Vol:</label>
<label class="control-label">999</label>
<label class="control-label">cm<sup>3</sup></label>
</div>
</div>
</form>
If you look at http://jsfiddle.net/53vu25ad/ you can see the issue as "Primary Packaging" and "Vol: 999 cm3" are not vertically aligned within the row - they're top aligned. Is there something I'm missing here?
(ps: On my form, the "height" label and the input element are on the same line, I have no idea why they're not in this jsfiddle, but it's not relevant to the question - I would still expect to see the two labels either side aligned vertically).
Using bleeding-edge not-yet-released Bootstrap v3.2.1: JS Fiddle
The trick is to use a dummy .form-control-static:
<div class="col-xs-4">
<div class="form-group">
<label class="control-label">Primary Packaging:</label>
<p class="form-control-static"> </p>
</div>
</div>
Well without using experimental bootstrap, the way I got around this was adding a simple custom class that matched the form-control element height of 34px.
By setting the row line-height to the same, it automatically valigns content.
.fixedRow {
line-height: 34px;
}
<div class="row fixedRow">
<div class="col-xs-4">
<label class="control-label">Primary Packaging:</label>
</div>
...
Updated jsfiddle: http://jsfiddle.net/53vu25ad/2/
Please find the updated jsfiddle
You may need to use the .form-group class for .form-inline
<form id="inputForm" class="form-inline" role="form">
<div class="form-group">
<label class="control-label">Primary Packaging:</label>
</div>
<div class="form-group">
<label for="pack1Height" class="control-label">Height:</label>
<div class="input-group">
<input type="text" id="pack1Height" class="form-control small text-right" />
<span class="input-group-addon fw1">mm</span>
</div>
</div>
<div class="form-group">
<label class="control-label">Vol:</label>
<label class="control-label">999</label>
<label class="control-label">cm<sup>3</sup></label>
</div>
</div>
</div>
</form>