troubleshooting Question

Bootstrap form field issues

Avatar of Richard Korts
Richard KortsFlag for United States of America asked on
BootstrapResponsive Web
3 Comments1 Solution191 ViewsLast Modified:
I want to use bootstrap to make form fields (i.e., input type="text") responsive.

When I use class="form-control" it makes the text field cover the whole width of the div. Obviously, I don;t want that. Look at rkassoc.org/Houston/form.htm. Specifically Remarks and "Serving Location".

How can I limit the width of these fields & retain responsiveness?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
<title>City of Houston Backflow Assembly & Test Report Form</title>
 <style>
.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}
.wrapper{
  max-width:1100px;
min-width:600px;
  margin:0 auto;
  
}
</style> 
<script type="text/javascript">

</script>
<script>
  $(function() {
    $( "#datepickerid" ).datepicker();
  });
  $(function() {
    $( "#datepickerdc" ).datepicker();
  });
    $(function() {
    $( "#datepickertd" ).datepicker();
  });
</script>
</head>
<body>
<div class="wrapper">
<form method="POST" name="st" action="post_form.php" onSubmit="return chk_vals();">
<div class="container-fluid" >
<div class="row">
	<div class="col-sm-3 col-xs-3" style="padding-top:3px;"><img src="images/logo.png" class="img-responsive"></div>
	<div class="col-sm-9 col-xs-9 text-center" style="padding-top:50px; font-size:22px;"><b>City of Houston - Backflow Assembly & Test Report Form</b></div>
</div>	
<div class="row">
	<div class="col-sm-6 col-xs-6 text-right" style="padding-top:3px;">Name of Property:&nbsp;</div>
	<div class="col-sm-6 col-xs-6 text-left"  style="padding-top:3px;"><input type="text" name="pn" style="width:300px;"></div>
</div>	
<div class="row">
	<div class="col-sm-6 col-xs-6 text-right" style="padding-top:3px;">Property Address:&nbsp;</div>
	<div class="col-sm-6 col-xs-6 text-left"  style="padding-top:3px;"><input type="text" name="padr" style="width:300px;"></div>
</div>	
<div class="row">
	<div class="col-sm-6 col-xs-6 text-right" style="padding-top:3px;">City, State, Zip:&nbsp;</div>
	<div class="col-sm-6 col-xs-6 text-left"  style="padding-top:3px;"><input type="text" name="city" value="Houston">,&nbsp;<input type="text" size="2" name="state" value="TX">&nbsp;<input type="text" style="width:50px;" name="zip"></div>
</div>
<div class="row">
	<div class="col-sm-6 col-xs-6 text-right" style="padding-top:3px;">Key Map#:&nbsp;</div>
	<div class="col-sm-6 col-xs-6 text-left"  style="padding-top:3px;"><input type="text" name="keymap1" style="width:40px;">-<input type="text" name="keymap2" style="width:30px;"><span style="padding-left:20px;">Phone#:&nbsp;</span><input type="text" name="phac" style="width:40px;">-<input type="text" name="phex" style="width:40px;">&nbsp;<input type="text" name="phl4" style="width:45px;"></div>
</div>
<div class="row">
	<div class="col-sm-6 col-xs-6 text-right" style="padding-top:3px;">Same as above:&nbsp;<input type="checkbox" name="ckmasa">&nbsp;Mailing Address:&nbsp;</div>
	<div class="col-sm-6 col-xs-6 text-left"  style="padding-top:3px;"><input type="text" name="madr" style="width:300px;"></div>
</div>
<div class="row">
	<div class="col-sm-6 col-xs-6 text-right" style="padding-top:3px;">Contact Name:&nbsp;</div>
	<div class="col-sm-6 col-xs-6 text-left"  style="padding-top:3px;"><input type="text" name="conname" style="width:200px;"></div>
</div>	
<div class="row">
	<div class="col-sm-6 col-xs-6 text-right" style="padding-top:3px;"><b>Type of Assembly</b></div>
	<div class="col-sm-6 col-xs-6 text-left"  style="padding-top:3px;">&nbsp;</div>
</div>	
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</div>
	<div class="col-sm-10 col-xs-10 text-center" style="padding-top:3px;"><span style="padding-right:50px;">New&nbsp;<input type="radio" name="anr"></span><span style="padding-right:50px;">Existing&nbsp;<input type="radio" name="anr"></span>Replaced:&nbsp;<input type="text" name="rsn" style="width:150px;">&nbsp;(Old serial number replaced)</div>
	<div class="col-sm-1 col-xs-1">&nbsp;</div>
