How to align label on same line as form? - forms

I have the following code for login screen using bootstrap. Please help in aligning the label in the same line as the form input field.
<div class="container">
<div class="row">
<div class="col-md-6">
<div>
<form class="form-horizontal">
<fieldset>
<legend>Existing Customer</legend>
<div class="control-group">
<label class="control-label" for="user">User Name:</label>
<div class="control-group">
<input type="text" class="textbox" id="user">
</div>
<label class="control-label" for="pwd">Password:</label>
<div class="controls">
<input type="text" class="textbox" id="pwd">
</div>
<div class="controls">
<input class="btn btn-primary" name="commit" type="submit" value="Log In" />
</div>
</div>
</fieldset>
</form>
</div>
</div>
<div class="col-md-6">
<legend>New Customer</legend>
</div>


Hi use table which solves your alignment issues.
-------------------------------------------------------------
<html>
<head>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div>
<form class="form-horizontal">
<fieldset>
<legend>Existing Customer</legend>
<table>
<tr>
<td>
<div class="control-group">
<label class="control-label" for="user">User Name:</label>
</td>
<td>
<div class="control-group">
<input type="text" class="textbox" id="user">
</div>
</td>
</tr>
<tr>
<td>
<label class="control-label" for="pwd">Password:</label>
</td>
<td>
<div class="controls">
<input type="text" class="textbox" id="pwd">
</div>
</td>
</tr>
<div class="controls">
<input class="btn btn-primary" name="commit" type="submit" value="Log In" />
</div>
</div>
</table>
</fieldset>
</form>
</div>
</div>
<div class="col-md-6">
<legend>New Customer</legend>
</div>
</body>
i think you should take css from ui expert and move forward in your project. the page
lay out should be designed as the developer only should be able to use(apply) the css in
the UI layer


Here is the code using Bootstrap 3:
<div class="container">
<div class="row">
<div class="col-md-6">
<form class="form-horizontal" role="form">
<fieldset>
<legend>Existing Customer</legend>
<div class="form-group">
<label class="col-sm-2 control-label" for="user">User Name:</label>
<div class="col-sm-4">
<input type="text" class="textbox form-control" id="user">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="pwd">Password:</label>
<div class="col-sm-4">
<input type="text" class="textbox form-control" id="pwd">
</div>
</div>
<div class="form-group">
<input class="btn btn-primary" name="commit" type="submit" value="Log In" />
</div>
</fieldset>
</form>
</div>
<div class="col-md-6">
<legend>New Customer</legend>
</div>
</div>
and the respective fiddle: http://jsfiddle.net/G2cgf/


Submit a margin-left to the button, like this:
<input class="btn btn-primary" name="commit" type="submit" value="Log In" style="margin-left: 15px;"/>

Related

what is the use of form-group in bootstrap 4?

I am currently working on creating a form and I don't Understand what is the use of form-group?
Below example contains form-group inside div
<div class="row">
<div class="form-group col-md-6">
<input type="text" placeholder=" Company Name *">
</div>
<div class="form-group col-md-6">
<input type="text" placeholder=" Contact Number *">
</div>
</div>
Below example doesn't contain form-group but still displays the same result then what is the purpose of form-group:
<div class="row">
<div class="col-md-6">
<input type="text" placeholder=" Company Name *">
</div>
<div class="col-md-6">
<input type="text" placeholder=" Contact Number *">
</div>
</div>

<div class="row">
<div class="col-md-6">
<div class="form-group ">
<input type="text" placeholder=" Company Name *">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" placeholder=" Contact Number *">
</div>
</div>
</div>

Horizontal form - Twitter Bootstrap

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>

Bootstrap 3 contact modal is not showing up

I have a small contact modal on my website that does not appear. It was working before, but I must have changed something and now it won't work.
I've looked over it multiple times and I can't figure out why it's not working.
HTML:
<span data-toggle="modal">Contact</span>
<div class="modal fade" id="contact" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<h4>Contact the Developers</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="contact-name" class="col-lg-2 control-label">Name:</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="contact-name" placeholder="Full Name">
</div>
</div>
<div class="form-group">
<label for="contact-email" class="col-lg-2 control-label">Email:</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="contact-email" placeholder="you#example.com">
</div>
</div>
<div class="form-group">
<label for="contact-msg" class="col-lg-2 control-label">Message:</label>
<div class="col-lg-10">
<textarea class="form-control" rows="8"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
<button class="btn btn-primary" type="submit">Send</button>
</div>
</form>
</div>
</div>
</div>

You are missing the data-target attribute. Plus, you shouldn't be linking to a page when you want to open a modal ;)
<span data-toggle="modal" data-target="#contact">Contact</span>
Should fix this. See http://www.bootply.com/UED0aevXsG

Creating long forms in Bootstrap to be all one form, instead of multiple forms

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!

how to design a two column form using bootstrap 2.3.2 where the 2nd column takes up the rest space

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>