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>
Related
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.
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>
I'm trying to put an input field's label next to it instead of above it using bootstrap. Wrapping this in form-horizontal works, but it's not actually in a form (just an ajax call that reads the value). Is there a way to simply move the label to the left side of the input?
<div class="controls-row">
<div class="control-group">
<label class="control-label" for="my-number">ALabel</label>
<div class="controls">
<input id="my-number" type="number"/>
</div>
</div>
</div>
The fiddle is at http://jsfiddle.net/7VmR9/
Yes, you can do this by bootstrap column structure.
<div class="form-group">
<label for="name" class="col-lg-4">Name:</label>
<div class="col-lg-8">
<input type="text" class="form-control" name="name" id="name">
</div>
</div>
Here is a Bootply Demo
The div is a block element, that means it will take as much width as it can and the input element is in it.
If you want the label to be next to the input element: either put the label in the div or make the div an inline-block element.
<form class="form-inline">
<div class="form-group">
<label for="my-number">ALabel</label>
<input type="number" id="my-number" class="form-control">
</div>
</form>
Source: https://getbootstrap.com/docs/3.3/css/#forms-inline
You can take help directly from website they provided, well documented.
Here is a link to a Fiddle with Bootstrap css.
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email"/>
</div>
</div>