</div>	
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</div>
	<div class="col-sm-10 col-xs-10 text-center" style="padding-top:3px;"><span style="padding-right:50px;"><input type="radio" name="asstyp">&nbsp;Reduced Pressure Principle (RP)</span><span style="padding-right:50px;"><input type="radio" name="asstyp">&nbsp;Reduced Pressure Principle Detector (RPD)</span><span><input type="radio" name="asstyp">&nbsp;Pressure Vacuum Breaker (PVB)</span></div>
	<div class="col-sm-1 col-xs-1">&nbsp;</div>
</div>	
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</div>
	<div class="col-sm-10 col-xs-10 text-center" style="padding-top:3px;"><span style="padding-right:50px;"><input type="radio" name="asstyp">&nbsp;Double Check Valve (DCV)</span><span style="padding-right:50px;"><input type="radio" name="asstyp">&nbsp;Double Check Valve - Detector (DCD)</span><span><input type="radio" name="asstyp">&nbsp;Spill Resistant Pressure Vacuum Breaker (SVB)</span></div>
	<div class="col-sm-1 col-xs-1">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</div>
	<div class="col-sm-10 col-xs-10 text-center" style="padding-top:3px;"><span style="padding-right:30px;">Manufacturer:&nbsp;<input type="text" name="mfg" style="width:150px;"></span><span style="padding-right:30px;">Model #:&nbsp;<input type="text" name="model" style="width:100px;"></span><span style="padding-right:30px;">Size:&nbsp;<input type="text" name="size" style="width:100px;"></span><span>Serial Number:&nbsp;<input type="text" name="serno" style="width:150px;"></span></div>
	<div class="col-sm-1 col-xs-1">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</div>
	<div class="col-sm-10 col-xs-10 text-center" style="padding-top:3px;"><span style="padding-right:30px;">Serving/Location:&nbsp;<input type="text" class="form-control" name="sloc" ></span><span>Date Installed:&nbsp;<input type="text" name="instdate" id="datepickerid" ></span></div>
	<div class="col-sm-1 col-xs-1">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-12 col xs-12">&nbsp;</div>
</div>	
<div class="row">
	<div class="col-sm-2 col-xs-2" style="padding-top:3px;">&nbsp;</div>
	<div class="col-sm-6 col-xs-6 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:30px;">REDUCED PRESSURE PRINCIPLE ASSEMBLY</div>
	<div class="col-sm-4 col-xs-4 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:30px;">PRESSURE VACUUM BREAKER & SVB</div>
</div>
<div class="row">
	<div class="col-sm-2 col-xs-2" style="padding-top:3px;">&nbsp;</div>
	<div class="col-sm-4 col-xs-4 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:30px;">Double Check Valve Assembly</div>
	<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;height:30px;border-right-style: solid;border-width:2px;">RELIEF VALVE</div>
	<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;height:30px;">AIR INLET</div>
	<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;height:30px;">CHECK VALVE</div>
</div>
<div class="row">
	<div class="col-sm-2 col-xs-2" style="padding-top:3px;">&nbsp;</div>
	<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;">CHECK VALVE #1</div>
	<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;">CHECK VALVE #2</div>
	<div class="col-sm-6 col-xs-6 text-center" style="padding-top:3px;vertical-align:middle;">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-2 col-xs-2 text-center" style="display:table-cell;padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;"><br>INITAL<br>TEST</div>
	<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;">D. C. Closed Tight&nbsp;<input type="checkbox" name="itcv1ct"><br>RP&nbsp;<input type="text" name="itcv1psi" style="width:75px;">&nbsp;PSI<br>Leaked&nbsp;<input type="checkbox" name="itdcv1l"></div>
	<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;">Closed Tight&nbsp;<input type="checkbox" name="itcv2ct"><br><input type="text" name="itrvpsi" style="width:75px;">&nbsp;PSI<br>Leaked&nbsp;<input type="checkbox" name="itdno"></div>
	<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;">Opened At<br><input type="text" name="itrvpsi" style="width:75px;">&nbsp;PSI<br>Did Not Open&nbsp;<input type="checkbox" name="itrvdno"></div>
	<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;">Opened At<br><input type="text" name="itaipsi" style="width:75px;">&nbsp;PSI<br>Did Not Open&nbsp;<input type="checkbox" name="itaidno"></div>
	<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;">Held At<br><input type="text" name="itcvpsi" style="width:75px;">&nbsp;PSI<br>Leaked&nbsp;<input type="checkbox" name="itcvl"></div>
