I am attempting to create a horizontal form in Bootstrap using the code provided in their documentation. The example they show has input boxes filling the entire column space, but for some reason this is not happening when I try it, even after copying the code exactly. How can I make my form match the same format as the example?
Here is how it appears on the Bootstrap website: https://i.sstatic.net/lBzvE.png
And here is an image of how my code looks: https://i.sstatic.net/27o7K.png
This is the code I have been working with:
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2>Account Details</h2>
<form action="/account" method="post" class="form-horizontal">
<div class="form-group row">
<label for="height" class="col-sm-2 col-form-label">Height</label>
<div class="col-sm-10">
<input class="form-control" type="number" value="{{ account_details[0].height }}" id="height" name="height" min=0 max=300 step=1>
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
</form>
</div>
</div>
</div>