javascript - Form inputs overshoot modal when using with Bootstrap 3 -

i'm trying load modal angular , fill template.

the problem inputs overshooting modal - here screenshot of problem:

here code modal instantiation:

$scope.loginopen = function () {     console.log($modal);     var modalinstance = $modal.open({       templateurl: '../views/login.html',       controller: 'authcontroller',       size: 'sm'     });   modalinstance.result.then(function () {         console.log($scope.modalinstance);     }, function () {       $log.info('modal dismissed at: ' + new date());       $scope.modalinstance = null;     });   } 

and here /view/login.html

<div class="container">   <div class="row">   <div class="col-md-6 col-lg-2">   <form ng-submit="login()" style="margin-top:30px;">         <h3>log in</h3>          <div class="form-group">           <input type="text"           class="form-control"           placeholder="email"           ng-model="user.username"></input>         </div>         <div class="form-group">           <input type="password"           class="form-control"           placeholder="password"           ng-model="user.password"></input>         </div>         <button type="submit" class="btn btn-success">log in</button>         <button class="btn btn-warning" ng-click="cancel()">cancel</button>          <span ><small> forgot password</small></span>       </form>       <div class="row">       <div ng-show="error" class="alert alert-danger">         <span>{{ error.message }}</span>       </div>       </div>      </br><br>   </div><!-- closes .col-md-6 -->   </div><!-- closes .row -->  </div><!-- closes .container --> 

it's because have them in modal - in .container. try removing .container class modal.

.container has static widths , not percentages. why it's overflowing.