</div>
<div class="row">
	<div class="col-sm-2 col-xs-2 text-center" style="display:table-cell;padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:100px;">REPAIRS<br>MATERIALS<br>USED</div>
	<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:100px;"><textarea class="form-control" rows="3" cols="18" name="rmucv1"></textarea></div>
	<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:100px;"><textarea class="form-control" rows="3" cols="18" name="rmucv2"></textarea></div>
	<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:100px;"><textarea class="form-control" rows="3" cols="18" name="rmurv"></textarea></div>
	<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:100px;"><textarea class="form-control" rows="3" cols="18" name="rmuai"></textarea></div>
	<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:100px;"><textarea class="form-control" rows="3" cols="18" name="rmucv"></textarea></div>
</div>
<div class="row">
	<div class="col-sm-2 col-xs-2 text-center" style="display:table-cell;padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;"><br>FINAL<br>TEST</div>
	<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;">D. C. Closed Tight&nbsp;<input type="checkbox" name="ftcv1ct"><br>RP&nbsp;<input type="text" name="ftcv1psi" style="width:75px;">&nbsp;PSI</div>
	<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;">Closed Tight&nbsp;<input type="checkbox" name="ftcv2ct"><br><input type="text" name="ftrvpsi" style="width:75px;">&nbsp;PSI</div>
	<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;">Opened At<br><input type="text" name="ftrvpsi" style="width:75px;">&nbsp;PSI</div>
	<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;">Opened At<br><input type="text" name="ftaipsi" style="width:75px;">&nbsp;PSI</div>
	<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;">Held At<br><input type="text" name="ftcvpsi" style="width:75px;">&nbsp;PSI</div>
</div>
<div class="row">
	<div class="col-sm-6 col-xs-6" style="padding-top:3px;height:20px;">Test Gauge Used: Make/Model&nbsp;<input type="text" name="tgmm" style="width:150px;" value="WATTS TK-99E"></div>
	<div class="col-sm-2 col-xs-2" style="padding-top:3px;height:20px;">S/N:&nbsp;<input type="text" name="tgsn" style="width:100px;" value="0061821"></div>
	<div class="col-sm-4 col-xs-4" style="padding-top:3px;height:20px;">Calibration Date:&nbsp;<input type="text" name="caldate" id="datepickerdc" value="05/03/2016" style="width:100px;" >&nbsp;{Tested Annually}</div>
</div>
<div class="row">
	<div class="col-sm-12 col-xs-12" style="padding-top:14px;">Remarks:&nbsp;<input type="text" name="tgmm" class="form-control" style="width:350px></div>
</div>	
<div class="row">
	<div class="col-sm-9 col-xs-9" style="padding-top:5px;height:20px;">The above is certified to be true at the time of Testing</div>
</div>
<div class="row">
	<div class="col-sm-6 col-xs-6" style="padding-top:5px;height:20px;">Backflow Test Status&nbsp;<input type="radio" name="passfail" value="p">&nbsp;Pass&nbsp;<input type="radio" name="passfail" value="f">&nbsp;Fail</div>
</div>
<div class="row">
	<div class="col-sm-6 col-xs-6" style="padding-top:10px;">CT's Firm Name:&nbsp;<input type="text" name="bffirm" value="Backflowinspector.com" style="width:300px;"></div>
	<div class="col-sm-6 col-xs-6" style="padding-top:10px;">Tester Name:&nbsp;<input type="text" name="bfname" value="Daniel Todd" style="width:300px;"></div>
</div>
<div class="row">
	<div class="col-sm-6 col-xs-6" style="padding-top:10px;">Firm Address:&nbsp;<input type="text" name="bfaddr1" value="5306 Riverview Way" style="width:300px;"></div>
	<div class="col-sm-6 col-xs-6" style="padding-top:10px;">City Tester No.:&nbsp;<input type="text" name="bftno" value="#005, BPAT 11021" style="width:300px;"></div>
</div>
<div class="row">
	<div class="col-sm-6 col-xs-6" style="padding-top:10px;"><input type="text" name="bfaddr2" style="width:300px;" value="Houston, TX 77057"></div>
	<div class="col-sm-6 col-xs-6" style="padding-top:10px;">Test Date:&nbsp;<input type="text" name="testdate" id="datepickertd" value="07/18/2016" style="width:100px;" ></div>
</div>
<div class="row">
	<div class="col-sm-6 col-xs-6" style="padding-top:10px;">Firm Phone #:<input type="text" name="phone" style="width:150px;" value="713-518-9660"></div>
	<div class="col-sm-6 col-xs-6" style="padding-top:10px;">C.O.H C.C.C Witness:&nbsp;<input type="text" name="witness" style="width:300px;" ></div>
</div>
<div class="row">
	<div class="col-sm-12 col-xs-12 text-center" style="padding-top:10px;"><input type="submit" value="Submit Form"></div>
</div>	
</div>
</form>
</div>
</body>
</html>
ASKER CERTIFIED SOLUTION
Russ SuterSenior Software Developer

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 3 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 3 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros