I got the following form and fields, but I can't size them so as each is suited to its input type:
This is what it looks like now VS expected result
<div id="addTaskFieldsDiv">
<h6>New task</h6>
<form>
<div class="row flex-nowrap d-flex align-items-center">
<div style="width: 30%" class="form-group col-sm"><select class="form-control" id="taskList" placeholder="Pick a task">
<option>Option1</option>
</select></div>
<div style="width: 15%" class="form-group col-sm"><input type="date" class="form-control" placeholder="MM/dd/yyyy"></div>
<div style="width: 10%" class="form-group col-sm"><input type="link" class="form-control" placeholder="Paste a link"></div>
<div style="width: 32%" class="form-group col-sm"><input type="text" class="form-control" placeholder="Notes"></div>
<div style="width: 7%" class="form-group col-sm"><input type="checkbox" title="Request Approval" class="form-control"></div>
<div style="width: 7%" class="form-group col-sm"><button id="addTask" type="submit" onclick="addTaskToTable()">+</button></div>
</div>
</form><br>
</div>
Yoc can give a try like this ...and change the column grid options to your convinience
<form>
<div class="row flex-nowrap d-flex align-items-center">
<div class="form-group col-sm col-md-3"><select class="form-control" id="taskList" placeholder="Pick a task">
<option>Option1</option>
</select></div>
<div class="form-group col-sm col-md-3"><input type="date" class="form-control" placeholder="MM/dd/yyyy"></div>
<div class="form-group col-sm col-md-2"><input type="link" class="form-control" placeholder="Paste a link"></div>
<div class="form-group col-sm col-md-2"><input type="text" class="form-control" placeholder="Notes"></div>
<div class="form-group col-sm col-md-1"><input type="checkbox" title="Request Approval" class="form-control"></div>
<div class="form-group col-sm col-md-1"><button id="addTask" type="submit" onclick="addTaskToTable()">+</button></div>
</div>
</form><br>
Related
I am trying to enlarge the text box with input-lg but it doesn't work, it remained the same. Also, the text overflowed to the next line, trying to make them align into a single line next to the text box.
<div class="modal-body form-horizontal">
<form class="form-horizontal" id="step2">
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-2 control-label col text-right" ><b>Email:</b></label>
<div class="col-sm-4">
<input id="name" class="form-control input-lg" type="text" placeholder="Enter Your Email Address" />
</div>
</div>
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-2 control-label col text-right" ><b>New Password:</b></label>
<div class="col-sm-4">
<input id="name" class="form-control input-lg" type="text" placeholder="Enter Your New Password" />
</div>
</div>
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-2 control-label col text-right" ><b>Role:</b></label>
<div class="col-sm-4">
<select class="form-control input-lg" id="selectStaff">
<option>1</option>
<option>2</option>
</select>
</div>
</div>
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-2 control-label col text-right" ><b>Created At:</b></label>
<div class='col-sm-4'>
<input type='text' class="form-control input-lg" id='datetimepicker4' />
</div>
</div>
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-2 control-label col text-right" ><b>Updated At:</b></label>
<div class="col-sm-4">
<input id="name" class="form-control input-lg" type="text" placeholder="Enter Your New Password" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="Submit" class="btn btn-primary">Done</button>
</div>
</form>
</div>
Which version of bootstrap you are using? Bootstrap 4 has no input-lg class. I have added the latest bootstrap 4.5.0 on your code.
I modified the col-sm-2 to col-sm-4 and col-sm-4 to col-sm-8 to adjust the width for label and input text.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<div class="modal-body form-horizontal">
<form class="form-horizontal" id="step2">
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-4 control-label col text-right"><b>Email:</b></label>
<div class="col-sm-8">
<input id="name" class="form-control input-lg" type="text" placeholder="Enter Your Email Address" />
</div>
</div>
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-4 control-label col text-right"><b>New Password:</b></label>
<div class="col-sm-8">
<input id="name" class="form-control input-lg" type="text" placeholder="Enter Your New Password" />
</div>
</div>
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-4 control-label col text-right"><b>Role:</b></label>
<div class="col-sm-8">
<select class="form-control input-lg" id="selectStaff">
<option>1</option>
<option>2</option>
</select>
</div>
</div>
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-4 control-label col text-right"><b>Created At:</b></label>
<div class='col-sm-8'>
<input type='text' class="form-control input-lg" id='datetimepicker4' />
</div>
</div>
<div class="form-group row align-items-center justify-content-center">
<label for="name" class="col-sm-4 control-label col text-right"><b>Updated At:</b></label>
<div class="col-sm-8">
<input id="name" class="form-control input-lg" type="text" placeholder="Enter Your New Password" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="Submit" class="btn btn-primary">Done</button>
</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>
I am using bootstrap's grid system and want to create an inline form.
Here is what I have:
<div class="container body-content">
<form class="well form-inline" style="width: 100%;">
<div class="row">
<div class="form-group col-md-4">
<label>Location:</label>
<input type="text" class="form-control">
</div>
<div class="form-group col-md-4">
<label>Assignment:</label>
<input type="text" class="form-control">
</div>
<div class="form-group col-md-4">
<label>Incident Number:</label>
<input type="text" class="form-control">
</div>
</div>
<br>
<br>
<div class="row">
<div class="form-group col-md-4">
<label>Date:</label>
<input type="text" class="form-control">
</div>
<div class="form-group col-md-4">
<label>Training:</label>
<input type="text" class="form-control">
</div>
<div class="form-group col-md-4">
<label>Example:</label>
<input type="text" class="form-control">
</div>
</div>
</form>
</div>
When this is ran, there is no structure or alignment for the textboxes or the labels. How can I achieve this?
Here is a bootply
For each label and input you should make this structure:
<div class="form-group col-md-4">
<label class="col-lg-4 control-label">Location:</label>
<div class="col-lg-8">
<input type="text" class="form-control">
</div>
</div>
this will make it work with the grid system
See bootply
I have a Bootstrap inline-form that is 6 inputs then a button. It looks fine if it all fits on the screen, but as you make the screen smaller, the inputs fold underneath one at a time. I have tried wrapping each input in a col-md-2, but that makes the form look weird. I'm not sure if I'm doing something wrong.
Is there some way I can group the inputs together so that they collapse something like 6x1, 3x2, 2x3, 1x6?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form class="form-inline">
<div class="form-group">
<input name="input1" placeholder="input1" class="form-control" required>
</div>
<div class="form-group">
<input name="input2" type="number" placeholder="input2" class="form-control" step="any" required>
</div>
<div class="form-group">
<label for="input3">Input 3
<input name="input3" type="checkbox" id="input3">
</label>
</div>
<div class="form-group">
<input name="input4" type="number" placeholder="input4" class="form-control" step="any" required>
</div>
<div class="form-group" *ngIf="!property.input3">
<input name="input5" type="number" placeholder="input5" class="form-control" required>
</div>
<div class="form-group">
<input name="input6" type="number" placeholder="input6" class="form-control" step="any">
</div>
<button class="btn btn-default">Add</button>
</form>
</div>
If running the code, you will have to resize the window.
I have also set up a fiddle for the inline-form
Thanks
Bootstraps grid system is great but it isn't perfect for everything under the sun. If things aren't looking exactly the way you want them to you can always write overwriting css. That being said, using their grid system I was able to come up with an example that fulfills your request above. Let me know if this is more what you were thinking:
<div class="container">
<form class="form-inline">
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2">
<input name="input1" placeholder="input1" class="form-control" required>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2">
<input name="input2" type="number" placeholder="input2" class="form-control" step="any" required>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-1 input3">
<label for="input3">Input 3
</label>
<input name="input3" type="checkbox" id="input3">
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2">
<input name="input4" type="number" placeholder="input4" class="form-control" step="any" required>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2" *ngIf="!property.input3">
<input name="input5" type="number" placeholder="input5" class="form-control" required>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2">
<input name="input6" type="number" placeholder="input6" class="form-control" step="any">
</div>
<div class="col-xs-12 col-lg-1">
<button class="btn btn-default">Add</button>
</div>
</form>
</div>
And here is a codepen link to the code: http://codepen.io/egerrard/pen/KaNxvW
You can wrap those inputs with div and display:inline-block style to make them stay together.
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>