bootstrap modal form-inline won't "inline" buttons - bootstrap-modal

Question

i'm really stuck with this problem. Created the next modal .form-inline but the cancel button stays out of the inline, this is the code:
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Login </h4>
</div>
<div class="modal-body">
<div class="form-inline">
<div class="form-group">
<label class="sr-only" for="email">Email Address</label>
<input type="email" class="form-control-input-sm text-center" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input type="password" class="form-control-input-sm text-center" placeholder="Password">
</div>
<input type="checkbox"><span style="color:#9d9797">Remember me</span>
<button type="submit" class="btn btn-info">Sign In</button>
<button type="button" class="btn btn-default btn-sm"
data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
The picture of it:

Answer 1

The default input max-width is 280px, you can define a class to decrease it, such as
<style>
.input-short {
max-width: 130px !important;
}
</style>
then apply it to the input textboxes
<input type="email" class="form-control input-short" id="email" placeholder="Email">
This should give you what you want (adjust the max-width accordingly).