Sorry, the BS grid isn't the best option for your use case.
Instead of using .row
, you can achieve the desired behavior by using a flex container with wrapping toggled at the medium breakpoint: .d-flex.flex-wrap.flex-md-nowrap
.
In the following code snippet, I eliminated unnecessary .col-*
wrappers, added .flex-shrink-0
to all .form-label
elements to prevent them from wrapping, included .align-items-baseline
on the flex container to align label text with input text, and applied .me-1
to items in the row for minimal spacing.
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b5954544f484f495a4b7b0e150a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<div class="container ms-1 me-1">
<div class="jumbotron bg-danger">
</div>
<h2>Product Registration</h2>
<form method="post">
<div class="row">
<div class="col-md-1 mt-3 align-self-center d-flex justify-content-start">
<label for="type" class="form-label">Type:</label>
</div>
<div class="col-md-2 mt-3">
<select class="form-select" aria-label="type" name="type" id="type">
<option value="">Select type</option>
<option value="1">Roll</option>
<option value="2">Bag</option>
<option value="3">Cut Sheet</option>
</select>
</div>
<div class="col-md-1 mt-3 align-self-center d-flex justify-content-start">
<label for="config" class="form-label">Configuration:</label>
</div>
<div class="col-md-3 mt-3">
<select class="form-select" aria-label="config" name="config" id="config">
<option value="">Select Configuration</option>
<option value="1"></option>
<option value="2">Tubular</option>
<option value="3">Single Sheet</option>
<option value="4">Double Sheet</option>
<option value="5">Ref. 1 Side</option>
<option value="6">Bubble Wrap</option>
<option value="7">Embossed</option>
</select>
</div>
...
</div>
<div class="d-flex flex-wrap flex-md-nowrap align-items-baseline">
<label for="perc-mp1" class="form-label flex-shrink-0 mt-3 me-1">% Raw Material 1:</label>
<input type="text" class="form-control mt-3 me-1" aria-label="perc-mp1" name="perc-mp1" id="perc-mp1" disabled>
...other entries...
</div>
<div class="mt-4">
<button type="button" class="btn btn-primary mt-3 me-1" onclick="validateBlends()">Register</button>
</div>
</form>
</div>