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>
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'm trying to create a form that will appear in a modal window and I have the form looking exactly what I want. Here's my HTML (only showing the first row because I believe the right solution will apply to all my rows)
<div class="container">
<div class="row">
<div class="col-sm-1"> </div>
<div class="col-sm-8">
<form action="#" method="post">
<fieldset>
<legend style="width: 80%">Base Information</legend>
<div class='row'>
<div class='col-sm-5'>
<div class='form-group'>
<label for="user_firstname">First name</label>
<input class="form-control input-sm" id="user_firstname" name="user[firstname]" required="true" size="30" type="text" />
</div>
</div>
<div class='col-sm-5'>
<div class='form-group'>
<label for="user_lastname">Last name</label>
<input class="form-control input-sm" id="user_lastname" name="user[lastname]" required="true" size="30" type="text" />
</div>
</div>
<div class="col-sm-2"> </div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
The problem I'm facing is that I'm currently viewing this using Chrome and when I horizontally resize the browser window to less than 760 pixels, all the form elements are stacked on top of each other.
As you can see there's a lot of spacing to the right I'm trying to get rid of.
Does anyone have any suggestions on how I can eliminate the padding on the right?
col-xs instead of col-sm would help with the breakpoint issue. You also seem to have empty space on the right because you specified two columns of empty space <div class="col-sm-2"> </div>. Bootstrap's grid system is based uon 12 columns per row, so the two column spanning div would be occuping space.
Bootstrap suggests 12 columns. Your layout uses only 9 of them:
<div class="col-sm-1"> </div>
<div class="col-sm-8">
...
</div>
You can use col-sm-10 col-sm-offset-1 instead of col-sm-8, <div class="col-sm-1"> </div> and <div class="col-sm-2"> </div> (offsetting columns):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<form action="#" method="post">
<fieldset>
<legend>Base Information</legend>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="user_firstname">First name</label>
<input class="form-control input-sm" id="user_firstname" name="user[firstname]" required="true" size="30" type="text" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="user_lastname">Last name</label>
<input class="form-control input-sm" id="user_lastname" name="user[lastname]" required="true" size="30" type="text" />
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
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.
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
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!