html - Bootstrap CSS lining up button with input -


i trying line buttons next inputs , having trouble in doing so. new bootstrap css , css in general please tell me going wrong.

http://jsfiddle.net/5n6fq/404/

my search , new button not lining appreciated.

what iv tried:enter image description here

what should like:enter image description here

html:

<div class="row">   <div class="col-md-1"></div>      <div class="col-xs-2">         <label for="itemid">item id</label>         <input class="form-control" type="text" name="itemid" id="itemid" />      </div>      <div class="col-xs-1">         <input class="btn btn-default" type="button" name="search" id="search" value="search">     </div>      <div class="col-xs-2">         <label for="qty">qty</label>         <select name="qty" id="qty" class="form-control">             <option value="1" selected>1</option>             <option value="2">2</option>             <option value="3">3</option>             <option value="4">4</option>             <option value="5">5</option>             <option value="6">6</option>             <option value="7">7</option>             <option value="8">8</option>             <option value="9">9</option>             <option value="10">10</option>             <option value="11">11</option>             <option value="12">12</option>             <option value="13">13</option>             <option value="14">14</option>             <option value="15">15</option>             <option value="16">16</option>             <option value="17">17</option>             <option value="18">18</option>             <option value="19">19</option>             <option value="20">20</option>         </select>      </div> </div>  <div class="row">   <div class="col-md-1"></div>      <div class="col-xs-4">     <label for="dealers"></label>         <select name="dealers" id="dealers" class="form-control">             <option value="" selected></option>             <option value="1">1</option>         </select>     </div>      <input class="btn btn-default" type="button" name="new" value="new">  </div>  <div class="row">   <div class="col-md-1"></div>      <input class="btn btn-default" type="button" name="report" value="report">      <input class="btn btn-default" type="button" name="printlabels" value="print labels">      <input class="btn btn-default" type="button" name="logitin" value="log in">      <input class="btn btn-default" type="button" name="completeit" value="complete it">      <input class="btn btn-default" type="button" name="exit" value="exit">  </div>

css:

#itemid, #search { display: inline-block; }

you might want @ input groups add button input field.

#btn-inputs {    text-align: center;    margin-top: 15px;  }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />  <hr>  <div class="container">    <div class="row">      <div class="col-xs-6">        <label for="itemid">item id</label>        <div class="input-group">          <input type="text" class="form-control" name="itemid" id="itemid"> <span class="input-group-btn">          <input class="btn btn-default" type="button" name="search" id="search" value="search"/>        </span>          </div>        <!-- /input-group -->      </div>      <!-- /.col-lg-6 -->      <div class="col-xs-6">        <label for="qty">qty</label>        <select name="qty" id="qty" class="form-control">          <option value="1" selected>1</option>          <option value="2">2</option>          <option value="3">3</option>          <option value="4">4</option>          <option value="5">5</option>          <option value="6">6</option>          <option value="7">7</option>          <option value="8">8</option>          <option value="9">9</option>          <option value="10">10</option>          <option value="11">11</option>          <option value="12">12</option>          <option value="13">13</option>          <option value="14">14</option>          <option value="15">15</option>          <option value="16">16</option>          <option value="17">17</option>          <option value="18">18</option>          <option value="19">19</option>          <option value="20">20</option>        </select>      </div>    </div>    <div class="row">      <div class="col-xs-12">        <label for="dealers"></label>        <div class="input-group">          <select name="dealers" id="dealers" class="form-control">            <option value="" selected></option>            <option value="1">1</option>          </select> <span class="input-group-btn">          <input class="btn btn-default" type="button"  name="new" value="new" />        </span>          </div>        <!-- /input-group -->      </div>    </div>    <div class="row">      <div class="col-xs-12" id="btn-inputs">        <div class="btn-group" role="group" aria-label="...">          <input class="btn btn-default" type="button" name="report" value="report">          <input class="btn btn-default" type="button" name="printlabels" value="print labels">          <input class="btn btn-default" type="button" name="logitin" value="log in">          <input class="btn btn-default" type="button" name="completeit" value="complete it">          <input class="btn btn-default" type="button" name="exit" value="exit">        </div>      </div>    </div>  </div>


Comments

Post a Comment

Popular posts from this blog

1111. appearing after print sequence - php -

morning, i have code takes string of shoe sizes, explodes , puts in table. code works , info displayed correctly on page after table there few 1's after table. i'm confused this. so table looks (in columns of 3 on webpage) available in following sizes: 3 4 5 6 9 10 111 here's codes, purpose of example $x = 3|4|6|10|9 function get_sizes_pipe($x) { $counter = 0; $splits = explode("|",$x); asort($splits); $x = print "<table class='greentable'>"; $x .= print "<thead><tr><th scope='col' colspan='3' abbr='starter'>available in following sizes:</th></tr></thead><tbody><tr>"; foreach ($splits $split) { $entry = print "<td>".$split."</td>"; if($counter == 2){ $entry .= print "</tr><tr>"; $counter =0; } else { $counter++; ...
Read more

java - WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/board/] in DispatcherServlet with name 'appServlet' -

this question has answer here: why spring mvc respond 404 , report “no mapping found http request uri […] in dispatcherservlet”? 3 answers i trying making simple bbs i'm encountering following error, warn : org.springframework.web.servlet.pagenotfound - no mapping found http request uri [/board/] in dispatcherservlet name 'appservlet' i have tried solve error many times, have failed. how can solve error? here web.xml, controllerand , servlet-context. my web.xml <?xml version="1.0" encoding="utf-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xsi:schemalocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <filter> <filter-nam...
Read more

Ruby on Rails, ActiveRecord, Postgres, UTF-8 and ASCII-8BIT encodings -

weirdest error, who’s challenge try , me? spent hours yesterday on , it’s magic. can't believe happening , it's driving me crazy. btw, using: rails 4.2.3 ruby 2.2.3 pg 0.18 encoding.default_internal = encoding.default_external = utf-8 config.encoding = 'utf-8' it has postgres, activerecord , encodings! turns out we’ve been getting these errors whenever create new users on database special characters: encoding::undefinedconversionerror: "\xc3" ascii-8bit utf-8 \xc3 may vary depending on characters. weird part we’ve set since beginning utf-8. makes no sense , digged it, , used script: user.all.each |user| user.attributes.each |name, value| if value.is_a? string puts user.email + name.encoding.to_s + value.encoding.to_s end end end and output of 1 of users, users same: dr_lottahelp@blahblah.comutf-8utf-8 dr_lottahelp@blahblah.comutf-8ascii-8bit dr_lottahelp@blahblah.comutf-8ascii-8bit dr_lottahelp@blahblah.comutf-8asci...
Read more