This is my bootstrap that I need to behave like a table. I also need the header columns to behave like a sticky header on scroll. Is this possible with just bootstrap alone?
The reason I am not using an actual table is because this will go into a formly object and formly has an issue with tables
<div class="container">
<div class="row visible-md visible-lg">
<div class="form-group col-md-2">
<label>First Name</label>
</div>
<div class="form-group col-md-2">
<label>Last Name</label>
</div>
<div class="form-group col-md-2">
<label>Address</label>
</div>
<div class="form-group col-md-2">
<label>City</label>
</div>
<div class="form-group col-md-2">
<label>State</label>
</div>
<div class="form-group col-md-2">
<label>Zip Code</label>
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">First Name</label>
Jake
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">Last Name</label>
Elwood
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">Address</label>
1060 W Addison St
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">City</label>
Chicago
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">State</label>
IL
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">Zip Code</label>
60613
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">First Name</label>
John
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">Last Name</label>
Wayne
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">Address</label>
18601 Airport Way
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">City</label>
Santa Ana
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">State</label>
CA
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">Zip Code</label>
92707
</div>
</div>
</div>
https://stackblitz.com/edit/angular-eyo4a8-gnrknm?file=app%2Fdatepicker-date-class-example.html
I found it just needed to use
class="sticky-top"
.sticky {
position: fixed;
top: 0;
width: 100%;
}
This sticky class is added to the navbar with JS when it reaches it's scroll position. Use this sticky code for the header columns that you needed to the add.
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 am trying to form submit in Django with multiple details so I have decided to separate have the next button and the first set of details will be hidden and the next set will be displayed and the form submission will happen in the last set of details. I have finished the code and placed the tag on the beginning and the closing tag at the bottom. But the form was not submitting. It was not showing any error. When I click the button nothing happened
<form method="POST">{% csrf_token %}
<div id="personal_info">
<div class="container">
<div class="form-row">
<div class="form-group col-md-4">
<label for="firstname">First Name</label>
{{form.first_name}}
</div>
<div class="form-group col-md-4">
<label for="middlename">Middle Name</label>
{{form.middle_name}}
</div>
<div class="form-group col-md-4">
<label for="lastname">Last Name</label>
{{form.last_name}}
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="emailadd">Email Address</label>
{{form.email_address}}
</div>
<div class="form-group col-md-5">
<label for="contact">Contact No</label>
{{form.contact_no}}
</div>
<div class="form-group col-md-1">
<label for="contact">Age</label>
<input type="number" class="form-control" id="contact">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="position">Position</label>
{{ form.position_applied_for }}
</div>
<div class="form-group col-md-4">
<label for="gender">Gender</label>
{{ form.sex }}
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="birthplace">Place of birth</label>
{{ form.place_of_birth }}
</div>
<div class="form-group col-md-6">
<label for="birthdate">Date of birth</label>
{{ form.date_of_birth }}
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="city_address">City Address</label>
{{ form.city_add }}
</div>
<div class="form-group col-md-6">
<label for="city_zip">City Zip</label>
{{ form.city_zip }}
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="citizenship">Citizenship</label>
{{ form.citizenship }}
</div>
<div class="form-group col-md-4">
<label for="religion">Religion</label>
{{ form.religion }}
</div>
<div class="form-group col-md-4">
<label for="source_type">Where did you find Halcyon?</label>
{{ form.source_type }}
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="physical_deformities">Physical Deformities</label>
{{ form.physical_deformities }}
</div>
<div class="form-group col-md-4">
<label for="blood_type">Blood Type</label>
{{ form.blood_type }}
</div>
<div class="form-group col-md-4">
<label for="marital_status">Marrital Status</label>
{{ form.marital_status }}
</div>
</div>
<div class="form-row">
<div class="form-group col-md-3">
<label for="sss">SSS No.</label>
{{ form.sss }}
</div>
<div class="form-group col-md-3">
<label for="tin">TIN No.</label>
{{ form.tin }}
</div>
<div class="form-group col-md-3">
<label for="hdmf">HDMF No.</label>
{{ form.hdmf }}
</div>
<div class="form-group col-md-3">
<label for="phil">Phil health No.</label>
{{ form.phil }}
</div>
</div>
<div class="form-row">
<div class="form-group col-md-3">
<label for="person_emerg_name">Person to notify in case of emergency</label>
{{ form.person_emerg_name }}
</div>
<div class="form-group col-md-3">
<label for="person_emerg_add">Address of the person to notify in case of emergency</label>
{{ form.person_emerg_add }}
</div>
<div class="form-group col-md-3">
<label for="person_emerg_zip">Zip Code</label>
{{ form.person_emerg_zip }}
</div>
<div class="form-group col-md-3">
<label for="person_emerg_contact_no">Contact No.</label>
{{ form.person_emerg_contact_no }}
</div>
</div>
<div class="form-row">
<div class="form-group col-md-3">
<label for="tax_status">Tax Status</label>
{{ form.tax_status }}
</div>
</div>
</div>
<button id="next_family">Next</button>
<input type="submit" value="submit">
</form>
</div>
<div id="family_info">
<div class="container">
<div class="form-row">
<div class="form-group col-md-2">
<label for="firstname">Spouse Last Name</label>
{{form.spouse_last_name}}
</div>
<div class="form-group col-md-2">
<label for="middlename">Spouse First Name</label>
{{form.spouse_first_name}}
</div>
<div class="form-group col-md-2">
<label for="lastname">Spouse Middle Name</label>
{{form.spouse_middle_name}}
</div>
<div class="form-group col-md-2">
<label for="emailadd">Occupation</label>
{{form.spouse_occupation}}
</div>
<div class="form-group col-md-1">
<label for="contact">Age</label>
{{form.spouse_age}}
</div>
<div class="form-group col-md-2">
<label for="contact">Spouse Tel No:</label>
{{form.spouse_telno}}
</div>
</div>
<div class="form-row">
<div class="form-group col-md-2">
<label for="firstname">Father Last Name</label>
{{form.father_last_name}}
</div>
<div class="form-group col-md-2">
<label for="middlename">Father First Name</label>
{{form.father_first_name}}
</div>
<div class="form-group col-md-2">
<label for="lastname">Father Middle Name</label>
{{form.father_middle_name}}
</div>
<div class="form-group col-md-2">
<label for="emailadd">Occupation</label>
{{form.father_occupation}}
</div>
<div class="form-group col-md-1">
<label for="contact">Age</label>
{{form.father_age}}
</div>
<div class="form-group col-md-2">
<label for="contact">Father Tel No.</label>
{{form.father_telno}}
</div>
</div>
<div class="form-row">
<div class="form-group col-md-2">
<label for="firstname">Mother Last Name</label>
{{form.mother_last_name}}
</div>
<div class="form-group col-md-2">
<label for="middlename">Mother First Name</label>
{{form.mother_first_name}}
</div>
<div class="form-group col-md-2">
<label for="lastname">Mother Middle Name</label>
{{form.mother_middle_name}}
</div>
<div class="form-group col-md-2">
<label for="emailadd">Occupation</label>
{{form.mother_occupation}}
</div>
<div class="form-group col-md-1">
<label for="contact">Age</label>
{{form.mother_age}}
</div>
<div class="form-group col-md-2">
<label for="contact">Mother Tel No.</label>
{{form.mother_telno}}
</div>
</div>
<div class="form-row">
<div class="form-group col-md-2">
<label for="firstname">Sibling Last Name</label>
{{form.siblings_last_name}}
</div>
<div class="form-group col-md-2">
<label for="middlename">Sibling First Name</label>
{{form.siblings_first_name}}
</div>
<div class="form-group col-md-2">
<label for="lastname">Sibling Middle Name</label>
{{form.siblings_middle_name}}
</div>
<div class="form-group col-md-2">
<label for="emailadd">Occupation</label>
{{form.siblings_occupation}}
</div>
<div class="form-group col-md-1">
<label for="contact">Age</label>
{{form.siblings_age}}
</div>
<div class="form-group col-md-2">
<label for="contact">Sibling Tel No.</label>
{{form.siblings_telno}}
</div>
</div>
<div class="form-row">
<div class="form-group col-md-2">
<label for="firstname">Sibling Last Name</label>
{{form.siblings2_last_name}}
</div>
<div class="form-group col-md-2">
<label for="middlename">Sibling First Name</label>
{{form.siblings2_first_name}}
</div>
<div class="form-group col-md-2">
<label for="lastname">Sibling Middle Name</label>
{{form.siblings2_middle_name}}
</div>
<div class="form-group col-md-2">
<label for="emailadd">Occupation</label>
{{form.siblings2_occupation}}
</div>
<div class="form-group col-md-1">
<label for="contact">Age</label>
{{form.siblings2_age}}
</div>
<div class="form-group col-md-2">
<label for="contact">Sibling Tel No.</label>
{{form.siblings2_telno}}
</div>
</div>
<div class="form-row">
<div class="form-group col-md-2">
<label for="firstname">Sibling Last Name</label>
{{form.siblings3_last_name}}
</div>
<div class="form-group col-md-2">
<label for="middlename">Sibling First Name</label>
{{form.siblings3_first_name}}
</div>
<div class="form-group col-md-2">
<label for="lastname">Sibling Middle Name</label>
{{form.siblings3_middle_name}}
</div>
<div class="form-group col-md-2">
<label for="emailadd">Occupation</label>
{{form.siblings3_occupation}}
</div>
<div class="form-group col-md-1">
<label for="contact">Age</label>
{{form.siblings3_age}}
</div>
<div class="form-group col-md-2">
<label for="contact">Sibling Tel No.</label>
{{form.siblings3_telno}}
</div>
</div>
</div>
<button id="previous_personal">Previous</button>
<button id="next_educational">Next</button>
</div>
<input type="submit" value="submit">
</div>
You need to include everything within the initial <form> tag. At the moment you have the second part of your form outside the <form></form> and so nothing is happening when you submit.
The second set of form fields is not in a <form> so it won't do anything on form submit. You either have to add it to the current form or wrap it in another form tag and handle that submit separately. Some type of ajax might come in handy here or maybe even using partial templates in django and having the partial be a part of the form then if you get a successful response you could show the next form and handle it almost as a completely separate form. When you submit the form you can also check the network tab in your dev tools and click on the request you just sent then go to the param tab and see what params were sent in the form submit and what their values are. I know this isn't a direct answer but hopefully it can help you debug a bit more.
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>