I have just started using bootstrap. Eventually, I want to create a web page that will work on all form factors.
With this page, I am creating a form with 2 rows with 3 columns in each. When I make the view larger, the fields in the second and third columns get misaligned.
Does anyone have suggestions?
Here is my Jsfiddle, and here's the HTML:
<body>
<div class="container body-content">
<div class="container-fluid">
<form action="/Bills/AddBill" method="post">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
</div>
<div id="row1 " class="row">
<div class="form-group">
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 text-left">
<label for="User_Id:">User Id:</label>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-9">
<input class="text-box single-line" id="UserId" name="UserId" type="text" value="rrg">
</div>
</div>
<div class="form-group">
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 text-left">
<label for="Bill_Dt:">Bill Dt:</label>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-9 text-left">
<input class="datepicker hasDatepicker" id="FbDt" name="FbDt" placeholder="Freight Bill Date" type="text" value="1/1/0001 12:00:00 AM">
</div>
</div>
<div class="form-group">
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 text-left">
<label for="Ship_Dt:">Ship Dt:</label>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-9 text-left">
<input class="datepicker hasDatepicker" id="ShipDt" name="ShipDt" placeholder="Ship Date" type="text" value="">
</div>
</div>
</div>
<div id="row2 " class="row">
<div class="form-group">
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 text-left">
<label for="SCAC:">SCAC:</label>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-9 text-left">
<input class="text-box single-line" id="SCAC" name="SCAC" type="text" value="">
</div>
</div>
<div class="form-group">
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 text-left">
<label for="Pro_Number:">Pro Number:</label>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-9">
<input class="text-box single-line" id="ProNum" name="ProNum" type="text" value="">
</div>
</div>
<div class="form-group">
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 text-left">
<label for="Bill_of_Laden:">Bill of Laden:</label>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-9">
<input class="text-box single-line" id="BillOfLaden" name="BillOfLaden" type="text" value="">
</div>
</div>
</div>
</form>
</div>
</div>
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>
</body>
Here you go with a solution https://jsfiddle.net/va7mh47m/9/
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
<form action="/Bills/AddBill" method="post">
<div id="row1" class="row">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="form-group">
<label for="User_Id:">User Id:</label>
<input class="text-box single-line" id="UserId" name="UserId" type="text" value="rrg">
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="form-group">
<label for="Bill_Dt:">Bill Dt:</label>
<input class="datepicker hasDatepicker" id="FbDt" name="FbDt" placeholder="Freight Bill Date" type="text" value="1/1/0001 12:00:00 AM">
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="form-group">
<label for="Ship_Dt:">Ship Dt:</label>
<input class="datepicker hasDatepicker" id="ShipDt" name="ShipDt" placeholder="Ship Date" type="text" value="">
</div>
</div>
</div>
<div id="row2 " class="row">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="form-group">
<label for="SCAC:">SCAC:</label>
<input class="text-box single-line" id="SCAC" name="SCAC" type="text" value="">
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="form-group">
<label for="Pro_Number:">Pro Number:</label>
<input class="text-box single-line" id="ProNum" name="ProNum" type="text" value="">
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="form-group">
<label for="Bill_of_Laden:">Bill of Laden:</label>
<input class="text-box single-line" id="BillOfLaden" name="BillOfLaden" type="text" value="">
</div>
</div>
</div>
</form>
</div>
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>
This is mis-alignment came from form-group class margin-bottom: 15px css rule.
You can work with forms without this class if it's necessary or create your class for these form groups with margin-bottom: 0
Also I propose to set 100% width for input or use bootstrap class form-control to avoid columns overlapping.
P.S. Check the form-horizontal helpers class maybe it will be more useful for you. I slightly changed your example with form-horizontal JSFiddle
Related
I have a bootstrap form, I would like to position labels based on the screen size.
Currently I have this code :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form name="addUser">
<div class="row">
<label class="control-label col-xs-2 col-md-2 col-lg-2">
User Name <span class="required">*</span>
</label>
<div class="col-xs-3 col-md-3 col-lg-3">
<input type="text" ng-model="user.userName" class="form-control" />
</div>
</div>
<div class="row">
<label class="control-label col-xs-2 col-md-2 col-lg-2">
Password <span class="required">*</span>
</label>
<div class="col-xs-3 col-md-3 col-lg-3">
<input type="password" ng-model="user.password" class="form-control" />
</div>
</div>
<div class="row">
<label class="control-label col-xs-2 col-md-2 col-lg-2">
Email <span class="required">*</span>
</label>
<div class="col-xs-3 col-md-3 col-lg-3">
<input type="text" ng-model="user.email" class="form-control" />
</div>
</div>
</form>
This is the output :
I am trying to auto adjust this form on small screens like this :
First, row need to be used with container and as commented above, you have to change the value of col-xs-. For full width you need to specify 12 on the label so it takes all the width and push the input in the next row.
And you are not obliged to make the input col-xs-12 you can use any lower value than 12 if you want them to remain small and not go full width:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form name="addUser">
<div class="container">
<div class="row">
<label class="control-label col-xs-12 col-md-2 col-lg-2">
User Name <span class="required">*</span>
</label>
<div class="col-xs-6 col-md-3 col-lg-3">
<input type="text" ng-model="user.userName" class="form-control" />
</div>
</div>
<div class="row">
<label class="control-label col-xs-12 col-md-2 col-lg-2">
Password <span class="required">*</span>
</label>
<div class="col-xs-6 col-md-3 col-lg-3">
<input type="password" ng-model="user.password" class="form-control" />
</div>
</div>
<div class="row">
<label class="control-label col-xs-12 col-md-2 col-lg-2">
Email <span class="required">*</span>
</label>
<div class="col-xs-6 col-md-3 col-lg-3">
<input type="text" ng-model="user.email" class="form-control" />
</div>
</div>
</div>
</form>
Can some explain to me why this is not working... I just want the input boxes to be on the same line as the labels. I cannot see what I am missing here.
<section id="student-info">
<div class="col-xs-12"><h4 class="section_title">Student Information</h4></div>
<div class="row">
<div id="name" class="col-xs-4 col-sm-4">John Doe</div>
<div id="email" class="col-xs-4 col-sm-4">jdoe#nowhere.com</div>
<div id="colgateid" class="col-xs-4 col-sm-4">ID: 123456</div>
</div>
<div class="row">
<div id="dg-leave" class="form-group col-xs-4 col-sm-4 col-lg-4">
<label for="SG-Leave" class="control-label">SG/Leave: </label>
<input class="form-control" name="SG-Leave" type="text" tabindex="1" id="SG-Leave" placeholder="SG/Leave"></div>
<div id="reg-id" class="form-group col-xs-4 col-sm-4 col-lg-4">
<label for="reg-id" class="control-label">Registration ID: </label>
<input size="10" class="form-control" name="reg-id" type="text" tabindex="1" id="reg-id" placeholder="Reg ID"></div>
<div id="classyear" class="form-group col-xs-4 col-sm-4">Class of: 2016</div>
</div>
</section>
Example: https://jsfiddle.net/pkhr3wys/5/
I have a form made in Bootstrap V3. The designer wants some rows to contain two inputs, while other rows contain only one.
I've made a fiddle here.
https://jsfiddle.net/06qk4wh4/
<div class="form-group col-sm-12">
<label class="control-label col-sm-2">
Label 1
</label>
<div class="col-sm-10">
<input type="text" class="form-control col-sm-12" />
</div>
</div>
<div class="form-group col-sm-12 col-md-6">
<label class="control-label col-sm-2 col-md-4">
Label 2
</label>
<div class="col-sm-10 col-md-8">
<input type="text" class="form-control col-sm-12" />
</div>
</div>
<div class="form-group col-sm-12 col-md-6">
<label class="control-label col-sm-2 col-md-4">
Label 3
</label>
<div class="col-sm-10 col-md-8">
<input type="text" class="form-control col-sm-12" />
</div>
</div>
<div class="form-group col-md-12">
<label class="control-label col-sm-2">
Label 4
</label>
<div class="col-sm-10">
<input type="text" class="form-control col-sm-12" />
</div>
</div>
The problem is that in the row with two inputs I get an alignment error (shown in red in the image below). It works great in col-sm-x, because then it uses the full width. But in col-md-x I try to render two inputs in one row, and I get an "alignment error" because of the percentage calculation.
Is there a simple solution for this? It must be a pretty common problem?
You can try this code.
It seems to fix your problem. I just add a row after your div(col-sm-12)
<div class="form-group col-sm-12">
<div class="row">
<label class="control-label col-sm-2">
Label 1
</label>
<div class="col-sm-10">
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="form-group col-sm-12 col-md-6">
<div class="row">
<label class="control-label col-sm-2 col-md-4">
Label 2
</label>
<div class="col-sm-10 col-md-8">
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="form-group col-sm-12 col-md-6">
<div class="row">
<label class="control-label col-sm-2 col-md-4">
Label 3
</label>
<div class="col-sm-10 col-md-8">
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="form-group col-md-12">
<div class="row">
<label class="control-label col-sm-2">
Label 4
</label>
<div class="col-sm-10">
<input type="text" class="form-control" />
</div>
</div>
</div>
Hope this is the solution :)
Richie
I am trying to create a form with bootstrap where I am trying to fill two fields in two column of same row and third field in another row with same width as above row. but some how the third field is not occupying the entire row width as the above field.
<div class="container">
<h2 class="form-page">PLEASE, ENTER YOUR DETAILS</h2>
<br>
<form>
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-7">
<div class="row">
<div class="col-lg-1 col-md-2 col-sm-3 col-xs-3">
<label>Name</label>
</div>
<div class="col-lg-11 col-md-10 col-sm-9 col-xs-9">
<input type="text">
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-5">
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-3 col-xs-3">
<label>Phone</label>
</div>
<div class="col-lg-10 col-md-9 col-sm-9 col-xs-9">
<input type="text">
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">
<label>Email</label>
</div>
<div class="col-lg-11 col-md-10 col-sm-9 col-xs-8">
<input type="email">
</div>
</div>
</div>
</div>
Here is my jsfiddle
I am trying to display name and phone fields on same row, where as email to take up the entire row below name and phone fields. but email field is not taking the entire row.
I think you're trying to do this.
#media (min-width: 767px) {
#soForm .soForm {
margin: 10px auto;
}
#soForm .control-label {
margin-top: 10px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h2 class="form-page">PLEASE, ENTER YOUR DETAILS</h2>
</br>
<form id="soForm" name="soForm">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-4 soForm">
<input type="text" class="form-control" id="name" />
</div>
</div>
<div class="form-group">
<label for="phone" class="col-sm-2 control-label">Phone</label>
<div class="col-sm-4 soForm">
<input type="text" class="form-control" id="phone" />
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="email" />
</div>
</div>
</form>
</div>
I have the following HTML in bootstrap 3 that gives the following display:
The HTML it as follows.
In one row i have only one field, while on others I have 3. Is it possible with bootstrap to make all rows position "first" label on the same position? In this case, "Project Name", "Location", and "Project Value" will be aligned same position.
Thanks
<div class="container">
<div class="row" id="mainForm">
<form class="form-horizontal">
<div class="row">
<div class="form-group col-xs-12 col-sm-6">
<label for="txtProjectName" class="control-label col-sm-4 col-xs-3">Project Name</label>
<div class="col-sm-8 col-xs-9">
<input type="text" class="form-control" id="txtProjectName" placeholder="Name of Project">
</div>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-6">
<label for="txtLocation" class="control-label col-sm-4 col-xs-3">Location</label>
<div class="col-sm-8 col-xs-9">
<input type="text" class="form-control" id="txtLocation" placeholder="Location">
</div>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-4">
<label for="txtProjectValue" class="control-label col-sm-4 col-xs-3">Project Value</label>
<div class="col-sm-8 col-xs-9">
<input type="text" class="form-control" id="txtprojectValueUsd" placeholder="Project Value (US $)">
</div>
</div>
<div class="form-group col-xs-12 col-sm-4">
<label for="txtCCCValue" class="control-label col-sm-4 col-xs-3">CCC Value</label>
<div class="col-sm-8 col-xs-9">
<input type="text" class="form-control" id="txtCCCValue" placeholder="CCC Value (US $)">
</div>
</div>
<div class="form-group col-xs-12 col-sm-4">
<label for="txtProjectValueLocal" class="control-label col-sm-4 col-xs-3">Project Value Local</label>
<div class="col-sm-8 col-xs-9">
<input type="text" class="form-control" id="txtProjectValueLocal" placeholder="Project Value Local Currency">
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<button type="submit" class="btn btn-primary">Login</button>
</div>
</div>
</form>
</div>
<div class="row top-buffer">
</div>
</div>
In the first two div.row you the .form-group with .col-sm-6. If you change it to .col-sm-4 you will get the alignment you want.
E.g.:
<div class="col-xs-12 col-sm-4">
<div class="form-group">
<label for="txtProjectName" class="control-label col-sm-4 col-xs-3">Project Name</label>
<div class="col-sm-8 col-xs-9">
<input type="text" class="form-control" id="txtProjectName" placeholder="Name of Project">
</div>
</div>
</div>
Here is a working demo http://jsfiddle.net/wmyuj7gy/.
EDIT:
If you want the first two rows to be full width you need to change the .col-sm-4 to .col-sm-12 and the inner elements to have the .col-sm-1 and .col-sm-11 class.
Also, you should nt use the .form-group class in the same div with the .col-sm-* classes because is messes with the grid's paddings.
Here is a fixed example of your code, with also some other changes in the last row to make the form perfectly aligned http://jsfiddle.net/wmyuj7gy/3/
try this one -
<form class="form-horizontal">
<div class="row">
<div class="form-group col-xs-12 col-sm-4">
<label for="txtProjectName" class="control-label col-sm-4 col-xs-3">Project Name</label>
<div class="col-sm-8 col-xs-9">
<input type="text" class="form-control" id="txtProjectName" placeholder="Name of Project">
</div>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-4">
<label for="txtLocation" class="control-label col-sm-4 col-xs-3">Location</label>
<div class="col-sm-8 col-xs-9">
<input type="text" class="form-control" id="txtLocation" placeholder="Location">
</div>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-4">
<label for="txtProjectValue" class="control-label col-sm-4 col-xs-3">Project Value</label>
<div class="col-sm-8 col-xs-9">
<input type="text" class="form-control" id="txtprojectValueUsd" placeholder="Project Value (US $)">
</div>
</div>
<div class="form-group col-xs-12 col-sm-4">
<label for="txtCCCValue" class="control-label col-sm-4 col-xs-3">CCC Value</label>
<div class="col-sm-8 col-xs-9">
<input type="text" class="form-control" id="txtCCCValue" placeholder="CCC Value (US $)">
</div>
</div>
<div class="form-group col-xs-12 col-sm-4">
<label for="txtProjectValueLocal" class="control-label col-sm-4 col-xs-3">Project Value Local</label>
<div class="col-sm-8 col-xs-9">
<input type="text" class="form-control" id="txtProjectValueLocal" placeholder="Project Value Local Currency">
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<button type="submit" class="btn btn-primary">Login</button>
</div>
</div>
</form>