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?
<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
Post a Comment