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.
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 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>
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!
I would like to design a two column horizontal form using Bootstrap V2.3.2. The following is the html:
<div id='content' class='row-fluid'>
<div class='span12 main'>
<h2>Product Data</h2>
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<label for="inputAppName" class="control-label col-xs-2">Application Name </label>
<div class="col-xs-10">
<input type="text" class="form-control" id="app_name" name="app_name" placeholder="Application Name">
</div>
</div>
<div style="height:10px;"></div>
<div class="form-group">
<label for="inputAppDesc" class="control-label col-xs-2">Description </label>
<div class="col-xs-10">
<textarea class="form-control" id="app_desc" name="app_desc" rows="4" placeholder="Application Description"></textarea>
</div>
</div>
</fieldset>
</form>
</div>
</div>
I find that the width of the input-text and textarea on the second column are smaller. I would like to extend them to take up the rest space. I tried to use the "input-block-level" class but the input-text and textarea will then not be on the same row as the label.
Can anyone help?
Thanks in advance!
The first thing to do is to don't use the Bootstrap 3 class...
Try Bootstrap 2 instead... Replace col-xx-[1-12] by span[1-12]
Your code with input in span11 :
http://www.bootply.com/119374
<div id="content" class="row-fluid">
<div class="span12 main">
<h2>Product Data</h2>
<form class="form-horizontal">
<fieldset>
<div class="form-group row-fluid">
<label for="inputAppName" class="control-label span2">Application Name </label>
<div class="span10">
<input type="text" class="form-control span11" id="app_name" name="app_name" placeholder="Application Name">
</div>
</div>
<div style="height:10px;">
</div>
<div class="form-group row-fluid">
<label for="inputAppDesc" class="control-label span2">Description </label>
<div class="span10">
<textarea class="form-control span11" id="app_desc" name="app_desc" rows="4" placeholder="Application Description"></textarea>
</div>
</div>
</fieldset>
</form>
</div>
</div>
try this
<form>
<div class="row">
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control">
</div>
</div>
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio">
</span>
<input type="text" class="form-control">
</div>
</div>
</div>
</form>