I have a form elements using the following markup.. And the current look of the form you can find in the following screenshot:
How can I set the "In" and"Lbs" right after their corresponding textbox?
<div class="form-group">
<label for="BI16" class="col-md-1 col-md-offset-1 control-label">Height:</label>
<div class="col-md-1">
<input type="text" id="BI16" name="medicareNumber" class="form-control" ng-model="hraFormData.HraValuesJson.BI16" />In
</div>
<label for="BI16" class="col-md-1 control-label">Weight:</label>
<div class="col-md-1">
<input type="text" id="BI16" name="medicareNumber" class="form-control" ng-model="hraFormData.HraValuesJson.BI16" />
</div>
<label for="BI16" class="col-md-1 control-label">BMI:</label>
<div class="col-md-2">
<input type="text" id="BI16" name="medicareNumber" class="form-control" ng-model="hraFormData.HraValuesJson.BI16" />Lbs
</div>
<label for="BI16" class="col-md-1 control-label">Waist:</label>
<div class="col-md-2">
<input type="text" id="BI16" name="medicareNumber" class="form-control" ng-model="hraFormData.HraValuesJson.BI16" />
</div>
</div>
You can use Bootstrap's input groups to attach the units to the inputs:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<label for="BI16" class="col-md-1 col-md-offset-1 control-label">Height:</label>
<div class="col-md-1">
<div class="input-group">
<input type="text" id="BI16" name="medicareNumber" class="form-control" ng-model="hraFormData.HraValuesJson.BI16" />
<span class="input-group-addon">In</span>
</div>
</div>
<label for="BI16" class="col-md-1 control-label">Weight:</label>
<div class="col-md-1">
<div class="input-group">
<input type="text" id="BI16" name="medicareNumber" class="form-control" ng-model="hraFormData.HraValuesJson.BI16" />
<span class="input-group-addon">Lbs</span>
</div>
</div>
<label for="BI16" class="col-md-1 control-label">BMI:</label>
<div class="col-md-2">
<input type="text" id="BI16" name="medicareNumber" class="form-control" ng-model="hraFormData.HraValuesJson.BI16" />
</div>
<label for="BI16" class="col-md-1 control-label">Waist:</label>
<div class="col-md-2">
<input type="text" id="BI16" name="medicareNumber" class="form-control" ng-model="hraFormData.HraValuesJson.BI16" />
</div>
</div>
Related
I am trying to put on same line firstname,lastname inputs and button.
The total width of the above 3, should be equal to the 'xxxxxxx' input.
you can find the code here
http://jsfiddle.net/zxb53wjq/1/
<div class="container">
<form role="form" action="" method="post">
<div class="row setup-content" id="step-2">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<div class="form-group">
<input maxlength="200" type="text" class="form-control" placeholder="xxxxxxxx"/>
</div>
<div class="form-group">
<label class="control-label">Application:</label>
<div class="input-group">
<input style="width:50% " class="form-control " placeholder="first name" name="firstname" type="text" />
<input style="width:50% " class="form-control " placeholder="last name" name="lastname" type="text" />
</div>
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="addApplicationBtn" name="addApplicationBtn">Add</button>
</span>
</div>
</div>
</div>
</div>
</form>
</div>
using bootstrap css
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
Bootstrap 4 is not the same as bootstrap 3. Most of the classes have been renamed and unlike bootstrap 3, bootstrap 4 uses flex box.
Bootstrap 4
Remove the two inputs' inline styles
Use input-group-append instead of input-group-btn.
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<input class="form-control " placeholder="last name" name="lastname" type="text" />
<div class="input-group-append">
<button class="btn btn-default" type="button" id="addApplicationBtn" name="addApplicationBtn">Add</button>
</div>
</div>
http://jsfiddle.net/fhg3qx96/
Bootstrap 3
Use input-group-btn inside input-group
<div class="input-group mb-3">
<input class="form-control" style="width:50%" placeholder="first name" name="firstname" type="text" />
<input class="form-control" style="width:50%" placeholder="last name" name="lastname" type="text" />
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="addApplicationBtn" name="addApplicationBtn">Add</button>
</span>
</div>
https://codepen.io/anon/pen/dQrJeW
I have inline form, in which for each line I want to have label on the left side, and input on the right side. I have tried pull-right, align-right, text-right, but none of them works.
Fiddle is here !
Here is what I do:
<style>
.form-group label{
text-align: left!important;
}
</style>
<form action="" class="form-horizontal" method="post" role="form">
<div class="form-group">
<label class="col-md-2 control-label" for="FirstName">First name</label>
<div class="col-md-4">
<input class="form-control" id="FirstName" name="FirstName" type="text" value="" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label pull-left" for="LastName">Last name</label>
<div class="col-md-3">
<input class="form-control" id="LastName" name="LastName" type="text" value="" />
</div>
</div>
</form>
I have a multi-step reg form with each step in a fieldset,i am using bootstrap validator for validation.I made the 'next' button in first step to toggle validation.And it works well...
The problem i have is,i have to prevent going to next step on an error.
Now, validation works on clicking 'next'in first step but immediately passes to next step.
I want to stay there until validation is success...
How to do this?
i m giving my chunk of code...i have all libraries included...
...
<fieldset id="first_step">
<h2 class="fs-title">Create your account</h2>
<div class="form-group">
<label class="col-md-3 control-label">Username</label>
<div class="col-md-9">
<input type="text" class="form-control" name="uname" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Password</label>
<div class="col-md-9">
<input type="password" class="form-control" name="pwd" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Confirm Password</label>
<div class="col-md-9">
<input type="password" class="form-control" id="cpwd" />
</div>
</div>
<input type="button" name="next" id="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Personal Details</h2>
<h3 class="fs-subtitle"></h3>
<div class="form-group">
<label class="col-md-3 control-label">*Register Number</label>
<div class="col-md-9">
<input type="text" class="form-control" id="Text1" name="reg" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">*Name</label>
<div class="col-md-9">
<input type="text" class="form-control" id="Text2" name="stname" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-offset-3 col-md-12">
</div>
</div>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" id="sub_but" name="submit" class="submit action-button" value="Submit" />
</fieldset>
<script type="text/javascript">
$(".next").click(function() {
$('#msform').data('bootstrapValidator').validate();
//prevent here????
//Script to slide first fielset
}
$(".previous").click(function() {
//Script to slide back to first fieldset
}
</script>
in bootstrap 3 i want an input in one row by grouping the input i done it but the space is not occurring can any one help http://jsfiddle.net/qkPEm/1/
<div class="row">
<div class="col-lg-3">
<div class="input-group">
<input id="dd" class="location" name="city" type="text" placeholder="Source" size="90" />
</div>
</div>
<div class="col-lg-3">
<div class="input-group">
<input id="geocomplete" class="location" name="city" type="text" placeholder="Destination" size="90" />
</div>
</div>
<div class="col-lg-2">
<div class="input-group">
<input class="input-append form-date" readonly="true" type="text" id="dpd1" placeholder="From" value="" name="arrival" data-date-format="dd/mm/yyyy">
</div>
</div>
<div class="col-lg-2">
<div class="input-group">
<input class="input-append form-date" readonly="true" type="text" id="dpd2" placeholder="To" value="" name="departure" data-date-format="dd/mm/yyyy">
</div>
</div>
<div class="col-lg-2">
<div class="input-group">
<input class="guests" class="date" readonly="true" type="text" id="tags2" placeholder="Ttl.Expenses" value="" name="guests" />
</div>
</div>
</div>
Input size causing the issues.
Here's my method on solving the white space.
http://www.bootply.com/PRnJqqD8S3
Your input size is way over the col-lg-2's width, that's why you got the extra spacing.
I have bootstrap form where I need to fix two element alignment. Screenshot show the current look of the form http://s27.postimg.org/j8h3d0203/screen2.png by using the following markup
<fieldset class="col-md-8">
<div class="form-group">
<label for="BI16" class="col-md-4 control-label">Visual Acuity L:20/:</label>
<div class="col-md-2">
<input type="text" id="BI16" name="medicareNumber" class="form-control" />
</div>
<label for="BI16" class="col-md-2 control-label">R: 20/</label>
<div class="col-md-2">
<input type="text" id="BI16" name="medicareNumber" class="form-control"/>
</div>
</div>
<div class="form-group">
<div>
<yesno-button button1="yes" button2="no" id="B19" value1="BV8" value2="BV9"></yesno-button>
<label for="B19" class="radio-inline control-label">
Creative Lens Used?
</label>
</div>
</div>
<div class="form-group">
<div>
<yesno-button button1="yes" button2="no" id="B20" value1="BV6" value2="BV7"></yesno-button>
<label for="B20" class="radio-inline control-label">
Will the patient consent to an End of Life Planning discussion?
</label>
</div>
</div>
<div class="form-group">
<div>
<label for="B12" class="col-md-2 control-label">Comments:</label>
<div class="col-md-10">
<input type="text" id="B12" class="form-control" />
</div>
</div>
</div>
</fieldset>
Which form do you want to align? You can use
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>