Below my output there is no space for every Row, how to give space for every row using Bootstrap CSS? please check the code
<div class="form-group" >
<div class="col-sm-2">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
Thanks in Advance
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-2">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-2">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-2">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-2">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-2">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-2">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-2">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-2">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-2">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
.form-group > * {
margin:5px;
}
The proper markup should be (using your col width as an example):
<div class="row">
<div class="col-sm-2">
<div class="form-group">
<label for="input1">Some label</label>
<input id="input1" placeholder="Type something…" type="text">
</div>
<div class="form-group">
<label for="input2">Some label 2</label>
<input id="input2" placeholder="Type something…" type="text">
</div>
</div>
</div>
As it stands, you don't have any rows defined.
Related
Hi i would like some help on how to space my name, email, contact, address input box to match the spacing for description as below in my picture. Please ignore my same class id i use below for my code as i am testing
here is the code for my form
<form>
<div class="form-group row">
<label for="inputName" class="col-form-label" style="padding-left: 20px; ">Name: </label>
<div class="col-sm-5">
<input type="Name" class="form-control" id="inputEmail3" placeholder="Name" >
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-form-label" style="padding-left: 22px;">Email: </label>
<div class="col-sm-5">
<input type="inputEmail3" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-form-label" style="padding-left: 22px;">Contact: </label>
<div class="col-sm-5">
<input type="inputEmail3" class="form-control" id="inputEmail3" placeholder="Contact">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-form-label" style="padding-left: 22px;">Address: </label>
<div class="col-sm-5">
<input type="inputEmail3" class="form-control" id="inputEmail3" placeholder="Address">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-form-label" style="padding-left: 22px;">Description: </label>
<div class="col-sm-5">
<input type="inputEmail3" class="form-control" id="inputEmail3" placeholder="Description...">
</div>
</div>
</form>
Perhaps it would help you if you use Bootstrap form builder to achieve this.
Here is a my code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<form>
<div class="form-group row">
<label for="name" class="col-2 col-form-label">Name:</label>
<div class="col-10">
<input id="name" name="name" placeholder="Name" type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="email" class="col-2 col-form-label">Email:</label>
<div class="col-10">
<input id="email" name="email" placeholder="Email" type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="contact" class="col-2 col-form-label">Contact:</label>
<div class="col-10">
<input id="contact" name="contact" placeholder="Contact" type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="address" class="col-2 col-form-label">Address:</label>
<div class="col-10">
<input id="address" name="address" placeholder="Address" type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="description" class="col-2 col-form-label">Description:</label>
<div class="col-10">
<input id="description" name="description" placeholder="Description" type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<div class="offset-2 col-10">
<button name="submit" type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
Or code pen
A possible solution in which you can achieve a uniformity (with align), is by adding a class to the labels that define a min-width that is equal to the width of the Description label.
This will force the shorter labels to have the same width at a minimum as the long label, and aligning them to the right will center them against the input elements.
For example:
.my-form-label {
min-width: 7rem;
text-align:right;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class='container'>
<form>
<div class="form-group row">
<label for="inputName" class="col-form-label my-form-label" style="padding-left: 20px; ">Name: </label>
<div class="col-sm-5">
<input type="Name" class="form-control" id="inputEmail3" placeholder="Name" >
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-form-label my-form-label" style="padding-left: 22px;">Email: </label>
<div class="col-sm-5">
<input type="inputEmail3" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-form-label my-form-label" style="padding-left: 22px;">Contact: </label>
<div class="col-sm-5">
<input type="inputEmail3" class="form-control" id="inputEmail3" placeholder="Contact">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-form-label my-form-label" style="padding-left: 22px;">Address: </label>
<div class="col-sm-5">
<input type="inputEmail3" class="form-control" id="inputEmail3" placeholder="Address">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-form-label my-form-label" style="padding-left: 22px;">Description: </label>
<div class="col-sm-5">
<input type="inputEmail3" class="form-control" id="inputEmail3" placeholder="Description...">
</div>
</div>
</form>
</div>
You should add a col value to your label. Here, I use col-2 so the input can be included in the rest of the row.
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<form>
<div class="form-group row my-3">
<label for="inputName" class="col-2 col-form-label"> Name:</label>
<input class="col-sm-5" type="Name" class="form-control" id="inputEmail3"
placeholder="Name">
</div>
<div class="form-group row my-3">
<label for="inputEmail3" class="col-2 col-form-label ">Email:</label>
<input class="col-sm-5" type="inputEmail3" class="form-control" id="inputEmail3"
placeholder="Email">
</div>
<div class="form-group row my-3">
<label for="inputEmail3" class="col-2 col-form-label ">Contact:</label>
<input class="col-sm-5" type="inputEmail3" class="form-control" id="inputEmail3"
placeholder="Contact">
</div>
<div class="form-group row my-3">
<label for="inputEmail3" class="col-2 col-form-label ">Address:</label>
<input class="col-sm-5" type="inputEmail3" class="form-control" id="inputEmail3"
placeholder="Address">
</div>
<div class="form-group row my-3">
<label for="inputEmail3" class="col-2 col-form-label ">Description:</label>
<input class="col-sm-5" type="inputEmail3" class="form-control" id="inputEmail3"
placeholder="Description...">
</div>
</form>
I am trying to make horizontal form with three field but I am facing space issue between label and input type.
I want to reduce space between label and input.
HTML code:
<div class="container-fluid">
<form class="row">
<div class="col-md-12">
<div class="form-group row">
<label for="inputKey" class="col-md-2 control-label">Last Name</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputKey" placeholder="Key">
</div>
<label for="inputValue" class="col-md-2 control-label">First Name</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
<label for="inputValue" class="col-md-2 control-label">First Name</label>
<div class="col-md-2">
<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>
</div>
</div>
You just need to remove the col-sm-2 in your label. You can also check the my code below, it could save more space.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container-fluid">
<form class="row">
<div class="col-md-12">
<div class="form-group row">
<div class="col-md-4">
<label for="inputKey" class=" control-label">Last Name</label>
<input type="text" class="form-control" id="inputKey" placeholder="Key">
</div>
<div class="col-md-4">
<label for="inputValue" class="control-label">First Name</label>
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
<div class="col-md-4">
<label for="inputValue" class="control-label">First Name</label>
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
<div class="form-group row">
<div class="col-md-2">
<label for="inputKey" class=" control-label">State</label>
<input type="text" class="form-control" id="inputSt" placeholder="ST">
</div>
<div class="col-md-2">
<label for="inputKey" class="control-label">zip</label>
<input type="text" class="form-control" id="inputZip" placeholder="Zip">
</div>
<div class="col-md-4">
<label for="inputValue" class=" control-label">Other</label>
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
</div>
</form>
</div>
</div>
<hr>
<h3>Or remove the col-sm for labels.</h3>
<div class="container-fluid">
<form >
<div class="col-md-12">
<div class="form-group row">
<label for="inputPassword" class="col-form-label">Last Name</label>
<div class="col-sm-3">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<label for="inputPassword" class="col-form-label">Last Name</label>
<div class="col-sm-3">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<label for="inputPassword" class="col-form-label">Last Name</label>
<div class="col-sm-3">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</div>
</form>
</div>
</div>
Open the snippet in full page.
Just put label and input in same column that is in my case col-md-4 and give it a class like columns. and
.columns {
display: flex;
flex-direction: row;
}
label {
width: 6rem;
margin-right: 2rem;
}
<div class="container-fluid">
<form class="row">
<div class="col-md-12">
<div class="form-group row">
<div class="col-md-4 columns">
<label for="inputKey" class="control-label">Last Name</label>
<input type="text" class="form-control" id="inputKey" placeholder="Key">
</div>
<div class="col-md-4 columns">
<label for="inputValue" class="control-label">First Name</label>
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
<div class="col-md-4 columns">
<label for="inputValue" class="control-label">First Name</label>
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
</div>
</form>
</div>
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>
Hi can someone help me with aligh this form to the right, i give it a try(stupid one but why not to try) and set form-horizontal margin-left: some px; and it did move form but it resize input. I want to align it to a specific place.
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label for="inputIme" class="col-sm-2 control-label">Ime</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" placeholder="Ime">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">E-mail</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword3" placeholder="E-mail">
</div>
</div>
<div class="form-group">
<label for="inputTelefon" class="col-sm-2 control-label">Telefon</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword3" placeholder="Broj Telefona">
</div>
</div>
<div class="form-group">
<label for="inputAdresa" class="col-sm-2 control-label">Adresa</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword3" placeholder="Vasa Adresa">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Posalji zahtev</button>
</div>
</div>
</form>
</div>
<div class="col-sm-6 offset-sm-6">
<form class="form-horizontal">
<div class="form-group">
<label for="inputIme" class="col-sm-2 control-label">Ime</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" placeholder="Ime">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">E-mail</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword3" placeholder="E-mail">
</div>
</div>
<div class="form-group">
<label for="inputTelefon" class="col-sm-2 control-label">Telefon</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword3" placeholder="Broj Telefona">
</div>
</div>
<div class="form-group">
<label for="inputAdresa" class="col-sm-2 control-label">Adresa</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword3" placeholder="Vasa Adresa">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Posalji zahtev</button>
</div>
</div>
</form>
</div>
although your question is not clear to but I guess you need to shift your form at right side so you can use above code
<form class="form-horizontal" method="post" action="submit.php" enctype="multipart/form-data">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email">
</div>
</div>
<div class="form-group">
<label for="phoneNumber" class="col-sm-2 control-label">Phone:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="phone" name="phone">
</div>
</div>
<div class="form-group">
<label for="major" class="col-sm-2 control-label">Major:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="major" name="major">
</div>
</div>
<hr>
<div class="form-group">
<label for="itemForSale" class="col-sm-2 control-label">Item for Sale:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="itemForSale1" name="itemForSale1">
</div>
</div>
<div class="form-group">
<label for="quantity" class="col-sm-2 control-label">Quantity:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="quantity1" name="quantity1">
</div>
</div>
<div class="form-group">
<label for="price1" class="col-sm-2 control-label">Price:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="price1" name="price1">
</div>
</div>
<div class="form-group">
<label for="itemOneImg1" class="col-sm-2 control-label">Image 1:</label>
<div class="col-sm-10">
<input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemOneImg1">
</div>
</div>
<div class="form-group">
<label for="itemOneImg2" class="col-sm-2 control-label">Image 2:</label>
<div class="col-sm-10">
<input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemOneImg2">
</div>
</div>
<hr>
<!-- Two -->
<div class="form-group">
<label for="itemForSale2" class="col-sm-2 control-label">Item for Sale:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="itemForSale2" name="itemForSale2">
</div>
</div>
<div class="form-group">
<label for="quantity2" class="col-sm-2 control-label">Quantity:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="quantity2" name="quantity2">
</div>
</div>
<div class="form-group">
<label for="major2" class="col-sm-2 control-label">Price:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="price2" name="price2">
</div>
</div>
<div class="form-group">
<label for="itemTwoImg1" class="col-sm-2 control-label">Image 1:</label>
<div class="col-sm-10">
<input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemTwoImg1">
</div>
</div>
<div class="form-group">
<label for="itemTwoImg2" class="col-sm-2 control-label">Image 2:</label>
<div class="col-sm-10">
<input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemTwoImg2">
</div>
</div>
<!-- END TWO -->
<hr>
<!-- THREE -->
<div class="form-group">
<label for="itemForSale3" class="col-sm-2 control-label">Item for Sale:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="itemForSale3" name="itemForSale3">
</div>
</div>
<div class="form-group">
<label for="quantity3" class="col-sm-2 control-label">Quantity:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="quantity3" name="quantity3">
</div>
</div>
<div class="form-group">
<label for="price3" class="col-sm-2 control-label">Price:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="price3" name="price3">
</div>
</div>
<div class="form-group">
<label for="itemThreeImg1" class="col-sm-2 control-label">Image 1:</label>
<div class="col-sm-10">
<input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemThreeImg1">
</div>
</div>
<div class="form-group">
<label for="itemThreeImg2" class="col-sm-2 control-label">Image 2:</label>
<div class="col-sm-10">
<input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemThreeImg2">
</div>
</div>
<input id="submit" name="submit" type="submit" value="Submit" class="btn btn-primary pull-right">
</form>
Would there be anyway for me to only get the parts that say <-- TWO --> and <-- THREE -->, to only appear if someone click a "additional files" button?
I tried looking but I couldn't find a nice and easy way to do it. Thanks guys
Add a class to the divs you want to show—like, class="show-onclick"—and then use jQuery to handle the click event:
The HTML would look like this:
<div class="show-onclick form-group">
<label for="itemForSale2" class="col-sm-2 control-label">Item for Sale:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="itemForSale2" name="itemForSale2">
</div>
</div>
<div class="show-onclick form-group">
<label for="quantity2" class="col-sm-2 control-label">Quantity:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="quantity2" name="quantity2">
</div>
</div>
<div class="show-onclick form-group">
<label for="major2" class="col-sm-2 control-label">Price:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="price2" name="price2">
</div>
</div>
<div class="show-onclick form-group">
<label for="itemTwoImg1" class="col-sm-2 control-label">Image 1:</label>
<div class="col-sm-10">
<input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemTwoImg1">
</div>
</div>
<div class="show-onclick form-group">
<label for="itemTwoImg2" class="col-sm-2 control-label">Image 2:</label>
<div class="col-sm-10">
<input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemTwoImg2">
</div>
</div>
<!-- END TWO -->
<hr>
<!-- THREE -->
<div class="show-onclick form-group">
<label for="itemForSale3" class="col-sm-2 control-label">Item for Sale:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="itemForSale3" name="itemForSale3">
</div>
</div>
<div class="show-onclick form-group">
<label for="quantity3" class="col-sm-2 control-label">Quantity:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="quantity3" name="quantity3">
</div>
</div>
<div class="show-onclick form-group">
<label for="price3" class="col-sm-2 control-label">Price:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="price3" name="price3">
</div>
</div>
<div class="show-onclick form-group">
<label for="itemThreeImg1" class="col-sm-2 control-label">Image 1:</label>
<div class="col-sm-10">
<input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemThreeImg1">
</div>
</div>
<div class="show-onclick form-group">
<label for="itemThreeImg2" class="col-sm-2 control-label">Image 2:</label>
<div class="col-sm-10">
<input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemThreeImg2">
</div>
</div>
<button type="button" id="additional-files">Additional files</button>
And the JavaScript would look like this:
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function() {
$('#additional-files').click(function() {
$('.show-onclick').show();
});
});
</script>