css - Bootsrap Form Group & Input Group -


i've been playing below code hours. essentially, i'd small input field 2 buttons next it! i'm unable buttons line text field, , combination of classes seems have shrunk text field drastically.

what's missing/needs changing buttons appear correctly alongside text field?

enter image description here

<form method="post">     <div class="form-group col-xs-3">         <label for="cuein">cue in</label>         <div class="input-group col-sm-10">             <input type="text" class="form-control"  id="cuein" name="cuein" value="<?php if(isset($id3_tags_mairlist_cuein)) { echo $id3_tags_mairlist_cuein; } ?>">             <span class="input-group-addon">                 <button type="button" class="btn btn-default btn-sm glyphicon glyphicon glyphicon-time" aria-label="left align" aria-hidden="true" id="btnset_cuein" />                 <button type="button" class="btn btn-default btn-sm glyphicon glyphicon glyphicon-play-circle" aria-label="left align" aria-hidden="true" id="btngo_cuein" />             </span>         </div>     </div>     <div class="form-group col-xs-3">         <label for="ramp1">ramp 1</label>         <div class="input-group">             <input type="text" class="form-control" id="ramp1" name="ramp1" value="<?php if(isset($id3_tags_mairlist_ramp1)) { echo $id3_tags_mairlist_ramp1; } ?>">             <span class="input-group-addon">                 <button type="button" class="btn btn-default btn-sm glyphicon glyphicon glyphicon-time" aria-label="left align" aria-hidden="true" id="btnset_ramp1" />                 <button type="button" class="btn btn-default btn-sm glyphicon glyphicon glyphicon-play-circle" aria-label="left align" aria-hidden="true" id="btngo_ramp1" />             </span>         </div>     </div>     <div class="form-group col-xs-3">         <label for="ramp2">ramp 2</label>         <div class="input-group">         <input type="text" class="form-control" id="ramp2" name="ramp2" value="<?php if(isset($id3_tags_mairlist_ramp2)) { echo $id3_tags_mairlist_ramp2; } ?>">             <span class="input-group-addon">                 <button type="button" class="btn btn-default btn-sm glyphicon glyphicon glyphicon-time" aria-label="left align" aria-hidden="true" id="btnset_ramp1" />                 <button type="button" class="btn btn-default btn-sm glyphicon glyphicon glyphicon-play-circle" aria-label="left align" aria-hidden="true" id="btngo_ramp1" />             </span>         </div>     </div>     <div class="form-group col-xs-3">         <label for="ramp3">ramp 3</label>         <div class="input-group">         <input type="text" class="form-control" id="ramp3" name="ramp3" value="<?php if(isset($id3_tags_mairlist_ramp3)) { echo $id3_tags_mairlist_ramp3; } ?>">             <span class="input-group-addon">                 <button type="button" class="btn btn-default btn-sm glyphicon glyphicon glyphicon-time" aria-label="left align" aria-hidden="true" id="btnset_ramp1" />                 <button type="button" class="btn btn-default btn-sm glyphicon glyphicon glyphicon-play-circle" aria-label="left align" aria-hidden="true" id="btngo_ramp1" />             </span>         </div>     </div>     <div class="form-group col-xs-3">         <label for="outro">outro</label>         <div class="input-group">         <input type="text" class="form-control" id="outro" name="outro" value="<?php if(isset($id3_tags_mairlist_outro)) { echo $id3_tags_mairlist_outro; } ?>">             <span class="input-group-addon">                 <button type="button" class="btn btn-default btn-sm glyphicon glyphicon glyphicon-time" aria-label="left align" aria-hidden="true" id="btnset_ramp1" />                 <button type="button" class="btn btn-default btn-sm glyphicon glyphicon glyphicon-play-circle" aria-label="left align" aria-hidden="true" id="btngo_ramp1" />             </span>         </div>     </div>     <div class="form-group col-xs-3">         <label for="startnext">start next</label>         <div class="input-group">         <input type="text" class="form-control" id="startnext" name="startnext" value="<?php if(isset($id3_tags_mairlist_startnext)) { echo $id3_tags_mairlist_startnext; } ?>">             <span class="input-group-addon">                 <button type="button" class="btn btn-default btn-sm glyphicon glyphicon glyphicon-time" aria-label="left align" aria-hidden="true" id="btnset_ramp1" />                 <button type="button" class="btn btn-default btn-sm glyphicon glyphicon glyphicon-play-circle" aria-label="left align" aria-hidden="true" id="btngo_ramp1" />             </span>         </div>     </div>     <div class="form-group col-xs-3">         <label for="cueout">cue out</label>         <div class="input-group">         <input type="text" class="form-control" id="cueout" name="cueout" value="<?php if(isset($id3_tags_mairlist_cueout)) { echo $id3_tags_mairlist_cueout; } ?>">             <span class="input-group-addon">                 <button type="button" class="btn btn-default btn-sm glyphicon glyphicon glyphicon-time" aria-label="left align" aria-hidden="true" id="btnset_ramp1" />                 <button type="button" class="btn btn-default btn-sm glyphicon glyphicon glyphicon-play-circle" aria-label="left align" aria-hidden="true" id="btngo_ramp1" />             </span>         </div>     </div> </form> 

<div style="padding: 100px 100px 10px;">    <form class="bs-example bs-example-form" role="form">       <div class="input-group">          <input type="text" class="form-control">          <span class="input-group-addon">$</span>          <span class="input-group-addon">.00</span>       </div>    </form> </div> 

Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -