<p dir="auto">Hi,</p>
<p dir="auto">Would you be interested in getting rid of Pixel measurements and taking a more flexible approach, using EM?</p>
<p dir="auto">For things like, for example Legend size, paddings for headings, alert blocks, buttons nav tabs. These things are more likely to be relative than absolute.</p>
<p dir="auto">Also, sizes of input controls, sizes or labels and many more things. All of them rely heavily on the base font size, and it will such an improvement to have all those things in a relative measurements (em) rather than absolute (px).</p>
<p dir="auto">Hello,</p>
<p dir="auto">I am fiddling a bit around with the responsive approach in Bootstrap. I feel that the way it is implemented is sometimes a bit static. Are there any plans or idea's (or am I not aware of the ability) to say something like "4 columns" on desktop size. "3 columns" on tablet size. And/or to say the sidebar for instance is just informative, it should be hidden when seeing the site on a mobile device.</p>
<p dir="auto">I know how I can do this myself, but I was wondering if this community had such a thing in the planning or you have idea's what the best way is to build it? Any feedback is welcome.</p>
<p dir="auto">I am creating something like this now.</p>
<p dir="auto">Example 1 (4 columns on desktop, 3 on tablet)</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div class=&quot;span3 portrait-span4&quot;&gt;one&lt;/div&gt;
&lt;div class=&quot;span3 portrait-span4&quot;&gt;two&lt;/div&gt;
&lt;div class=&quot;span3 portrait-span4&quot;&gt;three&lt;/div&gt;
&lt;div class=&quot;span3 portrait-span12&quot;&gt;four&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div class="span3 portrait-span4"&gt;one&lt;/div&gt;
&lt;div class="span3 portrait-span4"&gt;two&lt;/div&gt;
&lt;div class="span3 portrait-span4"&gt;three&lt;/div&gt;
&lt;div class="span3 portrait-span12"&gt;four&lt;/div&gt;
</code></pre></div>
<p dir="auto">Example 2 (2 columns on desktop, 1 on tablet)</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div class=&quot;span8 portrait-span12&quot;&gt;main&lt;/div&gt;
&lt;div class=&quot;span4 portrait-hidden&quot;&gt;side&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div class="span8 portrait-span12"&gt;main&lt;/div&gt;
&lt;div class="span4 portrait-hidden"&gt;side&lt;/div&gt;
</code></pre></div>
<p dir="auto">CSS</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@media (min-width: 768px) and (max-width: 980px) {
    .portrait-hidden{
        display:none;
    }
       .portrait-span12, .portrait-container {
        width: 724px;
    }
       .portrait-span4 {
        width: 228px;
    }
"><pre class="notranslate"><code class="notranslate">@media (min-width: 768px) and (max-width: 980px) {
    .portrait-hidden{
        display:none;
    }
       .portrait-span12, .portrait-container {
        width: 724px;
    }
       .portrait-span4 {
        width: 228px;
    }

</code></pre></div>