I am trying to re-create this page below
I am pretty familiar with bootstrap 4's grid system but I struggle very much with forms. Where the form is on the page consists of a row with two col-6. I am working on the first column but I cannot seem to keep everything inline using flexbox classes. Can someone give me an idea of how to get this similar format?
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"><div class="container"><div class="d-flex flex-row"><div class="col-6 d-flex"><!--left side --><form class="form-inline"><div class="form-group"><label for="fname">First Name:</label><input type="text" id="fname" class="form-control ml-5"></div><div class="form-group"><label for="lname">Last Name:</label><input type="text" id="lname" class="form-control ml-5"></div><div class="form-inline"><label for="month/year">Date of Birth:</label><select name="Month" class="custom-select" class="month/year"><option value="january">January</option><option value="february">February</option><option value="march">March</option><option value="april">April</option><option value="may">May</option><option value="june">June</option><option value="july">July</option><option value="august">August</option><option value="september">September</option><option value="october">October</option><option value="november">November</option><option value="december">December</option></select><!--dates in this select below --><select name="Year" class="custom-select" class="month/year"><option value="2018">2018</option><option value="2017">2017</option> </select></div><div class="form-group mt-3"><label>Gender:</label><div><label class="radio-button-container ml-2">Male<input type="radio" name="radio"><span class="black-dot"></span></label></div><div><label class="radio-button-container ml-2">Female<input type="radio" name="radio"><span class="black-dot"></span></label></div></div><div class="form-group"><label for="month/year">Field of Study:</label><select name="Month" class="custom-select" class="month/year"><option value=""></option></select></div></form></div><div class="col-6"></div><!--right side --></div><!-- form for teacher/student--></div>The snippet would be that left side in the first column where "first name" starts. If I can understand how to get that type of alignment then I can figure out the other column. Can this be done using bootstrap classes?