I am trying to design a form but it is not being well formed. I need to make it responsive. But checkbox is not aligned well in horizontal.
<form class="ng-pristine ng-scope ng-pending">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon input_force"><i class="ti-pin"></i></span>
<input type="text" id="mapInput" class="form-control input_force_text_edit ng-pristine ng-untouched ng-isolate-scope ng-pending ng-empty" value="" g-places-autocomplete="" placeholder="Please enter drop off address WITHOUT Apt/Suite number" ng-model="order.drop_off_address"
name="drop_off_address" autocomplete="off" validator="required" aria-invalid="false"><span></span>
<input type="text" id="drop_off_address_line_2" class="form-control ng-pristine ng-untouched ng-valid ng-empty" placeholder="Apartment/Suite etc." ng-model="order.drop_off_address_line_2" name="drop_off_address_line_2" autocomplete="off" aria-invalid="false">
</div>
</div>
<div class="row">
<div class="form-group" style="display: block; width: 100%;">
<div class="col-sm-8">
<div class="input-group" style="width: 100%;">
<span class="input-group-addon"><i class="ti-mobile"></i></span>
<input type="text" id="message_for_driver" class="form-control " placeholder="Message For Driver" ng-model="order.message_for_driver" name="message_for_driver" autocomplete="off" aria-invalid="false" style=" width: 100%;">
</div>
</div>
<div class="col-md-3">
<div class="checkbox">
<label >
<input type="checkbox" style="" id="is_ok_to_leave_at_the_door" class="form-control ng-pristine ng-untouched ng-valid ng-empty" checked="checked" ng-model="order.is_ok_to_leave_at_the_door"> Ok to leave at the door
</label>
</div>
</div>
</div>
</div>
</form>
you can checkout my code over this URL.
https://jsfiddle.net/ahmeric/Lrgdk6uh/
here is the solution. You can see the related part in this URL.
https://jsfiddle.net/ahmeric/Lrgdk6uh/5/
<form class="ng-pristine ng-scope ng-pending">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon input_force"><i class="ti-pin"></i></span>
<input type="text" id="mapInput" class="form-control input_force_text_edit ng-pristine ng-untouched ng-isolate-scope ng-pending ng-empty" value="" g-places-autocomplete="" placeholder="Please enter drop off address WITHOUT Apt/Suite number" ng-model="order.drop_off_address"
name="drop_off_address" autocomplete="off" validator="required" aria-invalid="false"><span></span>
<input type="text" id="drop_off_address_line_2" class="form-control ng-pristine ng-untouched ng-valid ng-empty" placeholder="Apartment/Suite etc." ng-model="order.drop_off_address_line_2" name="drop_off_address_line_2" autocomplete="off" aria-invalid="false">
</div>
</div>
<div class="row mb-5">
<div class="form-group">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="input-group">
<span class="input-group-addon"><i class="ti-mobile"></i></span>
<input type="text" id="message_for_driver" class="form-control " placeholder="Message For Driver" ng-model="order.message_for_driver" name="message_for_driver" autocomplete="off" aria-invalid="false" >
</div>
</div>
</div>
<div class="form-group ml-20">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 pull-right pt-5">
<div>
<label class="checkbox-inline">
<input type="checkbox" style="" id="is_ok_leave_at_the_door" checked="checked" ng-model="order.is_ok_leave_at_the_door"> Ok to leave at the door
</label>
</div>
</div>
</div>
</div>
</form>
Related
I'm setting up a contact form and I want this form to be centered on my page. But I don't want the full width (col-md-12) of the page. I only want the width of a col-md-6 at the center of the page. Problem is that because I select col-md-6, the form display on the left hand side of the page. How can I center it?
HTML:
<div class="container">
<div class="row">
<div class="col-md">
<form action="contact" method="post"> {{--action = where the data must go--}}
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Your Name">
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" placeholder="name#example.com">
</div>
<div class="form-group">
<label for="mobile">Mobile Nr:</label>
<input type="email" class="form-control" id="mobile" placeholder="Mobile Nr should start with 08, 07 or 06">
</div>
<div class="form-group">
<label for="message">Your message...</label>
<textarea class="form-control" id="message" rows="3"></textarea>
</div>
</form>
</div>
</div>
</div>
The easiest way I see is adding two more divisions with col-md-3 on either side of your form div like this:
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<form action="contact" method="post"> {{--action = where the data must go--}}
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Your Name">
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" placeholder="name#example.com">
</div>
<div class="form-group">
<label for="mobile">Mobile Nr:</label>
<input type="email" class="form-control" id="mobile" placeholder="Mobile Nr should start with 08, 07 or 06">
</div>
<div class="form-group">
<label for="message">Your message...</label>
<textarea class="form-control" id="message" rows="3"></textarea>
</div>
</form>
</div>
<div class="cold-md-3">
</div>
</div>
Try adding "m-auto" class in your col-md-6 div. Like this:
<div class="container">
<div class="row">
<div class="col-md-6 m-auto">
<form action="contact" method="post"> {{--action = where the data must go--}}
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Your Name">
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input t`enter code here`ype="email" class="form-control" id="email" placeholder="name#example.com">
</div>
<div class="form-group">
<label for="mobile">Mobile Nr:</label>
<input type="email" class="form-control" id="mobile" placeholder="Mobile Nr should start with 08, 07 or 06">
</div>
<div class="form-group">
<label for="message">Your message...</label>
<textarea class="form-control" id="message" rows="3"></textarea>
</div>
</form>
</div>
</div>
I am using Bootstrap 3, what I want cover whole form on full page like attached image, in the image I am using kendo UI popup window. pop up window width is 1000px
Here is my HTML code,
<section class="container-fluid padding-rl">
<div class="row">
<div class="col-sm-3">
<div class="profile-box">
<img class="profile-picture" src="" alt="" />
</div>
</div>
<div class="col-sm-8">
<div class="row">
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-1">First Name:</label>
<div class="col-sm-3">
<input type="text" class="form-control" data-bind="value: selectedRecord.FirstName" />
</div>
<label class="control-label col-sm-1 col-sm-offset-1">Last Name:</label>
<div class="col-sm-3">
<input type="text" class="form-control" data-bind="value: selectedRecord.LastName" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1">Email:</label>
<div class="col-sm-3" style="">
<input type="text" class="form-control" data-bind="value: selectedRecord.Email" />
</div>
<label class="control-label col-sm-1 col-sm-offset-1 ">Mobile:</label>
<div class="col-sm-3" style="">
<input type="text" class="form-control" data-bind="value: selectedRecord.Mobile" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1">Phone:</label>
<div class="col-sm-3" style="">
<input type="text" class="form-control" data-bind="value: selectedRecord.OfficePhone" />
</div>
<label class="control-label col-sm-1 col-sm-offset-1 ">Account:</label>
<div class="col-sm-3" style="">
<input type="text" id="txtContactAccount" class="form-control" data-bind="value: selectedRecord.ContactAccount" />
</div>
</div>
</div>
</div>
</div>
</div>
Attached image
Thank you in advance
Unfortunately I don't see your code in your question. From the sample picture I'm guessing what you are looking to do is create a modal?
Take a look at bootstrap's documentation here:
Bootstrap JavaScript
Scroll down a bit to the part about modals, they have nice samples there too.
I have grouped 3 inputs in one line (bootply)
<div class="container">
<div class="row">
<div class="form-group has-warning">
<label for="inputName" class="col-lg-2 col-sm-3 control-label">name</label>
<div class="col-md-2 col-sm-2">
<input type="text" class="form-control" placeholder="name" name="order">
</div>
<label for="inputWarning1" class="col-lg-1 col-sm-3 control-label">quantity</label>
<div class="col-md-2 col-sm-2">
<input type="number" class="form-control " placeholder="quantity" name="quantity" id="inputWarning1">
</div>
<label for="inputName" class="col-lg-1 col-sm-3 control-label">####</label>
<div class="col-md-2 col-sm-2">
<input type="number" class="form-control" placeholder="AA" name="packetNumber">
</div>
</div>
</div>
</div>
and I want only the input with quantity has the color of the class has-warning. Is there a way to do that by keeping 3 inputs in one line?
Just remove has-warning class from the div which has class form-group and put a separate div above the quantity lable like below:
<div class="container">
<div class="row">
<div class="form-group">
<label for="inputName" class="col-lg-2 col-sm-3 control-label">name</label>
<div class="col-md-2 col-sm-2">
<input type="text" class="form-control" placeholder="name" name="order">
</div>
<div class="has-warning">
<label for="inputWarning1" class="col-lg-1 col-sm-3 control-label">quantity</label>
<div class="col-md-2 col-sm-2">
<input type="number" class="form-control " placeholder="quantity" name="quantity" id="inputWarning1">
</div>
</div>
<label for="inputName" class="col-lg-1 col-sm-3 control-label">####</label>
<div class="col-md-2 col-sm-2">
<input type="number" class="form-control" placeholder="AA" name="packetNumber">
</div>
</div>
</div>
</div>
Edited Code In Bootply
Check It.
Today I copied literally a test piece of code from the twitter-bootstrap site into my code. I tried to get a horizontal form like in the example. but for some reason, I don't get a horzontal layout. My site http://073design.nl/kasopmaak/?
Code i used for horizontal form:
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
Your code works fine only when link with bootstrap version 2.3 DEMO1
Check this works in bootstrap 3
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail" class="control-label col-xs-2">Email</label>
<div class="col-xs-10">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="control-label col-xs-2">Password</label>
<div class="col-xs-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<button type="submit" class="btn btn-primary">Login</button>
</div>
</div>
</form>
I'd like to create a long form that is just all one form instead of a bunch of separate forms. Is this doable? I've reviewed all the Bootstrap Documentation and this seems to be the only way to do it. Does anyone know a way around this? Below is what I have, every field is a separate form, and I need it to be one.
<div class="row-container">
<div class="row">
<div class="field-wrapper">
<form class="form-inline">
<div class="form-group">
<label for="claimnumber">Claim Number</label>
<input type="text" class="form-control" id="claimnumber" placeholder="">
</div>
</form>
</div>
<div class="field-wrapper">
<form class="form-inline">
<div class="form-group">
<label for="insuredid">Insured ID</label>
<input type="text" class="form-control" id="insuredid" placeholder="">
</div>
</form>
</div>
<div class="field-wrapper">
<form class="form-inline">
<div class="form-group">
<label for="claimnumber">Patient ID</label>
<input type="text" class="form-control" id="patientid" placeholder="">
</div>
</form>
</div>
<div class="field-wrapper">
<form class="form-inline">
<div class="form-group">
<label for="lastname">Patient Last Name</label>
<input type="text" class="form-control" id="lastname" placeholder="">
</div>
</form>
</div>
<div class="field-wrapper">
<form class="form-inline">
<div class="form-group">
<label for="lastname">Patient Last Name</label>
<input type="text" class="form-control" id="Text1" placeholder="">
</div>
</form>
</div>
</div>
</div>
<div class="datecontainer">
<div class="date1container">
<div class="dateheading">Service Date</div>
<div class="datebody">
<div class="field-wrapper">
<form class="form-inline">
<div class="form-group">
<label for="lastname">Start</label>
<input type="text" class="form-control calendar" id="date" placeholder="00/00/0000">
</div>
</form>
</div>
<div class="field-wrapper">
<form class="form-inline">
<div class="form-group">
<label for="lastname">End</label>
<input type="text" class="form-control calendar2" id="date2" placeholder="00/00/0000">
</div>
</form>
</div>
</div>
</div>
<div class="date2container">
<div class="dateheading">Import Date</div>
<div class="datebody">
<div class="field-wrapper">
<form class="form-inline">
<div class="form-group">
<label for="lastname">Start</label>
<input type="text" class="form-control calendar3" id="date3" placeholder="00/00/0000">
</div>
</form>
</div>
It works with just one form... check this
http://jsfiddle.net/7LChZ/1/show/
<div class="container">
<form class="form-inline">
<div class="row-container">
<div class="row">
<div class="field-wrapper">
<div class="form-group">
<label for="claimnumber">Claim Number</label>
<input type="text" class="form-control" id="claimnumber" placeholder="" />
</div>
</div>
<div class="field-wrapper">
<div class="form-group">
<label for="insuredid">Insured ID</label>
<input type="text" class="form-control" id="insuredid" placeholder="" />
</div>
</div>
<div class="field-wrapper">
<div class="form-group">
<label for="claimnumber">Patient ID</label>
<input type="text" class="form-control" id="patientid" placeholder="" />
</div>
</div>
<div class="field-wrapper">
<div class="form-group">
<label for="lastname">Patient Last Name</label>
<input type="text" class="form-control" id="lastname" placeholder="" />
</div>
</div>
<div class="field-wrapper">
<div class="form-group">
<label for="lastname">Patient Last Name</label>
<input type="text" class="form-control" id="Text1" placeholder="" />
</div>
</div>
</div>
</div>
<div class="datecontainer">
<div class="date1container">
<div class="dateheading">Service Date</div>
<div class="datebody">
<div class="field-wrapper">
<div class="form-group">
<label for="lastname">Start</label>
<input type="text" class="form-control calendar" id="date" placeholder="00/00/0000" />
</div>
</div>
<div class="field-wrapper">
<div class="form-group">
<label for="lastname">End</label>
<input type="text" class="form-control calendar2" id="date2" placeholder="00/00/0000" />
</div>
</div>
</div>
</div>
<div class="date2container">
<div class="dateheading">Import Date</div>
<div class="datebody">
<div class="field-wrapper">
<div class="form-group">
<label for="lastname">Start</label>
<input type="text" class="form-control calendar3" id="date3" placeholder="00/00/0000" />
</div>
</div>
</div>
</div>
</div>
</form>
</div>
What I change is, I remove all form tags and wrap them all with just one.
You should only use one <form> -tag and not multiple ones if you only need one form. You should place it after <div class="row">. And don't forget to close it correctly!