While using bootstrap 4 to develop a website, I encountered an issue where my columns were not floating automatically as expected. I'm not sure if this is a Bootstrap 4 problem or if I am missing something. I know custom CSS can solve the issue, but I feel like there's something I'm overlooking. Can someone 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>
... // Rest of the form elements
<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"); ?>
Desired Result: https://i.sstatic.net/j31p1.png
Actual Result: https://i.sstatic.net/UVPsh.png