I need assistance with making my bootstrap grid responsive for multiple input search filters on mobile devices. Currently, the layout is not showing correctly on mobile phones.
On desktop, the output looks fine:
https://i.stack.imgur.com/bKPUv.png
However, on mobile devices, it needs to be made responsive:
https://i.stack.imgur.com/kfNkB.png
Below is the code snippet:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e88a87879c9b9c9a8998a8dcc6ddc6db">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="46242929323532342736067268736875">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<section class="section">
<div class="row">
<div class="col-md-12">
<form action="" method="post">
<section class="example">
<div class="row form-group">
<div class="col-2">
<label class="control-label">Date of Surgery</label>
<input type="date" name="date_of_surgery" class="form-control boxed">
</div>
<div class="col-2">
<label class="control-label">Hospital</label>
<input type="text" name="hospital" class="form-control" placeholder="Hospital name">
</div>
<div class="col-2">
<label class="control-label">Follow Up(from)</label>
<input type="date" name="date_from" class="form-control">
</div>
<div class="col-2">
<label class="control-label">To</label>
<input type="date" name="date_to" class="form-control">
</div>
<div class="col-2">
<label class="control-label">Diagnosis</label>
<input type="text" name="diagnosis" class="form-control">
</div>
<div class="col-2">
<label class="control-label">Surgery</label>
<input type="text" name="surgery" class="form-control">
</div>
</div>
</section>
<section class="example">
<div class="row form-group">
<div class="col-2">
<label class="control-label">Surgeon</label>
<input type="text" name="surgeon" class="form-control boxed" placeholder="Surgeon's Name">
</div>
<div class="col-2">
<label class="control-label">Assistant</label>
<input type="text" name="assistant" class="form-control" placeholder="Assistant's name">
</div>
<div class="col-2">
<label class="control-label">Anaesthetist</label>
<input type="text" name="anaesthetist" class="form-control" placeholder="Anaesthetist's name">
</div>
<div class="col-2">
<label class="control-label">Age (from)</label>
<input type="number" name="age_from" class="form-control" placeholder="Age From">
</div>
<div class="col-2">
<label class="control-label">To</label>
<input type="number" name="age_to" class="form-control" placeholder="Age To">
</div>
<div class="col-2">
<label for="sex" class="control-label">Sex</label>
<select name="sex" class="form-control">
<option selected="true" disabled="disabled">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
</div>
</div><br>
<div class="col-12">
<button type="submit" value="Search" name="search" class="btn btn-primary btn-lg btn-block"><li class="fa fa-search" area-hidden="true"></li> Search </button>
</div>
</form>
</section>