html - How do I line up input fields with bootstrap? -

-

i don't think quite understand how bootstrap works grid. want name , actual field match unless screen size xs every field own row. each row, want text boxes aligned.

here's i've tried. 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>  <div class="container" style="width:80vw">      <form role="form">      <div class="row top-buffer">        <div class="col-sm-4 ">          <div class="form-group">            <label for="inputlabel3" class="col-sm-3 control-label">date:</label>            <div class="col-sm-8">              <input type="date" class="form-control" id="inputlabel3" placeholder="date">            </div>          </div>        </div>        <div class="col-sm-4 ">          <div class="form-group">            <label for="inputname" class="col-sm-4 control-label">name:</label>            <div class="col-sm-8 ">              <input type="text" class="form-control" id="name" placeholder="name">            </div>          </div>        </div>        <div class="col-sm-4">          <div class="form-group">            <label for="inputpassword" class="col-sm-3   control-label">initials:</label>            <div class="col-sm-8">              <input type="text" class="form-control" id="inputinitials" placeholder="initials">            </div>          </div>        </div>        </div>        <div class="row top-buffer">        <div class="col-sm-12">          <div class="form-group">            <label for="inputlabel3" class="col-sm-1 control-label">title:</label>            <div class="col-sm-10 ">              <input type="text" class="form-control" id="inputlabel3" placeholder="title">            </div>          </div>        </div>      </div>            <div class="row top-buffer">        <div class="col-sm-5">          <div class="form-group">            <label for="inputlabel3" class="col-sm-2 control-label">expected:</label>            <div class="col-sm-10 ">              <input type="number" class="form-control" id="inputlabel3" placeholder="title">            </div>          </div>        </div>            <div class="col-sm-5">          <div class="form-group">            <label for="actual" class="col-sm-2 control-label">actual:</label>            <div class="col-sm-10 ">              <input type="number" class="form-control" id="inputlabel3" placeholder="title">            </div>          </div>        </div>      </div>  </div>      <div class="row top-buffer">    <div class="col-sm-12">      <div class="form-group">        <label for="inputlabel3" class="col-sm-1 control-label">description:</label>        <div class="col-sm-10 ">          <textarea id="descript" class="col-sm-10 "></textarea>        </div>      </div>    </div>  </div>  </div>  <!-- end container -->  </div

bonus points can me make description field larger - enough height @ least 20 new lines.

this includes 20 spaces in despcription add .css

     .col-sm-4 {       display: inline-block;       vertical-align: middle;       float: none;       }
    <div class="container" style="width:80vw">                      <form role="form">              <div class="row top-buffer">                <div class="col-sm-4 ">                  <div class="form-group">                    <label for="inputlabel3" class="col-sm-3 control-label">date:</label>                    <div class="col-sm-8">                      <input type="date" class="form-control" id="inputlabel3" placeholder="date">                    </div>                  </div>                </div>                <div class="col-sm-4 ">                  <div class="form-group">                    <label for="inputname" class="col-sm-4 control-label">name:</label>                    <div class="col-sm-8 ">                      <input type="text" class="form-control" id="name" placeholder="name">                    </div>                  </div>                </div>                <div class="col-sm-4">                  <div class="form-group">                    <label for="inputpassword" class="col-sm-3   control-label">initials:</label>                    <div class="col-sm-8">                      <input type="text" class="form-control" id="inputinitials" placeholder="initials">                    </div>                  </div>                </div>                        </div>                        <div class = "row top-buffer">                <div class="col-sm-12">                  <div class="form-group">                    <label for="inputlabel3" class="col-sm-1 control-label">title:</label>                    <div class="col-sm-10 ">                      <input type="text" class="form-control" id="inputlabel3" placeholder="title">                    </div>                  </div>                </div>              </div>                                            <div class = "row top-buffer">                <div class="col-sm-5">                  <div class="form-group">                    <label for="inputlabel3" class="col-sm-2 control-label">expected:</label>                    <div class="col-sm-10 ">                      <input type="number" class="form-control" id="inputlabel3" placeholder="title">                    </div>                  </div>                </div>                                     <div class="col-sm-5">                  <div class="form-group">                    <label for="actual" class="col-sm-2 control-label">actual:</label>                    <div class="col-sm-10 ">                      <input type="number" class="form-control" id="inputlabel3" placeholder="title">                    </div>                  </div>                </div>              </div>            </div>                                        <div class = "row top-buffer">                <div class="col-sm-12">                  <div class="form-group">                    <label for="inputlabel3" class="col-sm-1 control-label">description:</label>                    <div class="col-sm-10 ">                      <textarea id="descript"  class="col-sm-10" rows="20"></textarea>                    </div>                  </div>                </div>              </div>            </div>            <!-- end container -->            </div


