title: Bootstrap Label For Responsiveness
body: <p>I searched around, and I could have missed something, but I'm trying to get my labels, on an input form, to dynamically change margin for alignment using Bootstrap 4.5.  My issue is that I have a form with four  input blocks, and a button, across, in columns (in a row), that are:</p>
  <pre><code>col-md-3 col-sm-12
  col-md-3 col-sm-12
  col-md-2 col-sm-12
  col-md-2 col-sm-12
  col-md-2 col-sm-12
  </code></pre>
  <p>So that if it's a medium screen size or bigger, each column takes up the appropriate amount, or if it's small, they show up in rows, one after the other.  My problem is that I have a &quot;label for&quot; control above each input, and as the size shrinks between medium and small, the label moves to two lines and then throws off all the alignment until it is in the small view.</p>
  <p>Here is a sample HTML of one of the rows:</p>
  <pre><code>&lt;div class=&quot;row&quot; id=&quot;rowSubTask0&quot;&gt;
      &lt;div class=&quot;col-md-3 col-sm-12&quot;&gt;&lt;label for=&quot;STName0&quot;&gt;Sub Task Name:&lt;/label&gt;&lt;input class=&quot;form-control&quot; type=&quot;text&quot; id=&quot;STName0&quot; placeholder=&quot;Name&quot; name=&quot;STName0&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;col-md-3 col-sm-12&quot;&gt;&lt;label for=&quot;STDesc0&quot;&gt;Sub Task Description:&lt;/label&gt;&lt;input class=&quot;form-control&quot; type=&quot;text&quot; id=&quot;STDesc0&quot; placeholder=&quot;Description&quot; name=&quot;STDesc0&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;col-md-2 col-sm-12&quot;&gt;&lt;label for=&quot;STDefaultHours0&quot;&gt;Expected Hours:&lt;/label&gt;&lt;input class=&quot;form-control&quot; type=&quot;number&quot; id=&quot;STDefaultHours0&quot; placeholder=&quot;Default Hours&quot; name=&quot;STDefaultHours0&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;col-md-2 col-sm-12&quot;&gt;&lt;label for=&quot;STDefaultPrice0&quot;&gt;Expected Price (Optional):&lt;/label&gt;&lt;input class=&quot;form-control&quot; type=&quot;number&quot; step=&quot;0.01&quot; id=&quot;STDefaultPrice0&quot; placeholder=&quot;Default Price&quot; name=&quot;STDefaultPrice0&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;col-md-2 col-sm-12  align-self-end&quot;&gt;&lt;a href=&quot;javascript:void(0);&quot; id=&quot;btnRemoveSub0&quot; role=&quot;button&quot; onclick=&quot;RemoveSubTask('rowSubTask0', 'Pipeline');&quot;&gt;&lt;i class=&quot;mdi mdi-minus-circle text-danger&quot;&gt;&lt;/i&gt; Delete&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I'm not sure exactly how to fix this?</p>
  <p>See images for a better explanation:
  Shows How it looks at medium, large, xl, etc, which is how I want it to look:
  <a href="https://i.stack.imgur.com/v4WFg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/v4WFg.png" alt="Desired behavior at medium or larger" /></a></p>
  <p>Shows how the label on the right word wraps and causes spacing on the others to look funny somewhere between medium and small:
  <a href="https://i.stack.imgur.com/Uhfp0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Uhfp0.png" alt="Undesired label behavior once window size shrinks a bit" /></a></p>
  <p>Shows what it looks like, as desired, in the small view:
  <a href="https://i.stack.imgur.com/sPeqG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sPeqG.png" alt="View on the small screen" /></a></p>
  <p>Any help is greatly appreciated.</p>
  <p>Thanks in advance.</p>