Label size depending on container width in CSS/Bootstrap
<p>I want to have 2 rows of labels on all devices (block 2 in image). There are a few requirements:</p>

<ul>
<li>First row has 4 labels</li>
<li>Second row has 5 labels</li>
<li>The first 3 labels (<code>Demo Topic Text 1</code>, <code>Demo Topic Text</code> 2, <code>Demo Topic Text 3</code>) should be 1.5 times bigger than the last 3 labels (<code>Demo Topic Text 7</code>, <code>Demo Topic Text 8</code>, <code>Demo Topic Text 9</code>).</li>
<li>Labels <code>Demo Topic Text 3</code>, <code>Demo Topic Text 4</code> and <code>Demo Topic Text 5</code> should be 1.25 times bigger than <code>Demo Topic Text 7</code>, <code>Demo Topic Text 8</code>, <code>Demo Topic Text 9.</code></li>
</ul>

<p>I don't know how to fix this for all devices, using CSS/Bootstrap. </p>

<p><a href="https://i.stack.imgur.com/7FExn.png" rel="nofollow"><img src="https://i.stack.imgur.com/7FExn.png" alt="enter image description here"></a> </p>

<p><strong>HTML code:</strong></p>

<pre><code>  &lt;div class="container"&gt;
    &lt;div class="row" id="ho_intro_content"&gt;
      &lt;div class="col-xs-12"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-xs-12 text-center"&gt;
            &lt;h1&gt;Hello World!&lt;/h1&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-xs-12 text-center"&gt;
            &lt;div class="ho_in_featured_topics"&gt;
              &lt;span class="label huge"&gt;Demo Topic Text 1&lt;/span&gt;
              &lt;span class="label huge"&gt;Demo Topic Text 2&lt;/span&gt;
              &lt;span class="label huge"&gt;Demo Topic Text 3&lt;/span&gt;
              &lt;span class="label large"&gt;Demo Topic Text 4&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="ho_in_featured_topics"&gt;
              &lt;span class="label large"&gt;Demo Topic Text 5&lt;/span&gt;
              &lt;span class="label large"&gt;Demo Topic Text 6&lt;/span&gt;
              &lt;span class="label medium"&gt;Demo Topic Text 7&lt;/span&gt;
              &lt;span class="label medium"&gt;Demo Topic Text 8&lt;/span&gt;
              &lt;span class="label medium"&gt;Demo Topic Text 9&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-xs-12 text-center"&gt;           
            &lt;button type="button" class="btn btn-danger btn-lg" id="ho_in_click_me_button" aria-label="Click me!"&gt;Click me!&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
</code></pre>

<p><strong>CSS code:</strong></p>

<pre><code>.ho_in_featured_topics .label {
  background-color: #e8e8e8;
  color: #5e5e5e;
  font-weight: 400;
}
</code></pre>