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>