css - layout with twitter-bootstrap form -


i have difficulties arrange css bootstrap form . on top of picture below layout , under layout obtain: http://s27.postimg.org/dfztgn35v/flow_root3665.png is: first column witn names aligned on last letter, , aligned input fields on left , on right.

here css used:

<div class="well">  <form class="form-horizontal" method="post"> <fieldset> <legend>event</legend>    <div class="form-group">   <label for="input-append date" class="col-lg-1 control-label">date</label>     <div class="col-lg-3">       <div class="input-group input-append date" id="startdatepicker">       <input type="text" class="form-control" name="datepicker"  id="datepicker1" readonly style="background-color: white" /><span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>       </div>     </div>      <div class="form-group">     <label for="input-append type" class="col-lg-1 control-label">type</label>       <div class="col-lg-2">       <select class="form-control" id="select">         <option>select1</option>         <option>select2</option>       </select>       </div>     </div>       <div class="form-group">       <label for="inputtitle" class="col-lg-1 control-label">title</label>         <div class="col-lg-6">           <input kl_virtual_keyboard_secure_input="on" class="form-control" id="inputtitle" placeholder="title" type="text" maxlength="30">         </div>       </div>    <div class="form-group">   <label for="textarea" class="col-lg-1 control-label">description</label>     <div class="col-lg-6">     <textarea class="form-control" rows="3" id="textarea" placeholder="description" maxlength="200"></textarea>     </div>   </div>   </div>  </fieldset>  </form>   </div> 

thanks!

with minor css can acheive that. see example.

#soform input,  #soform select {    height: 50px;    font-size: 16px;    -webkit-border-radius: 0;    border-radius: 0;    border: 4px solid #444;  }  #soform textarea {    font-size: 16px;    -webkit-border-radius: 0;    border-radius: 0;    border: 4px solid #444;  }  #soform .input-group-addon {    height: 50px;    font-size: 13px;    -webkit-border-radius: 0;    border-radius: 0;    border-right: 4px solid #444;    border-top: 4px solid #444;    border-bottom: 4px solid #444;  }  .btn.btn-submit {    border-radius: 0;    height: 50px;    width: 100px;    border: 4px solid #444;  }  @media (min-width: 768px) {    #soform .soform {      margin: 10px auto;    }    #soform .control-label {      margin-top: 25px;    }  }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />  <div class="well">    <div class="container">      <form id="soform" name="soform">        <div class="form-group">          <label for="date" class="col-sm-2 control-label">date</label>          <div class="col-sm-5">            <div class="input-group soform">              <input type="text" class="form-control" id="date" /> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>              </div>          </div>        </div>        <div class="form-group">          <label for="type" class="col-sm-2 control-label">type</label>          <div class="col-sm-3">            <select class="form-control soform" id="type">              <option>select1</option>              <option>select2</option>            </select>          </div>        </div>        <div class="form-group">          <label for="title" class="col-sm-2 control-label">title</label>          <div class="col-sm-10">            <input type="text" class="form-control" id="title" />          </div>        </div>        <div class="form-group">          <label for="description" class="col-sm-2 control-label">description</label>          <div class="col-sm-10">            <textarea class="form-control soform" rows="5" id="desc"></textarea>          </div>        </div>        <div class="form-group">          <div class="col-sm-offset-2 col-sm-10">            <button type="submit" class="btn btn-default btn-submit">submit</button>          </div>        </div>      </form>    </div>  </div>


Comments

Popular posts from this blog

dns - How To Use Custom Nameserver On Free Cloudflare? -

python - Pygame screen.blit not working -

c# - Web API response xml language -