I'm currently working with Bootstrap 4 and Vue.js to populate an input form, but I'm struggling to get the label to appear inline and before the input type file.
<div v-for="problem in problems">
<div class="row">
<div class="col">
<form method="POST" action="/submission" enctype="multipart/form-data" class="form-group">
<!-- sending the student information -->
<input type="text" name="courseNumber" :value="courseIdSelected" style="display: none;">
<input type="text" name="assignmentNumber" :value="assignmentSelected.id" style="display: none;">
<div class="form-group form-inline">
<label :for="problem.name">Code submissions {{ problem.name }}</label>
<input type="file" name="document" :id="problem.name" class="form-control-file"/>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary"/>
</div>
</form>
</div>
</div>
</div>
Is there a Bootstrap class that can solve this issue, or do I need to modify the CSS to align the label with the input on the same line?
Check out this screenshot for reference: