<p dir="auto">Fixing <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="9420599" data-permission-text="Title is private" data-url="https://github.com/twbs/bootstrap/issues/6339" data-hovercard-type="issue" data-hovercard-url="/twbs/bootstrap/issues/6339/hovercard" href="https://github.com/twbs/bootstrap/issues/6339">#6339</a>, the <code class="notranslate">!important</code> flag was added for <code class="notranslate">.hide</code> class.</p>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".hide { display: none !important; }"><pre class="notranslate">.<span class="pl-c1">hide</span> { <span class="pl-c1">display</span><span class="pl-kos">:</span> none <span class="pl-k">!important</span>; }</pre></div>
<p dir="auto">This breaks the utility of <code class="notranslate">.show()</code> jQuery function that adds <code class="notranslate">style="display: block"</code> attribute to the selected elements, because <code class="notranslate">!important</code> is stronger than <code class="notranslate">style</code> attribute. I created a <a href="http://jsfiddle.net/f7QR7/" rel="nofollow"><strong>JSFIDDLE</strong></a> that demonstrates this.</p>
<p dir="auto">While <a href="http://goo.gl/ryTyjq" rel="nofollow">the <code class="notranslate">!important</code> flag cannot be removed from CSS only</a> it's better to remove it from Bootstrap CSS and if the programmer wants to add it just add a new row in a CSS file.</p>
<p dir="auto">I think this is lazy implementation and it breaks when using <code class="notranslate">$(elem).show()</code> or <code class="notranslate">$(elem).hide()</code> using jQuery since the hide class get more importance since the badly (IMO) use of <code class="notranslate">!important</code>.</p>
<p dir="auto">I think BT should not declare this so generics classes with !important, it makes difficult to customize. I don't like the idea of having another class for doing display: none because BT uses !important.</p>
<p dir="auto">In my opinion, having a rule like : <code class="notranslate">.hide { btn&amp;, ul li&amp;, etc.. { display:none; }}</code> isn't much work and won't break anything. also footprint shouldn't increase a lot since the .hide pattern will be greatly gzipped.</p>
<p dir="auto">right now, having a <code class="notranslate">&lt;div id="someId" class="hide"&gt;&lt;/div&gt;</code> will break <code class="notranslate">$('#someId').show()</code> function of jQuery.</p>