Menu
I'd like to create a form with the following layout using Bootstrap 3:
I have a jsfiddle with an attempt here: http://jsfiddle.net/quyB6/
And the markup I've tried:
<form> <div class="form-group col-md-4"> <label for="name" class="control-label">Line Height</label> <input type="number" value='' class="form-control" id="lineHeight"> </div> <div class="form-group col-md-4"> <label for="name" class="control-label">Padding Top</label> <input type="number" value='' class="form-control" id="paddingTop" /> </div> <div class="form-group col-md-4"> <label for="name" class="control-label">Padding Bottom</label> <input type="number" value='' class="form-control" id="paddingBottom"> </div> </div> 
824
Using float and overflow attributes: Make a label and style it with float attribute. Now set the label float(position) left or right according to your requirement. This will align your label accordingly. Overflow property for input is used here to clip the overflow part and show the rest.
There are no special styling considerations for <label> elements — structurally they are simple inline elements, and so can be styled in much the same way as a <span> or <a> element.
Floating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's placeholder attribute instead. Labels are aligned with the input line and always visible.
Not all inputs need labels An input with a type="submit" or type="button" does not need a label — the value attribute acts as the accessible label text instead. An input with type="hidden" is also fine without a label.
I think the simplest solution would be to add col-xs-4 to the class of each div. That will make sure the divs will be inline for the jsfiddle example. Additionally, you should close the form tag with </form>.
<form> <div class="form-group col-xs-4 col-md-4"> <label for="name" class="control-label">Line Height</label> <input type="email" value='' class="form-control" id="name" placeholder="Ime"> </div> <div class="form-group col-xs-4 col-md-4"> <label for="name" class="control-label">Padding Top</label> <input type="email" value='' class="form-control" id="name" placeholder="Ime"> </div> <div class="form-group col-xs-4 col-md-4"> <label for="name" class="control-label">Padding Bottom</label> <input type="email" value='' class="form-control" id="name" placeholder="Ime"> </div> </form> For bootstrap v4 you can use d-flex flex-column:
<div class="form-group col-md-4"> <div class="d-flex flex-column"> <label for="name" class="control-label">Line Height</label> <input type="number" value='' class="form-control" id="lineHeight"> </div> </div> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
