I have been experimenting with different methods like col-xs-6 for the first child, but I can't seem to get it right. How can I achieve this layout using only Bootstrap?
Despite trying col-xs-6, I still haven't been able to place these divs next to each other as desired. Any tips on how to make it work within Bootstrap?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc9e9393888f888e9d8cbcc9d2ced2cf">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="container-md bg-danger center-block ">
<form>
<div class="col">
<div class="text-center">
<label for="job-name">Type job name</label><br>
<input type="text" class="form-control-lg border-success text-center rounded-circle " id="job-name " rows="3" placeholder="Job-name">
</div>
<div>
<label for="first-name">Type first name</label><br>
<input type="text" class="border-dark form-control-lg-mb2 mt-2 ml-2 text-center rounded-right" id="first-name" rows="3" placeholder="first Name" required><br>
</div>
<div class="align-self-right">
<label for="last-name">Type last name</label><br>
<input type="text" class="border-dark form-control-lg-mb2 ml-2 text-center rounded-right" id="last-name" rows="3" placeholder="Enter your last Name" required><br>
</div>
<div class="align-self-right">
<label for="last-name">Type Phone number</label><br>
<input type="text" class="border-dark form-control-lg-mb2 ml-2 rounded-right" id="last-name" rows="3" placeholder="Enter your Number"><br>
</div>
<div class="align-self-right">
<label for="last-name">Type Email</label><br>
<input type="text" class="border-dark form-control-lg-mb2 ml-2 rounded-right" id="last-name" rows="3" placeholder="Enter your Email"><br>
</div>
<div class="align-self-right">
<label for="last-name"> Age</label><br>
<input type="date" class="border-dark form-control-lg-mb2 ml-2 rounded-right" id="last-name" rows="3" placeholder="Enter your last Name"><br>
</div>
</div>
<div class="col">
<div class="text-right">
<label for="last-name"> Age</label><br>
<input type="date" class="border-dark form-control-lg-mb2 ml-2 rounded-right" id="last-name" rows="3" placeholder="Enter your last Name"><br>
</div>
</div>
</form>
</div>
</div>
</div>