Currently, I am working with Bootstrap 4 on a form and facing an issue. Despite using the grid classes, the form does not display as expected. You can view the output here:
I anticipated that the 12 columns would be divided into three sections of 4 columns each, with each section containing an input field. However, the output shows that it is stacking up instead.
<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">Email Address</label>
<input class="form-control" type="email" name="email" id="email" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0b7864666e64656e4b6e736a667b676e25686466">[email protected]</a>" required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="username">Username</label>
<input class="form-control" type="text" name="username" id="username" placeholder="eg. JDoe12" required>
</div>
</div>
</form>
</div>
</div>
</div>