I want a row with 4 inputs, with 2 groups of 2 inputs and each group has one label.
My current code:
<form>
<div class="row">
<div class="col-md-3 form-group">
<label class="font-weight-bold" for="mondaystart">Monday [Time 1]: <span style="color: red;">*</span></label>
<input type="time" class="form-control" id="mondaystart" name="mondaystart" required>
</div>
<div class="col-md-3 form-group">
<label class="font-weight-bold" for="mondayend"> </label>
<input type="time" class="form-control" id="mondayend" name="mondayend" required>
</div>
<div class="col-md-3 form-group">
<label class="font-weight-bold" for="monday2start">Monday [Time 2]: <span style="color: red;">*</span></label>
<input type="time" class="form-control" id="monday2start" name="monday2start">
</div>
<div class="col-md-3 form-group">
<label class="font-weight-bold" for="monday2end"> </label>
<input type="time" class="form-control" id="monday2end" name="maandagtijd2eind">
</div>
</div>
How do I get a form row like that? It kind of works, but the inputs with an empty label are higher than the inputs with label.
Try enclosing the "form-group" in a separate div:
<form>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label class="font-weight-bold" for="mondaystart">Monday [Time 1]: <span style="color: red;">*</span></label>
<input type="time" class="form-control" id="mondaystart" name="mondaystart" required>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="font-weight-bold" for="mondayend"> </label>
<input type="time" class="form-control" id="mondayend" name="mondayend" required>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="font-weight-bold" for="monday2start">Monday [Time 2]: <span style="color: red;">*</span></label>
<input type="time" class="form-control" id="monday2start" name="monday2start">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="font-weight-bold" for="monday2end"> </label>
<input type="time" class="form-control" id="monday2end" name="maandagtijd2eind">
</div>
</div>
</div>
</form>
Related
Although button type is submit, name attributes are same for radio buttons, there is action and method attributes for form, and all other requirements are done, input required attribute is still not working.
there is no novalidate attribute in the form as well.
<form action="" method="">
<div class="form-group">
<div class="form-checkbox">
<label for="resheadpay1">
<input id="resheadpay1" type="radio" id="payinthecar" name="flight-type" required/>
<span></span>Pay in the Car
</label>
<label for="resheadpay2">
<input id="resheadpay2" type="radio" id="paybycreditcard" name="flight-type" />
<span></span>Pay by Credit Card
</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input id="txtSource" class="form-control" name="pickLocation" type="text" placeholder="Pickup Location" required/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input id="txtDestination" class="form-control" type="text" name="dropLocation" placeholder="Dropoff Location" required/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<input id="txtdate" class="form-control" placeholder="Date" type="date" name="datepick" required/>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<input id="txttime" class="form-control" type="text" id="datetimepicker" name="timepick" placeholder="hh:mm" required/>
</div>
</div>
<div class="col-md-3">
<div class="form-btn">
<button class="submit-btn" onclick="GetRoute(); showres(); hidebooking(); changeText();" type="submit">Book Now </button>
</div>
</div>
</div>
</form>
i have this two inputs:
<div class="form-group">
<label for="exampleInputEmail1">Original Amount</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Original Amount</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
</div>
Its look like this:
How i inline them? (with the label on top of each)
You can use the Bootstrap grid like this..
<div class="row">
<div class="col-sm-4">
<label for="exampleInputEmail1">Original Amount</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
</div>
<div class="col-sm-4">
<label for="exampleInputEmail1">Original Amount</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
</div>
</div>
Demo
Just put all your example code inside this div element:
<div class="form-inline">
...
</div>
See http://getbootstrap.com/css/#forms-inline for more info.
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>
I am trying to decrease middle name input field but i can't get it work. It only works at xs screen (picture below).
<div class="row">
<form class="form-inline" role="form" name="userForm" novalidate>
<div class="form-group required">
<label for="first" class="control-label">Child's Name</label>
<div class="input-group">
<span class="col-xs-9 col-sm-5">
<input type="text" class="form-control" id='first' name="first" >
<label for ="first">First </label>
</span>
</div>
<div class="input-group">
<span class="col-xs-3 col-sm-2">
<input type="text" class="form-control col-xs-3 col-sm-2" id='mi' name="mi" >
<label for ="mi">MI</label>
</span>
</div>
<div class="input-group">
<span class="col-xs-9 col-sm-5">
<input type="text" class="form-control" id = "last" name="last" >
<label for="last"> Last </label>
</span>
</div>
</div>
</form>
</div>
You're code is wrong please check again.you end the </form> before end other tag. and again read how to use bootstrap form. help this link.
remove span and add col-sm-4 to div
`
<div class="form-group required">
<label for="first" class="control-label">Child's Name</label>
<div class="input-group col-sm-4">
<input type="text" class="form-control" id='first' name="first">
<label for="first">First </label>
</div>
<div class="input-group col-sm-1">
<input type="text" class="form-control " id='mi' name="mi">
<label for="mi">MI</label>
</div>
<div class="input-group col-sm-4">
<input type="text" class="form-control " id="last" name="last">
<label for="last"> Last </label>
</div>
<div class="help-block" ng-messages="userForm.first.$error" style="color:maroon" role="alert">
<p ng-message="required">Child's First Name is required.</p>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-danger">Submit</button>
</div>
</form>`
I am having a hard time figuring out how to figure out how to make my contact form-control match the edge of my Work form-control. I'm still new with Bootstrap and not sure what I am doing wrong or how to fix the issue. I need my Contact and Email form-control to go all the way to the edge of my Work form-control.
Here is a screen to better explain. As you can see my layout is off in the Contact fieldset
Here is my markup
<div class="col-md-12">
<div class="col-lg-6">
<form>
<fieldset>
<legend>Add Customer</legend>
<div class="form-horizontal">
<div class="container col-md-12">
<div class="form-group">
<label for="txtCustomer" class="control-label col-md-2">Customer</label>
<div class="col-md-10">
<input id="txtCustomer" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="txtAddress1" class="control-label col-md-2">Address</label>
<div class="col-md-10">
<input id="txtAddress1" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="txtAddress2" class="control-label col-md-2">Address2</label>
<div class="col-md-10">
<input id="txtAddress2" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="txtCity" class="control-label col-md-2">City</label>
<div class="col-md-10">
<input id="txtCity" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="txtState" class="control-label col-md-2">State</label>
<div class="col-md-2">
<input id="txtState" type="text" class="form-control" />
</div>
<label for="txtZip" class="control-label col-md-2">Zip/Postal</label>
<div class="col-md-3">
<input id="txtZip" type="text" class="form-control" />
</div>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div class="col-lg-6">
<div class="form-horizontal">
<div class="container col-md-12">
<form>
<fieldset>
<legend>Contact</legend>
<div class="form-group">
<label for="txtContactName" class="control-label col-md-2">Contact</label>
<div class="col-md-10 RemovingPadding">
<input id="txtContactName" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="txtEmail" class="control-label col-md-2">Email</label>
<div class="col-md-10">
<input id="txtEmail" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="txtPhone" class="control-label col-md-2">Phone</label>
<div class="col-md-4">
<input id="txtPhone" type="text" class="form-control" />
</div>
<label for="txtWork" class="control-label col-md-2">Work</label>
<div class="col-md-4">
<input id="txtWork" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="txtMobile" class="control-label col-md-2">Mobile</label>
<div class="col-md-4">
<input id="txtMobile" type="text" class="form-control" />
</div>
<label for="txtFax" class="control-label col-md-2">Fax</label>
<div class="col-md-4">
<input id="txtFax" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="txtOther" class="control-label col-md-2">Other</label>
<div class="col-md-4">
<input id="txtOther" type="text" class="form-control" />
</div>
<label for="txtOther2" class="control-label col-md-2">Other 2</label>
<div class="col-md-4">
<input id="txtOther2" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="txtOther3" class="control-label col-md-2">Other 3</label>
<div class="col-md-4">
<input id="txtOther3" type="text" class="form-control" />
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>