html - Bootstrap 4 Layout not working as expected when used with forms -

i working bootstrap 4 on form. now, when using form along grid classes, not work supposed to. output can seen here http://www.henryspike.tk/testform

what had expected see whole 12 columns divided 4-4-4 each containing input field stacks up.

<div class="row">                     <div class="col-md-12 offset-md-1">                         <div class="row">                             <form class="form">                                 <div class="col-md-4">                                     <div class="form-group">                                         <label for="name">name</label>                                         <input class="form-control" type="text" name="name" id="name" placeholder="eg. john doe" required>                                     </div>                                 </div>                                 <div class="col-md-4">                                     <div class="form-group">                                         <label for="email">name</label>                                         <input class="form-control" type="email" name="email" id="email" placeholder="someone@example.com" required>                                     </div>                                 </div>                                 <div class="col-md-4">                                     <div class="form-group">                                         <label for="username">name</label>                                         <input class="form-control" type="text" name="username" id="username" placeholder="eg. jdoe12" required>                                     </div>                                 </div>                             </form>                         </div>                     </div>                 </div> 

col- should immediate child of row..

http://www.codeply.com/go/mofmnmmups

<div class="row">     <div class="col-md-12">         <form class="row form">             <div class="col-md-4">                 <div class="form-group">                     <label for="name">name</label>                     <input class="form-control" type="text" name="name" id="name" placeholder="eg. john doe" required="">                 </div>             </div>             <div class="col-md-4">                 <div class="form-group">                     <label for="email">name</label>                     <input class="form-control" type="email" name="email" id="email" placeholder="someone@example.com" required="">                 </div>             </div>             <div class="col-md-4">                 <div class="form-group">                     <label for="username">name</label>                     <input class="form-control" type="text" name="username" id="username" placeholder="eg. jdoe12" required="">                 </div>             </div>         </form>     </div> </div>