title: Bootstrap 6 columns Responsive
body: <p>I want to have 6 columns responsive, I create this html but is not so good, maybe someone can give me the correct structure and css. The issue here is when I try to resize the window the icon and text is not resize it.</p>
  
  <h3>HTML</h3>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="header-block col-xs-12"&gt;
        &lt;div class="block1 col-xs-2"&gt;
          &lt;a href="{{store%20direct_url="&gt;&lt;span&gt;&lt;strong&gt;100% forn&amp;oslash;yd&lt;/strong&gt;V&amp;aring;rt m&amp;aring;l!&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="block2 col-xs-2"&gt;
          &lt;a href="{{store%20direct_url="&gt;&lt;span&gt;&lt;strong&gt;Rask levering&lt;/strong&gt;stort lager!&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="block3 col-xs-2"&gt;
          &lt;a href="{{store%20direct_url="&gt;&lt;span&gt;&lt;strong&gt;Serviceverksted&lt;/strong&gt;Minimal driftstans!&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="block4 col-xs-2"&gt;
          &lt;a href="{{store%20direct_url="&gt;&lt;span&gt;&lt;strong&gt;Kataloger&lt;/strong&gt;Se våre produkter!&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="block6 col-xs-2"&gt;
          &lt;a href="{{store%20direct_url="&gt;&lt;span&gt;&lt;strong&gt;Finansiering&lt;/strong&gt;Fleksible løsninger!&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="block5 col-xs-2"&gt;
          &lt;a href="https://www.facebook.com/diaproff/" target="_blank"&gt;&lt;span&gt;&lt;strong&gt;Hold kontakten&lt;/strong&gt;Følg oss på facebook!&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h3>CSS:</h3>
  
  <pre><code>.header-block &gt; div {
    float: left;
    position: relative;
    margin-right: 10px;
    padding: 5px 10px;
    max-width: 224px;
  }
  .header-block span {
    display: inline-block;
    font-size: 16px;
    line-height: 20px;
    text-transform: uppercase;
    padding-left: 48px;
    color: #262626;
  }
  .header-block strong {
    display: block;
  }
  .header-block &gt; div:before {
    font-size: 42px;
    line-height: 42px;
    color: #faa641;
    position: absolute;
    left: 10px;
    top: 5px;
  }
  .header-block .block1:before {
    content: '\f087';
  }
  .header-block .block2:before {
    content: '\f0d1';
  }
  .header-block .block3:before {
    content: '\f021';
  }
  .header-block .block4:before {
    content: '\f07c';
  }
  .header-block .block5:before {
    content: '\f082';
  }
  .header-block .block6:before {
    content: '\f0d6';
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/UyKMR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UyKMR.png" alt="enter image description here"></a></p>