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>
Related
<div class="col-sm-12 col-md-12 text-center">
<h1>Example Horizontal Form Bootstrap</h1>
</div>
<div class="col-sm-12 col-md-4"></div>
<div class="col-sm-12 col-md-4 text-center">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Enter your Email here........! Hello </label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Enter your Email here........! Hello</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
</form>
I want to place the "text and textbox" in one line. At present, I am getting text in multiple lines beside the textbox like below.
You have a couple of options.
Option 1:
Reduce the label text and/or increase the column allocated to it. Example
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-4">
<form>
<div class="form-group form-row">
<label for="inputEmail3" class="col-sm-3 col-form-label text-sm-right">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group form-row">
<label for="inputPassword3" class="col-sm-3 col-form-label text-sm-right">Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
</form>
</div>
</div>
</div>
Option 2: You can use text-truncate class to truncate any overflow text. Example
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-4">
<form>
<div class="form-group form-row">
<label for="inputEmail3" class="col-sm-3 col-form-label text-sm-right text-truncate">Enter your Email here........! Hello</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group form-row">
<label for="inputPassword3" class="col-sm-3 col-form-label text-sm-right text-truncate">Enter your Password here........! Hello</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
</form>
</div>
</div>
</div>
I have a nested form row and want to align the form fields vertically. The output currently is this:
Code is here:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="card">
<div class="card-body">
<div class="form-group row">
<label for="name" class="col-sm-3 col-form-label">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="name" disabled>
</div>
</div>
<div class="form-group row">
<label for="description" class="col-sm-3 col-form-label">Description</label>
<div class="col-sm-9">
<textarea class="form-control" id="description" rows="5" disabled></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-sm-7">
<div class="form-group row">
<label for="description" class="col-sm-5 col-form-label">Rate</label>
<div class="col-sm-7">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="description" class="col-sm-5 col-form-label">Start date</label>
<div class="col-sm-7">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="description" class="col-sm-5 col-form-label">End date</label>
<div class="col-sm-7">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-sm-5">
<div class="promotion-image-container">
<img src="https://via.placeholder.com/300x200" class="img-thumbnail">
</div>
</div>
</div>
</div>
</div>
As you can see there is a slight misalignment in the columns. I have an image that I want to align with the other 3 fields.
I tried adjusting the column numbers but I can't make it align properly.
Just added custom style padding-left:24px !important for div class='col-sm-7 padd-left' it will be work's
#media only screen and (min-width: 768px) {
.padd-left{
padding-left:24px !important
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="card">
<div class="card-body">
<div class="form-group row">
<label for="name" class="col-sm-3 col-form-label">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="name" disabled>
</div>
</div>
<div class="form-group row">
<label for="description" class="col-sm-3 col-form-label">Description</label>
<div class="col-sm-9">
<textarea class="form-control" id="description" rows="5" disabled></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-sm-7">
<div class="form-group row">
<label for="description" class="col-sm-5 col-form-label">Rate</label>
<div class="col-sm-7 padd-left">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="description" class="col-sm-5 col-form-label">Start date</label>
<div class="col-sm-7 padd-left">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="description" class="col-sm-5 col-form-label">End date</label>
<div class="col-sm-7 padd-left">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-sm-5">
<div class="promotion-image-container">
<img src="https://via.placeholder.com/300x200" class="img-thumbnail">
</div>
</div>
</div>
</div>
</div>
The problem is that the <label> elmenets do not have the same width. You have used .col-sm-3 on the first two and .col-ms-5 on the last three. Even if you use the same .col-* on all of them, still they would have different width since the last three are nested. (Check the first code snippet)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="card">
<div class="card-body">
<div class="form-group row">
<label for="name" class="col-sm-3 col-form-label bg-danger">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="name" disabled>
</div>
</div>
<div class="form-group row">
<label for="description" class="col-sm-3 col-form-label bg-danger">Description</label>
<div class="col-sm-9">
<textarea class="form-control" id="description" rows="5" disabled></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-sm-7">
<div class="form-group row">
<label for="description" class="col-sm-5 col-form-label bg-danger">Rate</label>
<div class="col-sm-7">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="description" class="col-sm-5 col-form-label bg-danger">Start date</label>
<div class="col-sm-7">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="description" class="col-sm-5 col-form-label bg-danger">End date</label>
<div class="col-sm-7">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-sm-5">
<div class="promotion-image-container">
<img src="https://via.placeholder.com/300x200" class="img-thumbnail">
</div>
</div>
</div>
</div>
</div>
My suggetion is to use a container for each one of the <label> elmements and apply .col-sm-auto and .col-12 directly on the container. Then, set a fixed width for the <label> so that they all have the same width. You can use media queries to set different width based on the viewport size.
Use .col-sm on the <input> and <textarea> container so that they take all the available space. Use .col-12 on them for mobile.
#media (min-width: 576px) {
label {
width: 200px !important;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="card">
<div class="card-body">
<div class="form-group row">
<div class="col-12 col-sm-auto bg-primary">
<label for="name" class="col-form-label">Name</label>
</div>
<div class="col-sm col-12">
<input type="text" class="form-control" id="name" disabled>
</div>
</div>
<div class="form-group row">
<div class="col-12 col-sm-auto bg-primary">
<label for="description" class="col-form-label">Description</label>
</div>
<div class="col-12 col-sm">
<textarea class="form-control" id="description" rows="5" disabled></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-12 col-sm-7">
<div class="form-group row">
<div class="col-12 col-sm-auto bg-primary ">
<label for="description" class="col-form-label">Rate</label>
</div>
<div class="col-12 col-sm">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<div class="col-12 col-sm-auto bg-primary">
<label for="description" class="col-form-label">Start date</label>
</div>
<div class="col-12 col-sm">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<div class="col-12 col-sm-auto bg-primary">
<label for="description" class="col-form-label ">End date</label>
</div>
<div class="col-12 col-sm">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="co-12 col-sm-5">
<div class="promotion-image-container">
<img src="https://via.placeholder.com/300x200" class="img-thumbnail">
</div>
</div>
</div>
</div>
</div>
https://codepen.io/anon/pen/RzMzpR
Can you try my code. I modified some line code:
<div class="card">
<div class="card-body">
<div class="form-group row">
<label for="name" class="col-sm-3 col-form-label">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="name" disabled>
</div>
</div>
<div class="form-group row">
<label for="description" class="col-sm-3 col-form-label">Description</label>
<div class="col-sm-9">
<textarea class="form-control" id="description" rows="5" disabled></textarea>
</div>
</div>
<div class="form-group row">
<div class='col-3'>
<div class="form-group"><label for="description" class="col-form-label">Rate</label></div>
<div class="form-group"><label for="description" class="col-form-label">Start date</label></div>
<div class="form-group">
<label for="description" class="col-form-label">End date</label>
</div>
</div>
<div class='col-4'>
<div class="form-group">
<input type="text" class="form-control">
</div>
<div class="form-group">
<input type="text" class="form-control datepicker">
</div>
<div class="form-group">
<input type="text" class="form-control datepicker">
</div>
</div>
<div class='col-5'>
<div class="promotion-image-container">
<img src="https://via.placeholder.com/300x200" class="img-thumbnail">
</div>
</div>
</div>
</div>
</div>
This is a demo link: https://codepen.io/phuongnm153/pen/zVWevP
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 don't think I quite understand how bootstrap works with the grid. I want the name and actual field to match up unless the screen size is xs so every field is its own row. For each row, I want the text boxes always aligned.
Here's what I've tried.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="width:80vw">
<form role="form">
<div class="row top-buffer">
<div class="col-sm-4 ">
<div class="form-group">
<label for="inputLabel3" class="col-sm-3 control-label">Date:</label>
<div class="col-sm-8">
<input type="date" class="form-control" id="inputLabel3" placeholder="date">
</div>
</div>
</div>
<div class="col-sm-4 ">
<div class="form-group">
<label for="inputname" class="col-sm-4 control-label">Name:</label>
<div class="col-sm-8 ">
<input type="text" class="form-control" id="name" placeholder="name">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="inputPassword" class="col-sm-3 control-label">Initials:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputInitials" placeholder="Initials">
</div>
</div>
</div>
</div>
<div class="row top-buffer">
<div class="col-sm-12">
<div class="form-group">
<label for="inputLabel3" class="col-sm-1 control-label">Title:</label>
<div class="col-sm-10 ">
<input type="text" class="form-control" id="inputLabel3" placeholder="title">
</div>
</div>
</div>
</div>
<div class="row top-buffer">
<div class="col-sm-5">
<div class="form-group">
<label for="inputLabel3" class="col-sm-2 control-label">Expected:</label>
<div class="col-sm-10 ">
<input type="number" class="form-control" id="inputLabel3" placeholder="title">
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<label for="Actual" class="col-sm-2 control-label">Actual:</label>
<div class="col-sm-10 ">
<input type="number" class="form-control" id="inputLabel3" placeholder="title">
</div>
</div>
</div>
</div>
</div>
<div class="row top-buffer">
<div class="col-sm-12">
<div class="form-group">
<label for="inputLabel3" class="col-sm-1 control-label">Description:</label>
<div class="col-sm-10 ">
<textarea id="descript" class="col-sm-10 "></textarea>
</div>
</div>
</div>
</div>
</div>
<!-- end container -->
</div
Bonus points for someone who can also help me make the description field larger - enough height for at least 20 new lines.
this includes the extra 20 spaces in despcription
Add this to your .css
.col-sm-4 {
display: inline-block;
vertical-align: middle;
float: none;
}
<div class="container" style="width:80vw">
<form role="form">
<div class="row top-buffer">
<div class="col-sm-4 ">
<div class="form-group">
<label for="inputLabel3" class="col-sm-3 control-label">Date:</label>
<div class="col-sm-8">
<input type="date" class="form-control" id="inputLabel3" placeholder="date">
</div>
</div>
</div>
<div class="col-sm-4 ">
<div class="form-group">
<label for="inputname" class="col-sm-4 control-label">Name:</label>
<div class="col-sm-8 ">
<input type="text" class="form-control" id="name" placeholder="name">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="inputPassword" class="col-sm-3 control-label">Initials:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputInitials" placeholder="Initials">
</div>
</div>
</div>
</div>
<div class = "row top-buffer">
<div class="col-sm-12">
<div class="form-group">
<label for="inputLabel3" class="col-sm-1 control-label">Title:</label>
<div class="col-sm-10 ">
<input type="text" class="form-control" id="inputLabel3" placeholder="title">
</div>
</div>
</div>
</div>
<div class = "row top-buffer">
<div class="col-sm-5">
<div class="form-group">
<label for="inputLabel3" class="col-sm-2 control-label">Expected:</label>
<div class="col-sm-10 ">
<input type="number" class="form-control" id="inputLabel3" placeholder="title">
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<label for="Actual" class="col-sm-2 control-label">Actual:</label>
<div class="col-sm-10 ">
<input type="number" class="form-control" id="inputLabel3" placeholder="title">
</div>
</div>
</div>
</div>
</div>
<div class = "row top-buffer">
<div class="col-sm-12">
<div class="form-group">
<label for="inputLabel3" class="col-sm-1 control-label">Description:</label>
<div class="col-sm-10 ">
<textarea id="descript" class="col-sm-10" rows="20"></textarea>
</div>
</div>
</div>
</div>
</div>
<!-- end container -->
</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>