html - template - validacion con bootstrap 4

Bootstrap de Twitter: crea un formulario con 2 columnas

Question

¿Es posible crear un formulario de dos columnas con twitter bootstrap? Aquí tienen algunos buenos ejemplos: http://twitter.github.com/bootstrap/base-css.html Desafortunadamente, todos ellos están usando una columna.

Answer 1

Ejemplo de dos columnas con Bootstrap3

 <div class="row">
<label>Date</label>
<div class="row">
<div class="col-xs-7" style=" padding: 0px 2px 2px 1px;">
<input type="date" class="form-control col-xs-12">
</div>
<div class="col-xs-5" style="padding: 0px 1px 2px 1px;">
<input type="time" class="form-control col-xs-12">
</div>
</div>
</div>

Answer 2

Envuelva la etiqueta del formulario alrededor de sus divisiones del tramo. Esto está funcionando para mí, pero es posible que necesites modificar un poco las cosas:

<div class="row">
<form class="form-horizontal">
<div class="span6">
<fieldset>
<legend>Legend text</legend>
<div class="control-group">
<label class="control-label" for="input01">Text input</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">Supporting help text</p>
</div>
</div>
</fieldset>
</div>
<div class="span6">
<fieldset>
<legend>Legend text</legend>
<div class="control-group">
<label class="control-label" for="input01">Text input</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">Supporting help text</p>
</div>
</div>
</fieldset>
</div>
</form>
</div>

Answer 3

Usé esto y funciona bastante bien. Es sensible al bootstrap

 <div class="row-fluid">
<div class="span12">
<form action="" class="form-horizontal" name="user_account_add" id="user_account_add" method="post">
<div class="span12">
<div class="well clearfix">
<fieldset>
<div class="span5">
<legend>Business Info</legend>
<input type="hidden" name="action" value="save" />
<div class="control-group">
<label class="control-label">Business Name: </label>
<div class="controls">
<input type="text" class="input-xlarge" name="business_name" id="business_name">
</div>
</div>
<legend>Owner Info</legend>
<div class="control-group">
<label class="control-label">Firstname: </label>
<div class="controls">
<input type="text" class="input-xlarge" name="fname" id="owners_name">
</div>
</div>
<div class="control-group">
<label class="control-label">Lastname: </label>
<div class="controls">
<input type="text" class="input-xlarge" name="Lname" id="owners_name">
</div>
</div>
</div>
<div class="span7">
<legend>Business Operation Location</legend>
<div class="control-group">
<label class="control-label">Street Address</label>
<div class="controls">
<input type="text" class="input-xlarge" name="address" id="address" >
</div>
</div>
<div class="control-group">
<label class="control-label">City</label>
<div class="controls">
<input type="text" class="span3" name="city" id="city">
</div>
</div>
<div class="control-group">
<label class="control-label">State</label>
<div class="controls">
<input type="text" class="span3" name="state" id="state">
</div>
</div>
<div class="control-group">
<label class="control-label">Zip</label>
<div class="controls">
<input type="text" class="span3" name="zip" id="zip">
</div>
</div>
</div>
</fieldset>
<button class="btn btn-primary">Submit</button>
<button class="btn">Clear</button>
</div>
</div>
</form>
</div>
</div>

Answer 4

Yo uso el siguiente

 <form class="no-margin" >
<fieldset>
<div class="form-group no-margin">
<div class="row-fluid">
<div class="form-group col-sm-6 no-margin"> Input 1 <div>
<div class="form-group col-sm-6 no-margin"> Input 2 <div>
</div>
</div>
<fieldset>
</form>

Answer 5

2 columnas en Bootstrap 3:

http://jsfiddle.net/52VtD/10419/

<div class="container">
<div class="row">
<form action="#">
<div class="col-xs-6">
<div class="form-group">
<label for="firstname">Firstname</label>
<input type="text" class="form-control" id="firstname" placeholder="Firstname">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="[email protected]">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="lastname">Last Name</label>
<input type="text" class="form-control" id="lastname" placeholder="Last Name">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
</div>
</form>
</div>
</div>

Answer 6

<div class="row">
<div class="span12">
<div class="row-fluid">
<div class="span6">
<label>First Name</label>
<input type="text" class="span12" placeholder="">
</div>
<div class="span6">
<label>Last Name</label>
<input type="text" class="span12" placeholder="Type something…">
</div>
</div>
</div>
</div>

ejemplo: http://jsfiddle.net/JJnDg/460/

Answer 7

<div class="row-fluid">
<form id="myForm" modelAttribute="mymodel">
<div class="span12">
<div class="well clearfix">
<div class="span5">
<legend>Text1</legend>
<table width="100%" align="center">
<tr>
<td>
<label for="lable1">Label1 *</label>
</td>
<td>
<input id="input1" class="input-xlarge"/>
</td>
</tr>
<tr>
<td>
<label for="lable2">Label2 *</label>
</td>
<td>
<input id="input2" class="input-xlarge"/>
</td>
</tr>
<tr>
<td colspan=2 align="center">
<button class="btn btn-primary" type="submit">Submit</button>
<button class="btn" type="reset" id="resetButton">Reset</button>
</td>
</tr>
</table>
</div>
<div class="span5 offset1">
<legend>Text2</legend>
</div>
</div>
</div>
</form>