bootstrap 4 grid system doesnt float automatically - html

Question

So I am developing a site using bootstrap 4 , everything works fine but the column that i have, need to be floated automatically , but it doesn't , is there any issue with bootstrap 4 or am i missing anything ,
As this can be solve too writing custom css but i do think i am missing something , please help .
<?php
include ("layouts/header.php");
?>
<section class="booking">
<div class="container">
<div class="row">
<div class="section-header">
<h2>Booking Procedures</h2>
</div>
<div class="section-content">
<div class="col-12">
<form>
<div class="card text-center">
<div class="card-header">
Booking Step 2 Of 2
</div>
<div class="card-block">
<p>All * fields are compulsory</p>
<div class="col-12 col-md-3">
<div class="form-group">
<select class="form-control">
<option>Title</option>
<option>Mr.</option>
<option>Mrs.</option>
<option>Miss</option>
</select>
</div>
</div>
<div class="col-12 col-md-3">
<div class="form-group">
<input type="text" class="form-control" placeholder="First Name *" />
</div>
</div>
<div class="col-12 col-md-3">
<div class="form-group">
<input type="text" class="form-control" placeholder="Middle Name" />
</div>
</div>
<div class="col-12 col-md-3">
<div class="form-group">
<input type="text" class="form-control" placeholder="Last Name *" />
</div>
</div>
<div class="col-12 col-md-3">
<div class="form-group">
<select class="form-control" required="required">
<option>Nationality</option>
<option>Chinese</option>
<option>Indian</option>
</select>
</div>
</div>
<div class="col-12 col-md-3">
<div class="form-group">
<input type="text" class="form-control datepicker" placeholder="Date Of Birth *" />
</div>
</div>
<div class="col-12 col-md-3">
<div class="form-group">
<input type="text" class="form-control" placeholder="Occupation" />
</div>
</div>
<div class="col-12 col-md-3">
<div class="form-group">
<input type="email" class="form-control" placeholder="Email Address *" />
</div>
</div>
<div class="col-12 col-md-3">
<div class="form-group">
<input type="text" class="form-control" placeholder="Detail Mailing Address *" />
</div>
</div>
<div class="col-12 col-md-3">
<div class="form-group">
<input type="text" class="form-control" placeholder="Mobile Number *" />
</div>
</div>
<div class="col-12 col-md-3">
<div class="form-group">
<input type="text" class="form-control" placeholder="Landline" />
</div>
</div>
<div class="col-12 col-md-3">
<div class="form-group">
<input type="text" class="form-control" placeholder="Passport Number *" />
</div>
</div>
<div class="col-12 col-md-3">
<div class="form-group">
<input type="text" class="form-control" placeholder="Place Of Issue *" />
</div>
</div>
<div class="col-12 col-md-3">
<div class="form-group">
<input type="text" class="form-control datepicker" placeholder="Date Of Issue *" />
</div>
</div>
<div class="col-12 col-md-3">
<div class="form-group">
<input type="text" class="form-control datepicker" placeholder="Date Of Expiry *" />
</div>
</div>
<div class="col-12 col-md-3">
<div class="form-group">
<select class="form-control" required="required">
<option>How did you find us</option>
<option>Friends</option>
<option>Family</option>
<option>Online</option>
<option>Travel Blog</option>
<option>Trip Advisor</option>
<option>Others</option>
</select>
</div>
</div>
<div class="col-12">
<div class="form-group">
<textarea class="form-control" placeholder="Emergency Contact * "></textarea>
</div>
</div>
</div>
<div class="col-12">
<p>Note: Please kindly note that you should be covered for, I- medical expenses, II- emergency air ambulance & III- Trip cancellation to plan this trip.</p>
</div>
<div class="col-12">
<div class="form-group">
<button type="submit" class="btn btn-sample3">Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<?php include("layouts/footer.php"); ?>
Result i want
Result i got

Answer 1

Your code is not well formatted, you are using col- inside col- without the use of row. You need to have something like that
<div class="container" >
<div class="row">
<div class="col-12">
</div>
</div>
</div>
and to have nested row use this :
<div class="container" >
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-12">
</div>
</div>
</div>
</div>
</div>
refer to the documentation :
https://getbootstrap.com/docs/4.0/layout/grid/#nesting