Comments

Post a Comment

Popular posts from this blog

c# - Better 64-bit byte array hash -

-
i need hash algorithm produces 64-bit hash code ( long ) fewer collisions string.gethashcode() , fast (no expensive calls cryptographic functions). here's implementation of fnv still shows 3% of collisions after testing 2 million random strings. need number way lower. void main() { const string chars = "abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz!#@$%^&*()_+}{\":?><,./;'[]0123456789\\"; const int n = 2000000; var random = new random(); var hashes = new hashset<long>(); int collisions = 0; for(int = 0; < n; i++) { var len = random.next(chars.length); var str = new char[len]; (int j = 0; j < len; j++) { str[j] = chars[random.next(chars.length)]; } var s = new string(str); if(!hashes.add(get64bithash( s ))) collisions++; } console.writeline("collision percentage after " + n + " random strings: " + ((doubl
Read more

webrtc - Which ICE candidate am I using and why? -

-
[questions in bold below] i have setup kurento media server 5.1.3 in datacenter behind firewall running os ubuntu 14.04. has 2 network cards: 222.222.222.222 (eth0 - private ip) 111.111.111.111 (eth1 - public ip) attached below sdp (setremotedescription) when browser connected kurento media server type: answer, sdp: v=0 o=- 5487318114793304426 0 in ip4 0.0.0.0 s=kurento media server c=in ip4 0.0.0.0 t=0 0 a=group:bundle audio video m=audio 59068 rtp/savpf 111 0 c=in ip4 111.111.111.111 a=rtpmap:111 opus/48000/2 a=rtpmap:0 pcmu/8000 a=sendrecv a=rtcp:59068 in ip4 111.111.111.111 a=rtcp-mux a=ssrc:669011897 cname:user39019747@host-6e83e4c2 a=extmap:3 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time a=mid:audio b=as:20 a=ice-ufrag:ymdk a=ice-pwd:lylifk5ueqzpwm91ddj37e a=fingerprint:sha-256 ff:0f:81:8c:41:4e:b4:b6:c6:d8:36:f3:d6:5f:09:fd:5f:af:13:b3:9d:fc:12:66:ac:f3:56:d6:5b:0a:73:5d a=candidate:1 1 udp 2013266431 111.111.111.111 55239 typ host a=candidate:2 1 udp
Read more

php - Zend Framework / Skeleton-Application / Composer install issue -

-
i trying create zend framework application using skeleton in netbeans. when run composer install, following error message: "c:\php\php.exe" "c:\composer\composer.phar" "--ansi" "--no-interaction" "update" "--dev" using deprecated option "dev". dev packages installed default now. loading composer repositories package information updating dependencies (including require-dev) requirements not resolved installable set of packages. problem 1 - package requires php >=5.5 php version (5.4.42) not satisfy requirement. problem 2 - installation request zendframework/zendframework 2.5.1 -> satisfiable zendframework/zendframework[2.5.1]. - zendframework/zendframework 2.5.1 requires php >=5.5 -> php version (5.4.42) not satisfy requirement. done. apparently, zend framework only needs php 5.3+ contradicts above. need use php 5.4. my composer.json following: { "name": "
Read more