I am using Bootstrap CSS framework and have a row with 2 columns one with input field and label and other with input field with no label. Here it's a jsfiddle.
I want the second input field to be aligned with first input field. How can I achieve this?
Any help would be highly appreciated.
<div class="container">
<div class="row">
<div class="col-sm-4">
<label>Name</label>
<input type="text" id="First Name">
</div>
<div class="col-sm-4">
<input type="text" id="Last Name">
</div>
</div>
</div>
You can try this
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-4">
<label>Name</label>
<input type="text" id="First Name">
</div>
<div class="col-sm-4 align-self-end">
<input type="text" id="Last Name">
</div>
</div>
</div>
Related
I am making an application form for invoices. Now I made five columns in one row. Each column has input fields. The fourth and fifth column have four input fields but fifth column fields have no labels. Now what I need is to align both four column and fifth column using bootstrap classes without any custom CSS. Because I need no labels in fifth columns. After spending hours I can't figure out how to align both columns.
Html:
<div class="row">
<div class="col-sm-3>
<div class="form-group">
<label for="inputEmail">field</label>
<input type="text" class="form-control" id=""
placeholder=""> </div>
</div>
<div class="col-sm-3>
<!--i am using these four lines code in every col for input fields for sake clarity i wrote it only here.
<div class="form-group">
<label for="inputEmail">field</label>
<input type="text" class="form-control"id=""
placeholder="item desc"> </div>
</div>
<div class="col-sm-3>
</div>
<!---fourth col-!>
<div class="col-sm-3>
</div>
<!--fifth col--!>
<div class="col-sm-3>
<!-I need to align this column with the above column remeber this coloumn field does not have labels thats why I am not able to align both columns(fourth and fifth)-!>
</div>
</div>
First of all, I don't know how you can make 5 columns in a row with col-sm-3. That will only make 4 columns in a row and the fifth column is pushed to a new row.
If your 4th and 5th column both have 4 inputs, but only 5th column inputs don't have labels. Why not combine the 4th and 5th column into one column and use rows for their inputs?
<div class="container">
<div class="row">
<div class="col-sm-2 offset-sm-1">
<div class="form-group">
<label>Field</label>
<input type="text" class="form-control" />
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>Field</label>
<input type="text" class="form-control" />
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>Field</label>
<input type="text" class="form-control" />
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label>Field 1</label>
<div class="row">
<div class="col-sm-6">
<input type="text" class="form-control" />
</div>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="input 1 without label" />
</div>
</div>
</div>
<div class="form-group">
<label>Field 2</label>
<div class="row">
<div class="col-sm-6">
<input type="text" class="form-control" />
</div>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="input 2 without label" />
</div>
</div>
</div>
<div class="form-group">
<label>Field 2</label>
<div class="row">
<div class="col-sm-6">
<input type="text" class="form-control" />
</div>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="input 3 without label" />
</div>
</div>
</div>
<div class="form-group">
<label>Field 2</label>
<div class="row">
<div class="col-sm-6">
<input type="text" class="form-control" />
</div>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="input 4 without label" />
</div>
</div>
</div>
</div>
</div>
</div>
Fiddle: https://jsfiddle.net/aq9Laaew/91237/
Use mt-2 to form-group where label is empty.
Learn here about bootstrap-4 spacing:https://getbootstrap.com/docs/4.0/utilities/spacing/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-sm-2">
<div class="form-group">
<label for="inputEmail">field</label>
<input type="text" class="form-control" id=""
placeholder=""> </div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label for="inputEmail">field</label>
<input type="text" class="form-control"id=""
placeholder="item desc"> </div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label for="inputEmail">field</label>
<input type="text" class="form-control" id=""
placeholder=""> </div>
</div>
<div class="col-sm-2">
<div class="form-group mt-2">
<label for="inputEmail "></label>
<input type="text" class="form-control"id=""
placeholder="item desc" > </div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label for="inputEmail">field</label>
<input type="text" class="form-control" id=""
placeholder=""> </div>
</div>
</div>
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 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!