title: Applying Bootstrap grid for inline elements
body: <p>I have a heading tag with a secondary subtitle like this:
  <a href="https://i.stack.imgur.com/p9SKW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p9SKW.png" alt="enter image description here" /></a></p>
  <pre class="lang-html prettyprint-override"><code>&lt;h3&gt;
    Fancy display heading
    &lt;small class=&quot;text-muted&quot;&gt;With faded secondary text&lt;/small&gt;
  &lt;/h3&gt;
  </code></pre>
  <p>Is there a way to apply the Bootstrap grid system with column spacings for these inline elements, so that for small screens, the subtitle is on a different line?</p>
  <p><a href="https://i.stack.imgur.com/DYG6r.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DYG6r.png" alt="enter image description here" /></a></p>
  <p>I could only think to split the h1 into two columns and apply column classes to control the layout:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-xs-12 col-md-4 col-lg-4&quot;&gt;
      &lt;h1&gt;Fancy display heading&lt;/h1&gt;
     &lt;/div&gt;
    &lt;div class=&quot;col-xs-12 col-md-8 col-lg-8&quot;&gt;
      &lt;h1&gt;&lt;small class=&quot;text-muted&quot;&gt;With faded secondary text&lt;/small&gt;&lt;/h1&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>But there are now two heading tags and too much negative space between them.</p>