Is there a way of making an input text box small (say, col-sm-1) but keep it's label as "full length" ?
All the examples I see on SO show to wrap the label and input with a div like this:
<div class="form-group row">
<div class="col-xs-2">
<label for="code">Short field but i have a reeally long title that I want on one line</label>
<input type="text" class="form-control"/>
</div>
</div>
Which is fine, but then the label is also wrapped in this div:
If I take the label out of the div:
<div class="form-group row">
<label for="code">Short field but i have a reeally long title that I want on one line</label>
<div class="col-xs-2">
<input type="text" class="form-control" />
</div>
</div>
The label is fine, but aligned to the right of the input!
I've created a fiddle to show what I mean:
http://jsfiddle.net/alexjamesbrown/42j2rz32/
How about using separate rows for the input and the label:
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<label for="code">Short field but i have a reeally long title that I want on one line</label>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control"/>
</div>
</div>
</div>
here's a bootply: http://www.bootply.com/EcQtj8LqFy
try:
<div class="form-group row">
<div class="col-xs-6">
<label for="code">Short field but i have a reeally long title that I want on one line</label>
</div>
<div class="col-xs-2">
<input type="text" class="form-control"/>
</div>
</div>
You can just add separate them into different rows.
<div class="row">
<div class="col-xs-12">
<label for="code">
Short field but i have a reeally long title that I want on one line
</label>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" />
</div>
</div>
Related
I have an issue with Bootstrap 4 grid layout & I'm working with Vertical forms.
I would like to nest col-lg-9(child) inside col-lg-6(parent).
for Example:
<div class="form">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="">First name</label>
<input class="form-control" type="text">
</div>
<div class="form-group">
<label for="">Last name</label>
<input class="form-control" type="text">
</div>
</div>
<div class="row">
<div class="col-lg-9">
<div class="col">
<div class="form-group">
<label for="">City</label>
<input type="text">
</div>
</div>
<div class="col">
<div class="form-group">
<label for="">Street</label>
<input type="text">
</div>
</div>
<div class="col">
<div class="form-group">
<label for="">Zip</label>
<input type="text">
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="">Email address</label>
<input class="form-control" type="text">
</div>
<div class="form-group">
<label for="">Additional info</label>
<input class="form-control" type="text">
</div>
</div>
</div>
Created a sample mock-up for additional explanation.
It's because you are nesting columns directly inside other columns. Don't' do that.
When nesting in a column you must first put a Bootstrap row inside it and then put at least one Bootstrap column inside that new row.
Don't ever nest a Bootstrap column directly inside another Bootstrap column.
Here's the nesting structure you must have in your case:
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-lg-9">
content goes here
</div>
</div>
</div>
</div>
</div>
Reference:
https://getbootstrap.com/docs/4.0/layout/grid/#nesting
I am struggling with his problem, I have 4 input fields which should appear in a single line. Each field also has a label and the text length of this label can vary.
Simplified version of my problem
<div class="container">
<div class="row">
<div class="col-md-3">
<label>text</label>
<input class="form-control">
</div>
<div class="col-md-3">
<label>text</label>
<input class="form-control">
</div>
<div class="col-md-3">
<label>text</label>
<input class="form-control">
</div>
<div class="col-md-3">
<label>text text text text text text text text text text text text text text text text text text text</label>
<input class="form-control">
</div>
</div>
</div>
JSFiddle (you probably have to resize the width of the output, otherwise bootstrap will show it vertically)
As you can see here the last input field is not in line with the other ones because the text of the label takes 2 lines. Is there a way to fix this?
You need form-group inside col-md-12 container
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-3">
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</div>
<div class="col-xs-12 col-md-3">
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</div>
<div class="col-xs-12 col-md-3">
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</div>
<div class="col-xs-12 col-md-3">
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</div>
</div>
</div>
col-xs-12 is optional.https://jsfiddle.net/vladavip88/qfdbg022/
Set the label height in a media query;
#media(min-width:992px){ /* default bootstrap md width */
label {
min-height:70px; /* adjust as appropriate */
}
}
The example above will give label elements a height of 70px when the page's width is >= 992px
https://jsfiddle.net/ue7bn8qd/12/
There are Two css properties in form-control class.
display: block;
width: 100%;
due to these properties input fields are behaving like block. That's why they are not inline. Edit these 2 properties to get your input fields inline.
I have two col divs in a row with each having two text filed while re-sizing in mobile the width of the textbox is not going to 100% and looking ugly.
Below is my bootstrap code, but in select filed the width is looks OK ..
here is the demo link see the 'Name' and 'Phone' field
http://www.responsinator.com/?url=webapplications.co.in%2Fdiamovitcarhire.com%2Fget-a-quote.html
<div class="row">
<div class="input-daterange input-group" id="datepicker">
<div class="col-md-6 col-sm-12 col-lg-6" >
<div class="form-group">
<label for="Name">Name </label>
<div class="input-group">
<input class="input-md form-control" name="Name" type="text">
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="form-group">
<label for="phone">Phone </label>
<div class="input-group">
<input class="input-md form-control" name="phone" type="text">
</div>
</div>
</div>
</div>
</div>
What you probably want is something like this:
<div class="container">
<div class="row">
<div class="col-md-6" >
<div class="form-group">
<label for="Name">Name </label>
<input class="form-control" name="Name" type="text">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="phone">Phone </label>
<input class="form-control" name="phone" type="tel">
</div>
</div>
</div>
</div>
If you use that structure it should work like you described it.
Most likely you are using 'container' as your base. According to Bootstrap's site (search for 'container-fluid') the container-fluid class is the one setting div to full width of your viewport.
The title might sound tricky but here is my problem :
Inputs for "Nom" and "Prénom" are, as i want, in the same line but they are not in the same width line the first input.
Here is my code :
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label"><abbr title="Code National de l'Étudiant">CNE</abbr> <span class="important">*</span></label>
<div class="col-sm-10">
<input type="text" name="cne" class="form-control">
</div>
</div>
<div class="form-group">
<label for="nom" class="col-sm-2 control-label">Nom <span class="important">*</span></label>
<div class="col-sm-10">
<div class="col-sm-6">
<input type="text" name="nomFr" class="form-control" id="nom" placeholder="En français">
</div>
<div class="col-sm-6">
<input type="text" name="nomAr" class="form-control" id="nom" placeholder="العربية" dir="rtl">
</div>
</div>
</div>
<div class="form-group">
<label for="prenom" class="col-sm-2 control-label">Prénom <span class="important">*</span></label>
<div class="col-sm-10">
<div class="col-sm-6">
<input type="text" name="prenomFr" class="form-control" id="prenom">
</div>
<div class="col-sm-6">
<input type="text" name="prenomAr" class="form-control" id="prenom" placeholder="العربية" dir="rtl">
</div>
</div>
</div>
<div class="form-group">
<label for="dateNaissance" class="col-sm-2 control-label">Date de naissance <span class="important">*</span></label>
<div class="col-sm-10">
<input type="date" name="dateNaissance" class="form-control" id="dateNaissance">
</div>
</div>
</form>
You need to add a row class on your <div class="col-sm-10"> divs. This sets a negative padding which means the position padding set by columns allows it to line up.
Look at http://getbootstrap.com/css/#grid-nesting for info.
<div class="form-group">
<label for="nom" class="col-sm-2 control-label">Nom <span class="important">*</span></label>
<div class="col-sm-10 row">
<div class="col-sm-6">
<input type="text" name="nomFr" class="form-control" id="nom" placeholder="En français">
</div>
<div class="col-sm-6">
<input type="text" name="nomAr" class="form-control" id="nom" placeholder="العربية" dir="rtl">
</div>
</div>
</div>
Be careful how you nest your elements. You must have a new row before nesting col-*s.
<div class="col-sm-10 row">
<div class="row">
<div class="col-sm-6">
<input type="text" name="nomFr" class="form-control" id="nom" placeholder="En français">
</div>
<div class="col-sm-6">
<input type="text" name="nomAr" class="form-control" id="nom" placeholder="العربية" dir="rtl">
</div>
</div>
</div>
Every container and col-* has a 15px padding left and right. The row element has margin left and right set to -15px to compensate. so container > row > col > row >col etc
Actually you don't need to have a row for each set of col- elements, as the .form-group class is the same as .row with the addition of a bottom-margin - you could argue that semantically it's better... Meh.
The main issue is you are nesting 2 x 6-column-span elements in a 10-column-span element, and you have already used up 2 columns with the label, so it's all wrong.
As you probably know, Bootstrap uses a 12 column grid system, so if you create an element and apply col-sm-2 then you have 10 columns left. If you have 2 elements, each spanning 6 columns, it's not going to work.
What you can do is lose the extra <div class="col-sm-10"> and change your 2 inputs to span 5 cols each:
<div class="form-group">
<label for="nom" class="col-sm-2 control-label">Nom <span class="important">*</span></label>
<div class="col-sm-5">
<input type="text" name="nomFr" class="form-control" id="nom" placeholder="En français">
</div>
<div class="col-sm-5">
<input type="text" name="nomAr" class="form-control" id="nom" placeholder="العربية" dir="rtl">
</div>
</div>
That will give you what you really want - each input field in 2 column areas aligned to the edges of the fields in single column areas.
Note: I use form-group here because the bottom margin pads out the rows and looks nice IMO.
I am creating a form which is horizontal and want to put a full word in between the two columns as below. If I use another tag it creates too much padding on either side of this word, and if I just put in a label or a plain text character surrounded by no tags, it ruins the position of the domain box. How can I make this work without overwriting the styles in the bootstrap.css?
I would like the form to be completely horizontal.
<div class="row">
<label for="www" class="col-sm-1 control-label">
Label1
</label>
<div class="col-sm-5">
<input type="text" class="form-control" />
</div>
<div class="col-sm-2">
<input type="text" class="form-control" />
</div>
<!-- Word to go here-->
<div class="col-sm-3">
<button type="submit" class="btn btn-primary">go</button>
</div>
</div>
</div>
Thanks in advance
You can try to follow bootstrap's 12 col grid system and specify one column col-sm-1 for the word, so that all columns add up to 12.
http://jsfiddle.net/bRh2z/show
http://jsfiddle.net/bRh2z/
<div class="row">
<label for="www" class="col-sm-1 control-label">Label1</label>
<div class="col-sm-5">
<input type="text" class="form-control" />
</div>
<div class="col-sm-2">
<input type="text" class="form-control" />
</div>
<div class="col-sm-1">woooord</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary">go</button>
</div>
</div>