I have a little issue with a bootstrap form.
Code
<form class="<!-- form-horizontal --> form-inline text-left" id="form" action="SubmitMainForm" method="post">
<div class="form-group col-xs-12">
<label class=" col-xs-1" for="test1">test1</label>
<div class="col-xs-5">
<input class="form-control " type="text" name="test1" id="test1">
</div>
<label class=" col-xs-1" for="test2">test2</label>
<div class="col-xs-5">
<input class="form-control " type="text" name="test2" id="test2">
</div>
</div>
<div class="form-group col-xs-12">
<label for="description" class="col-xs-1">Description</label>
<textarea class=" col-xs-11" rows="6" name="ta_description" id="ta_description"></textarea>
</div>
<div class="form-group col-xs-12">
<label for="description" class="col-xs-1">Description</label>
<textarea class=" col-xs-5" rows="6" name="ta_description" id="ta_description"></textarea>
<label for="description" class="col-xs-1">Description</label>
<textarea class=" col-xs-5" rows="6" name="ta_description" id="ta_description"></textarea>
</div>
<!-- test with no div for the input control (not working) -->
<!--
<div class="form-group col-xs-12">
<label class=" col-xs-1" for="test1">test1</label>
<input class="form-control col-xs-5" type="text" name="test1" id="test1">
<label for="description" class="col-xs-1">Description</label>
<textarea class=" col-xs-5" rows="6" name="ta_description" id="ta_description"></textarea>
</div>
-->
</form>
As you can see, there's a little glitch on the first line.
The controls are not correctly alligned to the next lines controls.
I'm using Bootstrap 3.3.4.
How can I have this fixed to make it cute looking?
thx in advance.
This should get the job done. Be sure to follow the documentation on the Bootstrap site. You can figure this out :)
Here's what I came up with for you. Compare this to what you currently have so you can see where you went wrong.
<div class="container">
<form class="form-horizontal" id="form" action="SubmitMainForm" method="post">
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="form-group">
<label class="control-label col-sm-4" for="test1">test1</label>
<div class="col-sm-8">
<input class="form-control" type="text" name="test1" id="test1">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="form-group">
<label class="control-label col-sm-2" for="test2">test2</label>
<div class="col-sm-10">
<input class="form-control" type="text" name="test2" id="test2">
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="description" class="control-label col-sm-2">Description</label>
<div class="col-xs-12 col-sm-10">
<textarea class="form-control" rows="6" name="ta_description" id="ta_description"></textarea>
</div>
</div>
<div class="form-group">
<label for="description" class="control-label col-sm-2">Description</label>
<div class="col-xs-12 col-sm-10">
<textarea class="form-control" rows="6" name="ta_description" id="ta_description"></textarea>
</div>
</div>
<div class="form-group">
<label for="description" class="control-label col-sm-2">Description</label>
<div class="col-xs-12 col-sm-10">
<textarea class="form-control" rows="6" name="ta_description" id="ta_description"></textarea>
</div>
</div>
</form>
Remove comment in form class and use any one class name:
and I edit code just try
<form class="form-horizontal col-xs-offset-2" id="form" action="SubmitMainForm" method="post">
<div class="form-group">
<label class=" col-xs-1" for="test1">test1</label>
<div class="col-xs-3">
<input class="form-control " type="text" name="test1" id="test1">
</div>
<label class=" col-xs-1" for="test2">test2</label>
<div class="col-xs-3">
<input class="form-control " type="text" name="test2" id="test2">
</div>
</div>
<div class="form-group">
<label for="description" class="col-xs-1">Description</label>
<div class="col-xs-5">
<textarea rows="3" cols="30" name="ta_description" id="ta_description"></textarea>
</div>
</div>
<div class="form-group">
<label for="description" class="col-xs-1">Description</label>
<div class="col-xs-3">
<textarea rows="3" cols="30" name="ta_description" id="ta_description"></textarea>
</div>
<label for="description" class="col-xs-1">Description</label>
<div class="col-xs-3">
<textarea rows="3" cols="30" name="ta_description" id="ta_description"></textarea>
</div>
</div>
</form>
Related
There is an issue with Bootstrap 4 and Safari broswer on Mac. When using cols inside a row. I was wondering if anyone could help me fix my issue where my form is loading incorrectly on Safari? As you can see on the chrome browser the layout looks how I want it to. However, the form doesn't load correctly on the Safari browser in terms of the layout. Page link I'm talking about.
HOW THE FORM LOOKS ON SAFARI
image 1
HOW THE FORM LOOKS ON CHROME
image 2
CODE TO PAGE
<div class="rates-form-shortcode mt-5">
<div class="text-center">
<strong style="font-weight: bolder;"><h5><u style="font-weight: 900;">BOOK A JOB</u></h5></strong>
</div>
<?php if (isset($_GET['success']) && !empty($_GET['success']) && $_GET['success'] == 'true'): ?>
<div class="custom-alert-success alert alert-success mt-3" role="alert">
Job has been booked successfully.
</div>
<?php endif; ?>
<form action="<?php echo admin_url('admin-post.php'); ?>" method="POST">
<input type="hidden" name="action" value="ccdjps_submit_rates_form">
<input type="hidden" name="rate_form_subject" value="<?php echo $atts['subject']; ?>">
<input type="hidden" name="form_refferer" value="<?php echo get_permalink(); ?>">
<div class="input-body mt-5">
<div class="form-group row">
<label for="date" class="col-sm-2 col-form-label">Date</label>
<div class="col-sm-10">
<input type="text" class="form-control datepicker" id="date" name="date" required>
</div>
</div>
<div class="form-group row">
<label for="job-reference" class="col-sm-2 col-form-label">Job Reference</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="job-reference" name="job_reference" required>
</div>
</div>
<div class="collection-delivery-row row mt-4">
<div class="col-sm-6">
<div class="text-center mb-3">
<h6 style="font-weight: bold;">Collection Address</h6>
</div>
<div class="form-group row">
<label for="collection-full-name" class="col-sm-4 col-form-label">Full Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="collection-full-name" name="collection_full_name" required>
</div>
</div>
<div class="form-group row">
<label for="collection-address-line-1" class="col-sm-4 col-form-label">Address Line 1</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="collection-address-line-1" name="collection_address_line_1" required>
</div>
</div>
<div class="form-group row">
<label for="collection-address-line-2" class="col-sm-4 col-form-label">Address Line 2</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="collection-address-line-2" name="collection_address_line_2">
</div>
</div>
<div class="form-group row">
<label for="collection-address-line-3" class="col-sm-4 col-form-label">Address Line 3</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="collection-address-line-3" name="collection_address_line_">
</div>
</div>
<div class="form-group row">
<label for="collection-town" class="col-sm-4 col-form-label">Town</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="collection-town" name="collection_town" required>
</div>
</div>
<div class="form-group row">
<label for="collection-post-code" class="col-sm-4 col-form-label">Post code</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="collection-post-code" name="collection_post_code" required>
</div>
</div>
<div class="form-group row">
<label for="collection-country" class="col-sm-4 col-form-label">Country</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="collection-country" name="collection_country" required>
</div>
</div>
<div class="form-group row">
<label for="collection-phone-number" class="col-sm-4 col-form-label">Phone No.</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="collection-phone-number" name="collection_phone_number" required>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="text-center mb-3">
<h6 style="font-weight: bold;">Delivery Address</h6>
</div>
<div class="form-group row">
<label for="delivery-full-name" class="col-sm-4 col-form-label">Full Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="delivery-full-name" name="delivery_full_name" required>
</div>
</div>
<div class="form-group row">
<label for="delivery-address-line-1" class="col-sm-4 col-form-label">Address Line 1</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="delivery-address-line-1" name="delivery_address_line_1" required>
</div>
</div>
<div class="form-group row">
<label for="delivery-address-line-2" class="col-sm-4 col-form-label">Address Line 2</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="delivery-address-line-2" name="delivery_address_line_2">
</div>
</div>
<div class="form-group row">
<label for="delivery-address-line-3" class="col-sm-4 col-form-label">Address Line 3</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="delivery-address-line-3" name="delivery_address_line_3">
</div>
</div>
<div class="form-group row">
<label for="delivery-town" class="col-sm-4 col-form-label">Town</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="delivery-town" name="delivery_town" required>
</div>
</div>
<div class="form-group row">
<label for="delivery-post-code" class="col-sm-4 col-form-label">Post code</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="delivery-post-code" name="delivery_post_code" required>
</div>
</div>
<div class="form-group row">
<label for="delivery-country" class="col-sm-4 col-form-label">Country</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="delivery-country" name="delivery_country" required>
</div>
</div>
<div class="form-group row">
<label for="delivery-phone-number" class="col-sm-4 col-form-label">Phone No.</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="delivery-phone-number" name="delivery_phone_number" required>
</div>
</div>
</div>
</div>
<div class="form-group row mt-3">
<label for="number-of-items" class="col-sm-2 col-form-label">No. of Items</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="number-of-items" name="number_of_items" required>
</div>
</div>
<div class="form-group row">
<label for="weight" class="col-sm-2 col-form-label">Weight</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="weight" name="weight" required>
</div>
</div>
<div class="form-group row">
<label for="height" class="col-sm-2 col-form-label">Height</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="height" name="height" required>
</div>
</div>
<div class="form-group row">
<label for="length" class="col-sm-2 col-form-label">Length</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="length" name="length" required>
</div>
</div>
<div class="form-group row">
<label for="width" class="col-sm-2 col-form-label">Width</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="width" name="width" required>
</div>
</div>
<div class="form-group row">
<label for="service" class="col-sm-2 col-form-label">Service</label>
<div class="col-sm-10">
<select id="service" class="form-control" name="service" required>
<option value="">Choose...</option>
<option value="UK Overnight">UK Overnight</option>
<option value="International">International</option>
<option value="Chauffeur Service">Chauffeur Service</option>
<option value="Removals">Removals</option>
<option value="Parcels/Pallets">Parcels/Pallets</option>
<option value="Same Day Delivery">Same Day Delivery</option>
</select>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="additional-collection-notes">Additional Collection Notes</label>
<textarea name="additional_collection_notes" id="additional-collection-notes" cols="30" rows="3"></textarea>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="additional-delivery-notes">Additional Delivery Notes</label>
<textarea name="additional_delivery_notes" id="additional-delivery-notes" cols="30" rows="3"></textarea>
</div>
</div>
</div>
<div style="margin-top: 2rem;">
<button class="custom-btn themestek-vc_general themestek-vc_btn3 themestek-vc_btn3-size-md themestek-vc_btn3-shape-square themestek-vc_btn3-style-flat themestek-vc_btn3-weight-yes themestek-vc_btn3-color-skincolor">SUBMIT</button>
</div>
</div>
</form>
</div>
First time ever I solved the problem of my post before someone else :)
It seems there is some code hidden in :before and :after elements inside the rows. Therefore, this causes some issues in Safari web browsers.
I embedded this CSS code onto my page inside the style tag and it worked.
.row:before, .row:after {display: none !important;
New modified code
<style>
.row:before, .row:after {display: none !important;}
</style>
<div class="rates-form-shortcode mt-5">
<div class="text-center">
<strong style="font-weight: bolder;"><h5><u style="font-weight: 900;">BOOK A JOB</u></h5></strong>
</div>
<?php if (isset($_GET['success']) && !empty($_GET['success']) && $_GET['success'] == 'true'): ?>
<div class="custom-alert-success alert alert-success mt-3" role="alert">
Job has been booked successfully.
</div>
<?php endif; ?>
<form action="<?php echo admin_url('admin-post.php'); ?>" method="POST">
<input type="hidden" name="action" value="ccdjps_submit_rates_form">
<input type="hidden" name="rate_form_subject" value="<?php echo $atts['subject']; ?>">
<input type="hidden" name="form_refferer" value="<?php echo get_permalink(); ?>">
<div class="input-body mt-5">
<div class="form-group row">
<label for="date" class="col-sm-2 col-form-label">Date</label>
<div class="col-sm-10">
<input type="text" class="form-control datepicker" id="date" name="date" required>
</div>
</div>
<div class="form-group row">
<label for="job-reference" class="col-sm-2 col-form-label">Job Reference</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="job-reference" name="job_reference" required>
</div>
</div>
<div class="collection-delivery-row row mt-4">
<div class="col-sm-6">
<div class="text-center mb-3">
<h6 style="font-weight: bold;">Collection Address</h6>
</div>
<div class="form-group row">
<label for="collection-full-name" class="col-sm-4 col-form-label">Full Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="collection-full-name" name="collection_full_name" required>
</div>
</div>
<div class="form-group row">
<label for="collection-address-line-1" class="col-sm-4 col-form-label">Address Line 1</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="collection-address-line-1" name="collection_address_line_1" required>
</div>
</div>
<div class="form-group row">
<label for="collection-address-line-2" class="col-sm-4 col-form-label">Address Line 2</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="collection-address-line-2" name="collection_address_line_2">
</div>
</div>
<div class="form-group row">
<label for="collection-address-line-3" class="col-sm-4 col-form-label">Address Line 3</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="collection-address-line-3" name="collection_address_line_">
</div>
</div>
<div class="form-group row">
<label for="collection-town" class="col-sm-4 col-form-label">Town</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="collection-town" name="collection_town" required>
</div>
</div>
<div class="form-group row">
<label for="collection-post-code" class="col-sm-4 col-form-label">Post code</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="collection-post-code" name="collection_post_code" required>
</div>
</div>
<div class="form-group row">
<label for="collection-country" class="col-sm-4 col-form-label">Country</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="collection-country" name="collection_country" required>
</div>
</div>
<div class="form-group row">
<label for="collection-phone-number" class="col-sm-4 col-form-label">Phone No.</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="collection-phone-number" name="collection_phone_number" required>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="text-center mb-3">
<h6 style="font-weight: bold;">Delivery Address</h6>
</div>
<div class="form-group row">
<label for="delivery-full-name" class="col-sm-4 col-form-label">Full Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="delivery-full-name" name="delivery_full_name" required>
</div>
</div>
<div class="form-group row">
<label for="delivery-address-line-1" class="col-sm-4 col-form-label">Address Line 1</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="delivery-address-line-1" name="delivery_address_line_1" required>
</div>
</div>
<div class="form-group row">
<label for="delivery-address-line-2" class="col-sm-4 col-form-label">Address Line 2</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="delivery-address-line-2" name="delivery_address_line_2">
</div>
</div>
<div class="form-group row">
<label for="delivery-address-line-3" class="col-sm-4 col-form-label">Address Line 3</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="delivery-address-line-3" name="delivery_address_line_3">
</div>
</div>
<div class="form-group row">
<label for="delivery-town" class="col-sm-4 col-form-label">Town</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="delivery-town" name="delivery_town" required>
</div>
</div>
<div class="form-group row">
<label for="delivery-post-code" class="col-sm-4 col-form-label">Post code</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="delivery-post-code" name="delivery_post_code" required>
</div>
</div>
<div class="form-group row">
<label for="delivery-country" class="col-sm-4 col-form-label">Country</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="delivery-country" name="delivery_country" required>
</div>
</div>
<div class="form-group row">
<label for="delivery-phone-number" class="col-sm-4 col-form-label">Phone No.</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="delivery-phone-number" name="delivery_phone_number" required>
</div>
</div>
</div>
</div>
<div class="form-group row mt-3">
<label for="number-of-items" class="col-sm-2 col-form-label">No. of Items</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="number-of-items" name="number_of_items" required>
</div>
</div>
<div class="form-group row">
<label for="weight" class="col-sm-2 col-form-label">Weight</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="weight" name="weight" required>
</div>
</div>
<div class="form-group row">
<label for="height" class="col-sm-2 col-form-label">Height</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="height" name="height" required>
</div>
</div>
<div class="form-group row">
<label for="length" class="col-sm-2 col-form-label">Length</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="length" name="length" required>
</div>
</div>
<div class="form-group row">
<label for="width" class="col-sm-2 col-form-label">Width</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="width" name="width" required>
</div>
</div>
<div class="form-group row">
<label for="service" class="col-sm-2 col-form-label">Service</label>
<div class="col-sm-10">
<select id="service" class="form-control" name="service" required>
<option value="">Choose...</option>
<option value="UK Overnight">UK Overnight</option>
<option value="International">International</option>
<option value="Chauffeur Service">Chauffeur Service</option>
<option value="Removals">Removals</option>
<option value="Parcels/Pallets">Parcels/Pallets</option>
<option value="Same Day Delivery">Same Day Delivery</option>
</select>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="additional-collection-notes">Additional Collection Notes</label>
<textarea name="additional_collection_notes" id="additional-collection-notes" cols="30" rows="3"></textarea>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="additional-delivery-notes">Additional Delivery Notes</label>
<textarea name="additional_delivery_notes" id="additional-delivery-notes" cols="30" rows="3"></textarea>
</div>
</div>
</div>
<div style="margin-top: 2rem;">
<button class="custom-btn themestek-vc_general themestek-vc_btn3 themestek-vc_btn3-size-md themestek-vc_btn3-shape-square themestek-vc_btn3-style-flat themestek-vc_btn3-weight-yes themestek-vc_btn3-color-skincolor">SUBMIT</button>
</div>
</div>
</form>
</div>
My contact form was working properly in the beginning. when I checked it in the next day after adding opacity to the form-control my Form input is not allowing me to enter any input.. it is acts like disabled input field.
in css I just added
.form-control{
background:rgba(0,0,0,0.2);
border:none;
}
<form class="" action="about.html" method="post">
<div class="col-md-9">
<div class="col-md-12">
<div class="col-md-6 form-group"><label for="name" class="col-md-2 control-label">Name</label>
<div class="col-md-10"><input type="text" class="form-control" id="name" name="name" value=""/></div>
</div>
<div class="col-md-6 form-group"><label for="email" class="col-md-2 control-label">Email</label>
<div class="col-md-10"><input type="email" class="form-control" id="email" name="email" value=""/></div>
</div>
<div class="col-md-6 form-group"><label for="mobile" class="col-md-2">mobile</label>
<div class="col-md-10"><input type="text" class="form-control" id="mobile" name="mobile" value=""/></div>
</div>
<div class="col-md-6 form-group"><label for="iam" class="col-md-2 control-label">I am</label>
<div class="col-md-10"><input type="text" class="form-control" id="iam" name="iam" value=""/></div>
</div>
<div class="col-md-6 form-group"><label for="state" class="col-md-2 control-label">State</label>
<div class="col-md-10"><input type="text" class="form-control" id="state" name="state" value=""/></div>
</div>
<div class="col-md-6 form-group"><label for="city" class="col-md-2 control-label">City</label>
<div class="col-md-10"><input type="text" class="form-control" id="city" name="city" value=""/></div>
</div>
<div class="col-md-6 form-group"><label for="locality" class="col-md-2 control-label">Locality</label>
<div class="col-md-10"><textarea class="form-control" rows="4" name="locality"></textarea></div>
</div>
<div class="col-md-6 form-group"><label for="message" class="col-md-2 control-label">Message</label>
<div class="col-md-10"><textarea class="form-control" rows="4" name="message"></textarea>
</div>
</div>
</div>
</div>
<div class="col-md-3 form-group">
<br><br>
<button type="submit" class="btn red-button" name="sendemail"> Send E-mail</button>
</div>
</form>`
why my email input not occupying full width in bootstrap column
I am using bootstrap and opening this html page with visual studio project's default base layout
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
<form role="form">
<hr>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="UserFirstName" id="UserFirstName" class="form-control input-lg" placeholder="First Name" tabindex="1" required autocomplete="on">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="UserLastName" id="UserLastName" class="form-control input-lg" placeholder="Last Name" tabindex="2" required autocomplete="on">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="MobileNumber" id="MobileNumber" class="form-control input-lg " placeholder="Mobile # (92)321-2255434" tabindex="3" required autocomplete="on" data-mask="(99)-999-9999999">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="BusinessName" id="BusinessName" class="form-control input-lg" placeholder="Business Name" tabindex="4" required autocomplete="on">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group ">
<input type="email" name="Email" id="Email" class="form-control input-lg" placeholder="Valid Email Address (For Varification)" tabindex="5" required autocomplete="on">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="password" id="Password" class="form-control input-lg" placeholder="Password" tabindex="6" required autocomplete="off">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="ConfirmPassword" id="ConfirmPassword" class="form-control input-lg" placeholder="Confirm Password" tabindex="7" required autocomplete="off">
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12 col-md-6">
<input type="submit" value="Register" class="btn btn-primary btn-block btn-lg" tabindex="7">
</div>
<div class="col-xs-12 col-md-6">Sign In</div>
</div>
<div class="row">
#Html.ValidationSummary("", new { #class = "text-danger" })
</div>
</form>
</div>
</div>
</div>
for your convenience I am attaching image file also, so kindly if some one can help me out
I really need some help here. I've been messing with this form all day and I can't get these boxes to show where I need them to. I'll include a picture below of how I want it to look. I've been trying different things with form-inline and form-horizontal but it's just not working.
Any help would be appreciated.
Here's some of what I've been trying:
<form class="form-horizontal">
<div class="col-md-6">
<h4>Shipping Address</h4>
<hr>
</div>
<div class="col-md-6">
<h4>Contact Info</h4>
<hr>
</div>
<div class="col-md-12">
<div class="form-group row">
<label for="inputKey" class="col-md-2 control-label">First Name</label>
<div class="col-md-4">
<input type="text" class="form-control" id="inputKey" placeholder="First Name">
</div>
<label for="inputValue" class="col-md-3 control-label">Email Address</label>
<div class="col-md-4">
<input type="text" class="form-control" id="inputValue" placeholder="Email Address">
</div>
</div>
</div>
</form>
You just need to make sure you're using the correct rows/cols, and don't use form-horizonal along with the grid columns.
<form class="row">
<div class="col-md-6">
<h4>Shipping Address</h4>
<hr>
</div>
<div class="col-md-6">
<h4>Contact Info</h4>
<hr>
</div>
<div class="col-md-12">
<div class="form-group row">
<label for="inputKey" class="col-md-2 control-label">Key</label>
<div class="col-md-4">
<input type="text" class="form-control" id="inputKey" placeholder="Key">
</div>
<label for="inputValue" class="col-md-2 control-label">Other</label>
<div class="col-md-4">
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-md-2 control-label">State</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputSt" placeholder="ST">
</div>
<div class="col-md-2">
<input type="text" class="form-control" id="inputZip" placeholder="Zip">
</div>
<label for="inputValue" class="col-md-2 control-label">Other</label>
<div class="col-md-4">
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
</div>
</form>
http://www.codeply.com/go/e92EivkCaq
I want this kind of a setup as in the below screenshot.
But currently with the code that I have written, I am getting the below output. I tried various options but unable to get the same output as above.
My current HTML Code:
<form role="form" class="form-horizontal">
<div class="form-group">
<label style="" for="inputPackageName" class="col-sm-2 control-label">Package Name
</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputPackageName" placeholder="Package Name">
</div>
<label style="" for="inputApplicationName" class="col-sm-2 control-label">Application
Name</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputApplicationName"
placeholder="Package Name">
</div>
</div>
</form>
Any idea as to how to get the required layout as in screenshot. Also how to utilize the white space effectively. i.e. Some labels might require more space, some might require less space. How to have the consistency in bootstrap?
Just don't give the class col-sm-2 (in your case) to the labels.
Try to use this layout for the input fields:
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>...</label>
<input class="form-control" .../>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>...</label>
<input class="form-control" .../>
</div>
</div>
This will render a row with 2 columns. To add more rows just copy the layout
Try this:
`.
< div class="col-sm-6">
...
< div class="col-sm-6">
...
<div class="col-md-12">
< div class="col-sm-6">
<div class="form-group">
<label>...</label>
<input class="form-control" .../>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>...</label>
<input class="form-control" .../>
</div>
</div>
</div>
<div class="col-md-12">
< div class="col-md-12">
<div class="form-group">
<label>...</label>
<input class="form-control" .../>
</div>
</div>
</div>
`
This should give you what you want (as long as you don't have other CSS rules that could override Bootstrap):
<form class="form-horizontal">
<div class="form-group">
<label for="inputProjectId" class="col-sm-2 control-label">Project ID</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputProjectId" placeholder="Project ID">
</div>
<label for="inputProjectName" class="col-sm-2 control-label">Project Name</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputProjectName" placeholder="Project Name">
</div>
</div>
<div class="form-group">
<label for="inputReleaseDate" class="col-sm-2 control-label">Release Date</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputReleaseDate" placeholder="Release Date (mm/dd/yyyy)">
</div>
<label for="inputSupervisor" class="col-sm-2 control-label">Supervisor</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputSupervisor" placeholder="Supervisor">
</div>
</div>
<div class="form-group">
<label for="inputProjectDescriptiond" class="col-sm-2 control-label">Project Description</label>
<div class="col-sm-10">
<textarea class="form-control" id="inputProjectDescriptiond" rows="3" placeholder="Enter Project Description"></textarea>
</div>
</div>
</form>
Just paste this code:
<form role="form" class="form-horizontal">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="inputProjectID" class="col-sm-4 control-label">Project ID</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputProjectID" placeholder="Project ID">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputProjectName" class="col-sm-4 control-label">Project Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputProjectName"
placeholder="Project Name">
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="inputReleaseDate" class="col-sm-4 control-label">Release Date</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputReleaseDate" placeholder="Release Date (mm/dd/yyyy)">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputSupervisor" class="col-sm-4 control-label">Supervisor</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputSupervisor" placeholder="Supervisor">
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label for="inputProjectDescription" class="col-sm-2 control-label">Project Description</label>
<div class="col-sm-10">
<textarea class="form-control" id="inputProjectDescription" rows="3" placeholder="Enter Project Description"></textarea>
</div>
</div>
</div>
</form>
Hope this will help you!!
Finally got a better & easy implementation the same way I wanted.Below is the code!
<form class="form-horizontal" id="main-form" role="form" data- toggle="validator" action="blank.html" method="post">
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label" for="inputProjectID">Project ID </label>
<div class="col-md-3 col-3-input">
<input id="inputProjectID" name="inputProjectID" type="text" placeholder="Your Project ID" class="form-control input-md">
</div>
<label class="col-md-2 control-label" for="inputProjectName">Project Name </label>
<div class="col-md-3 col-3-input">
<input id="inputProjectName" name="inputProjectName" type="text" placeholder="Your Project Name" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<div class="group">
<label class="col-md-2 control-label" for="datepicker">Release Date </label>
<div class="col-md-3 col-3-input">
<input id="datepicker" name="inputReleaseDate" type="text" placeholder="Select Release Date" class="form-control input-md">
</div>
</div>
<div class="group">
<label class="col-md-2 control-label" for="inputSupervisor">Supervisor </label>
<div class="col-md-3 col-3-input">
<input id="textinput" name="textinput" type="text" placeholder="Your Supervisor's Name" class="form-control input-md">
</div>
</div>
</div>
<!-- Text area -->
<div class="form-group">
<label class="col-md-2 control-label" for="inputProjectDesc">Project Description </label>
<div class="col-md-9 col-9-input">
<textarea style="resize: none;" rows="3" class="form-control" id="inputProjectDesc" name="inputProjectDesc" placeholder="Your Project Description"></textarea>
</div>
</div>
</form>