html - Why don't I get all 4 elements in the same row? -

please @ following code:

<div class="container">   <form class="form-inline" role="form">     <div class="form-group">       <label for="first">first</label>       <input class="form-control" id="first" ng-model="???" ng-readonly="true" />     </div>      <div class="form-group">       <label for="second">second</label>       <input class="form-control" id="second" ng-model="???" ng-readonly="true" />     </div>      <div class="form-group">       <label for="third">third</label>       <input class="form-control" id="third" ng-model="???" ng-readonly="true" />     </div>      <div class="form-group">       <label for="fourth">fourth</label>       <input class="form-control" id="fourth" ng-model="???" ng-readonly="true" />     </div>   </form> </div> 

my purpose create form 4 elements in 1 line. wrote code based on example: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_form_inline&stacked=h.

however, got each 1 of these elements in different line. know why code example didn't work out?

maybe need add these scripts , css:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>