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/
Related
Can anybody tell how to arrange horizontal text box in same row eve though label will be in different line
<div class="row">
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label class="control-label">Roll number <br> Student Code:</label>
<input type="text" class="form-control">
</div>
<div class="text-required> This is required </div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label">School code:</label>
<input type="text" class="form-control ">
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label>Year Of Passing:</label>
<input type="text" class="form-control">
</div>
</div>
</div>
You can add w-50 d-inline-block class to input and w-25 to label as below
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row">
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label class="control-label w-25">Roll number <br> Student Code:</label>
<input type="text" class="form-control w-50 d-inline-block">
</div>
<div class="text-required> This is required </div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label class="w-25">School code:</label>
<input type="text" class="form-control w-50 d-inline-block">
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label class="w-25">Year Of Passing:</label>
<input type="text" class="form-control w-50 d-inline-block">
</div>
</div>
</div>
You can wrap input in a div with col-x attribute and add row class to form-group.
An example:
<div class="form-group row">
<label class="control-label col-4">Roll number <br> Student Code:</label>
<div class="col-6">
<input type="text" class="form-control">
</div>
</div>
The full example here:
https://stackblitz.com/edit/js-bootstrap-css?file=index.html
<div class="row">
<div class="col-12">
<div class="form-group row">
<label class="control-label col-4">Roll number <br> Student Code:</label>
<div class="col-6">
<input type="text" class="form-control ">
</div>
</div>
<div class="text-required> This is required </div>
</div>
<div class="col-sm-3 col-lg-4">
<div class="form-group row">
<label class="control-label col-4">School code:</label>
<div class="col-6">
<input type="text" class="form-control ">
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group row">
<label class="control-label col-4">Year Of Passing:</label>
<div class="col-6">
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
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
I have created a form using bootstrap. When it displays an error, the div block below the error shifts to right. How can this be fixed using CSS?
This is a screenshot of how it looks after an error is shown:
Code
https://jsfiddle.net/yzm2aj9j/#&togetherjs=Q8Bk7CaMjy
<form>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="username" class="col-md-6 control-label">User Name</label>
<div class="col-md-6">
<input type="text" class="form-control" id="username" placeholder="User Name">
</div>
<div class="col-xs-12" style="color:#ff5555;">
<span class="error">User Name Cannot Be Blank</span>
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="inputEmail" class="col-md-6 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="phone" class="col-md-6 control-label">Phone</label>
<div class="col-md-6">
<input type="text" class="form-control" id="phone" placeholder="phone">
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="inputEmail" class="col-md-6 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="inputEmail" class="col-md-6 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="inputEmail" class="col-md-6 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
</form>
According to Bootstrap's Documentation:
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
If default grids are being used then rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).
You need to wrap two .col-xs-6 in one .row. Your code structure should be like this:
<div class="row">
<div class="col-xs-6">
// column content goes here...
</div>
<div class="col-xs-6">
// column content goes here...
</div>
</div>
<div class="row">
<div class="col-xs-6">
// column content goes here...
</div>
<div class="col-xs-6">
// column content goes here...
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="row">
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="username" class="col-md-6 control-label">User Name</label>
<div class="col-md-6">
<input type="text" class="form-control" id="username" placeholder="User Name">
</div>
<div class="col-xs-12" style="color:#ff5555;">
<span class="error">User Name Cannot Be Blank</span>
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="inputEmail" class="col-md-6 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="phone" class="col-md-6 control-label">Phone</label>
<div class="col-md-6">
<input type="text" class="form-control" id="phone" placeholder="phone">
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="inputEmail" class="col-md-6 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="inputEmail" class="col-md-6 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="inputEmail" class="col-md-6 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
</div>
</form>
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 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>