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.
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 trying some simple examples of Twitter Bootstrap, and some that I cant do is do as one column has two lines (like if it was a table), and the best I could was this code below that is not align
<div class="container">
<div class="col-md-6">
<div class="form-group">
<label for="usuario" class="control-label">Nome</label>
<input type="usuario" class="form-control" name="usuario" id="usuario" placeholder="Usuario"/>
<label for="sobrenome" class="control-label">SobreNome</label>
<input type="sobrenome" class="form-control" name="sobrenome" id="sobrenome" placeholder="sobrenome"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="usuario" class="control-label">Orgao</label>
<input type="orgao" class="form-control" name="orgao" id="orgao" placeholder="Orgao"/>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6">
<div class="form-group">
<label for="usuario" class="control-label">Orgao</label>
<input type="orgao" class="form-control" name="orgao" id="orgao" placeholder="Orgao"/>
</div>
</div>
</div>
How can I do to put the last form group at the same direction at the other one, but with size 6?
You can set class .row to eliminate the left and right margins
HTML
<div class="col-md-12">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="usuario" class="control-label">Orgao</label>
<input type="orgao" class="form-control" name="orgao" id="orgao" placeholder="Orgao" />
</div>
</div>
</div>
</div>
DEMO HERE
I tried to make 2 divs be in one row. Here is example : https://jsfiddle.net/cu0L469f/
But always i get each of it in separate row or they are as joined in one row.
<form id="postJob" class="login-form">
<div class="bro">
<div class="left4">
<div class="row-fluid clearfix">
<div class="col-lg-7 pull-left">
<label class="text_7">Full Address</label>
<input type="text" id="fromAddress" name="fromAddress" class="input" maxlength="1000"/>
</div>
<div class="col-lg-4 pull-left">
<label class="text_7">Postcode</label>
<input type="text" id="fromAddressPostCode" name="fromAddressPostCode" class="input" maxlength="8"/>
</div>
</div>
</div>
</div>
</form>
Because you are using only col-lg class and possible you seeing in small screen, you should also add col-md and col-sm and col-xs according to your need.
Go with link to see more details
<form id="postJob" class="login-form">
<div class="bro">
<div class="left4">
<div class="row-fluid clearfix">
<div class="col-sm-7">
<label class="text_7">Full Address</label>
<input type="text" id="fromAddress" name="fromAddress" class="input" maxlength="1000"/>
</div>
<div class="col-sm-5">
<label class="text_7">Postcode</label>
<input type="text" id="fromAddressPostCode" name="fromAddressPostCode" class="input" maxlength="8"/>
</div>
</div>
</div>
</div>
</form>
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.
What is the correct way to style form with bootstrap in the following scenario:
I need to use fieldset (that will be styled later)
I need to divide form into two columns
Each column has label+control, some will have label+control1+control2 etc.
I am new to bootstrap. I have come to the following solution (jsfiddle).
The question is: is this the correct way to do this? Does it not violate the bootstrap semantics?
I do not understand when to use form-group, am I using it correctly?
Should I not include some class="row" here for correct semantics?
HTML:
<div class="container">
... <some content here> ....
<form class="form-horizontal">
<fieldset>
<legend>Portfolio</legend>
<div class="col-xs-6">
<div class="form-group">
<label for="name" class="col-xs-4 control-label">Label1</label>
<div class="col-xs-8">
<input type="text" class="form-control" placeholder="control1" />
</div>
</div>
<div class="form-group">
<label for="name" class="col-xs-4 control-label">label2</label>
<div class="col-xs-8">
<input type="text" class="form-control" placeholder="control2" />
</div>
</div>
<div class="form-group">
<label for="name" class="col-xs-4 control-label">label3</label>
<div class="col-xs-8 form-inline">
<div class="form-group col-xs-6">
<input type="text" class="form-control" placeholder="control1" />
</div>
<div class="form-group col-xs-6">
<input type="text" class="form-control" placeholder="control2" />
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="name" class="col-xs-4 control-label">Label1</label>
<div class="col-xs-8">
<input type="text" class="form-control" placeholder="control1" />
</div>
</div>
<div class="form-group">
<label for="name" class="col-xs-4 control-label">label2</label>
<div class="col-xs-8">
<input type="text" class="form-control" placeholder="control2" />
</div>
</div>
</div>
</fieldset>
</form>
</div>
I have seen all Bootstrap form examples, but I do not get how to separate form into two columns. I have also read the whole documentation, but I feel that this is not the right way how to use col and other classes.
Column separation happens inside container elements.
Each time you have an element you want to do grid inside it, give it class="container" and in it u can use the normal row and column classes.
Also check Bootstrap's out of the box form styles.
Below are the bare bones, add on to it what u need (like text align etc)
<form class="container">
<div class="row">
<div class="col-md-3">
<label for="username" class="control-label">label</label>
</div>
<div class="col-md-3">
<input type="text" name="username" class="form-control" placeholder="Email address" autofocus>
</div>
<div class="col-md-3">
<label for="username" class="control-label">label</label>
</div>
<div class="col-md-3">
<input type="text" name="username" class="form-control" placeholder="Email address" autofocus>
</div>
</div>
</form>
I face this problem with bootstrap 4 and I found that whenever we want to divide inside our form into many columns we should use container and row class. because the bootstrap grid take its style from its parent (.container and .row)
see this example :
<main>
<div class="container-fluid mt-3">
<div class="row">
<form method="post">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<div class="col-md-3">
<label class="form-controllabel">Full Name</label>
</div>
<div class="col-md-9">
<input type="text" />
</div>
</div>
<div class="input-group">
<div class="col-md-3">
<label class="form-controllabel">fatherName</label>
</div>
<div class="col-md-9">
<input type="text" />
</div>
</div>
<div class="input-group">
<div class="col-md-3">
<label class="form-controllabel">LastName</label>
</div>
<div class="col-md-9">
<input type="text" />
</div>
</div>
<div class="col-md-6">
<div class="input-group">
<div class="col-md-3">
<label class="form-controllabel">salary</label>
</div>
<div class="col-md-9">
<input type="text" />
</div>
</div>
<div class="input-group">
<div class="col-md-3">
<label class="form-controllabel">tax</label>
</div>
<div class="col-md-9">
<input type="text" />
</div>
</div>
<button type="submit">save</button>
</div>
</div>
</div>
</form>
</div>
</div>
</main>
I'am sure it will work!