title: 4 figures in a row using ionic 2 bootstrap
body: <p>Im trying to make a product gallery, using ionic 2 bootstrap and html figure element. The problem is, at the 4 product, using col width-25, it breaks into a new row.</p>
  
  <p>How can i make all the figures stay on the same line?</p>
  
  <pre><code>&lt;ion-grid&gt;
      &lt;ion-row responsive-sm&gt;
        &lt;ion-col width-25&gt;
          &lt;figure&gt;
            &lt;img class="adjust-caption-image" src="{{ products[0].src }}" /&gt;
            &lt;figcaption class="bg-lightgrey"&gt;
              &lt;b class="tiny-text"&gt;{{ products[0].productName }}&lt;/b&gt; &lt;br /&gt;
              &lt;div class="tiny-text font-darkgrey"&gt;&lt;b&gt;{{ products[0].supplierName }}&lt;/b&gt;&lt;/div&gt; &lt;br /&gt; R$
              &lt;div class="price-text"&gt;{{ products[0].price }}&lt;/div&gt;
            &lt;/figcaption&gt;
          &lt;/figure&gt;
        &lt;/ion-col&gt;
        &lt;ion-col width-25&gt;
          &lt;figure&gt;
            &lt;img class="adjust-caption-image" src="{{ products[0].src }}" /&gt;
            &lt;figcaption class="bg-lightgrey"&gt;
              &lt;b class="tiny-text"&gt;{{ products[0].productName }}&lt;/b&gt; &lt;br /&gt;
              &lt;div class="tiny-text font-darkgrey"&gt;&lt;b&gt;{{ products[0].supplierName }}&lt;/b&gt;&lt;/div&gt; &lt;br /&gt; R$
              &lt;div class="price-text"&gt;{{ products[0].price }}&lt;/div&gt;
            &lt;/figcaption&gt;
          &lt;/figure&gt;
        &lt;/ion-col&gt;
        &lt;ion-col width-25&gt;
          &lt;figure&gt;
            &lt;img class="adjust-caption-image" src="{{ products[0].src }}" /&gt;
            &lt;figcaption class="bg-lightgrey"&gt;
              &lt;b class="tiny-text"&gt;{{ products[0].productName }}&lt;/b&gt; &lt;br /&gt;
              &lt;div class="tiny-text font-darkgrey"&gt;&lt;b&gt;{{ products[0].supplierName }}&lt;/b&gt;&lt;/div&gt; &lt;br /&gt; R$
              &lt;div class="price-text"&gt;{{ products[0].price }}&lt;/div&gt;
            &lt;/figcaption&gt;
          &lt;/figure&gt;
        &lt;/ion-col&gt;
        &lt;ion-col width-25&gt;
          &lt;figure&gt;
            &lt;img class="adjust-caption-image" src="{{ products[0].src }}" /&gt;
            &lt;figcaption class="bg-lightgrey"&gt;
              &lt;b class="tiny-text"&gt;{{ products[0].productName }}&lt;/b&gt; &lt;br /&gt;
              &lt;div class="tiny-text font-darkgrey"&gt;&lt;b&gt;{{ products[0].supplierName }}&lt;/b&gt;&lt;/div&gt; &lt;br /&gt; R$
              &lt;div class="price-text"&gt;{{ products[0].price }}&lt;/div&gt;
            &lt;/figcaption&gt;
          &lt;/figure&gt;
        &lt;/ion-col&gt;
      &lt;/ion-row&gt;
    &lt;/ion-grid&gt;
  </code></pre>