Bootstrap modal form is so ugly - html

Question

I need help i cant figure out why my modal login form is not conforming to any changes and doesn't look like the standard bootstrap form.
nav.php
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<p>Please log in below</p>
<form action="#" method="post" accept-charset="UTF-8">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<label class="label" for="user" style="color: black">Username</label></br>
<input id="user" type="text" name="user" size="30" class="input-large" placeholder="username" required/>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<label class="label" for="pass"style="color: black">Password</label></br>
<input id="pass" type="text" name="pass" size="30" class="input-large" placeholder="Password"required/>
</div>
</div>
<label class="string optional" for="user_remember_me"> Remember me</label> <input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
<input class="btn btn-success" style="clear: left; width: 100%; height: 32px; font-size: 13px; margin-bottom: 6px;" type="submit" name="submit" value="submit" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
here is what it looks like
here is an example of what i want it to look like

Answer 1

The documentation is your friend. Forms, inputs, and their labels need form-group and form-control (among other classes) attached to them.
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
</form>