form-control attribute is not adjusting to bootstrap modal template

Question

I am trying to create a modal with form using angularjs and bootstrap. First I created the form and now I am trying to put it to modal template but the form-control is sliding out of the modal as you can see in the link attached.

<div class="modal-header">
    <h3 class="modal-title">Add New Review</h3>
</div>

<div class="modal-body">
    <form role="form">
        <fieldset>
            <legend>Basic Information</legend>
            <div class="container">
                <div class="form-group">
                    <label for="address">Address</label>
                    <input type="text" id="address" name="address" class="form-control col-sm-1"
                           ng-model="editableReview.address"
                           required>
                </div>`enter code here`
        </fieldset>
    </form>
</div>

<div class="modal-footer">
    <div class="col-sm-offset-10">
        <input type="button" class="btn btn-default" value="Cancel" ng-click="cancelForm()"/>
        <input type="submit" class="btn btn-primary" value="Submit" ng-click="submitForm()"/>
    </div>
</div>

this is what I get:

Answer 1

It seems like your problem is with the div class, specifically the container. I think you should try to delete this line:

<div class="container">

(and ofcourse its closing tag: </div>, and see if it fixes your issue.
Let me know if that helps.