title: Bootstrap row class not propagating down to components in Angular
body: <p>I have a number of controls declared like this.</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-sm-12"&gt;
      &lt;div&gt;Caption&lt;/div&gt;
      &lt;input type="text" class="form-control"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Trying to refactor my code, I introduced a component to encapsulate this particular behavior.</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;app-textbox [caption]="'Caption'"&gt;&lt;/app-textbox&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The markup for the component is just a copy of the original code.</p>
  
  <pre><code>&lt;div class="col-sm-12"&gt;
  &lt;!-- &lt;div style="width:100%;"&gt; --&gt;
  &lt;!-- &lt;div class=""&gt; --&gt;
    &lt;div&gt;{{data?.caption}}&lt;/div&gt;
    &lt;input type="text" class="form-control"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem arising is with the class <em>row</em> seems not to propagate to the component. It spreads to the full width (as it's set to 12 <strong>but</strong> it's not the width of the component holding the class <em>row</em> - it's smaller). Analyzing the markup in the console of the browser, I can see that the only difference is that there's a tag for the custom control injected in the structure like this:</p>
  
  <blockquote>
    <p>div class="row"<br>
    -- app-textbox<br>
    -- -- div class="col-sm-12"<br>
    -- -- input</p>
  </blockquote>
  
  <p>while the "old-style" generates this:</p>
  
  <blockquote>
    <p>div class="row"<br>
    -- div class="col-sm-12"<br>
    -- input</p>
  </blockquote>
  
  <p>One way to handle it is to set the columns on the component in the main page like this.</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;app-textbox [caption]="'Caption'" class="col-sm-12"&gt;&lt;/app-input-text&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>There are, however, two issues that bother me with it making me feel reluctant to this approach. First one is that the component still gets a (very tiny) extra margin of 15px on each side relative to the enclosing component (all the item have it but the custom <em>app-textbox</em> gets it twice, probably due to encapsulation). The other issue is that this kind of defeats the purpose of the encapsulation.</p>
  
  <p>I've tried spreading the width of the components and setting different styles/classes to the input boxes etc. After a few hours, I realize that I'm at a loss.</p>
  
  <p>Is it possible to make the injected tag <em>app-textbox</em> spread fully in its parent?</p>