Why do my bootstrap controls not resize correctly within my form?

<div class="container">
    <form action="/Home/DoQuoteMe" class="ajax" method="post" role="form">
        <div class="form-group">
            <label class="control-label" for="Name">Name:</label>
            <input class="form-control" type="text" id="Name" name="Name" placeholder="Your name here" required="">
        </div>
        <div class="form-group">
            <label class="control-label" for="Tel">Tel:</label>
            <input class="form-control" type="text" id="Tel" name="Tel" placeholder="Tel #" required="">
        </div>
        <div class="form-group">
            <label class="control-label" for="Cell">Cell:</label>
            <input class="form-control" type="text" id="Cell" name="Cell" placeholder="Cell #" required="">
        </div>
        <div class="form-group">
            <label class="control-label" for="Email">Email:</label>
            <input class="form-control" type="email" id="Email" name="Email" placeholder="your@emailaddress.com" required="">
        </div>
        <div class="form-group">
            <label class="control-label" for="Address">Address:</label>
            <textarea class="form-control" id="Address" name="Address" placeholder="Your address here" required="" rows="5"></textarea>
        </div>
        <div class="form-group">
            <label class="control-label" for="Comments">Comment:</label>
            <textarea class="form-control" id="Comments" name="Comments" placeholder="Your comments here" required="" rows="5"></textarea>
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-primary">Submit</button>
            <button type="reset" class="btn btn-default">Reset</button>
        </div>
    </form>
</div>