I have a form using the Bootstrap framework where I want text on the left of every input to show its purpose. However, the text ends up above the input field like this:
Current appearance of the form: https://i.sstatic.net/GUHcO.png
<div class="container">
<br>
<center> <h3> Add Youth </h3> </center>
<br>
<?php echo form_open('index.php/Addjongere/Add_jongere'); ?>
<form>
<div class="form-group row">
<label>First Name:</label>
<input class="form-control" name="firstname" id="firstname" placeholder="First Name" type="text">
</div>
<div class="form-group row">
<label>Middle Initial(s):</label>
<input class="form-control" name="middlename" id="middlename" placeholder="Middle Name" type="text">
</div>
<div class="form-group row">
<label>Last Name:</label>
<input class="form-control" name="lastname" id="lastname" placeholder="Last Name" type="text">
</div>
<div>
<button class="btn btn-primary" name="Add_youth" >Add</button>
</div>
</form>
</div>
If you have any suggestions or solutions, please let me know. Thank you!