title: Bootstrap 4 column layout alignment issue - nested columns wrap
body: <p>I have written the below column layout in Bootstrap 4. It is not aligned properly. The last of the nested columns breaks to a new line.</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-sm-3"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-sm-4"&gt;
            &lt;label class="col-form-label custom-label" for="idNo"&gt;Lable Name&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-1"&gt;
            &lt;label class="col-form-label"&gt;:&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-7"&gt;
            &lt;label class="col-form-label"&gt;Label Value&lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-9"&gt;&lt;/div&gt;
    &lt;/div&gt;[enter image description here][1]
  </code></pre>