description:'<p>You can use visibility helper classes to hide elements for all users (<code>.hidden</code>) or for users not on screen readers (<code>.visually-hidden</code>). There are also responsive visibility helpers provided, for hiding or visually hiding content only for specific screen sizes (<code>.hidden-sm</code>, <code>.hidden-md</code>, <code>.hidden-lg</code> and <code>.visually-hidden-sm</code>, <code>.visually-hidden-md</code> and <code>.visually-hidden-lg</code> respectively).</p>',
example:'',
samples:[`<pre><span class="code-line"><span class="highlight-a"><p</span> <span class="highlight-b">class</span>=<span class="highlight-c">"hidden"</span><span class="highlight-a">></span>Not visible for any users.<span class="highlight-a"></p></span></span>
'Visibility helpers use <code>!important</code> declarations to override any other styles, so exercise caution when using them.',
'The specific breakpoints for small, medium and large screen sizes are as follows:<ul><li>small: less than <code>768px</code> wide</li><li>medium: more than or equal to <code>768px</code> wide and less than <code>1280px</code> wide</li><li>large: <code>1280px</code> wide or more</li></ul>',
'Responsive visibility helper classes are independent, meaning that hiding or visually hiding an element in one screen size will not affect its visibility in any other screen size.'
],
customization:[],
modifiers:[],
dos:[
{
description:`You can apply multiple responsive visibility helpers on the same element.`,
sample:`<pre><span class="code-line"><span class="highlight-a"><p</span> <span class="highlight-b">class</span>=<span class="highlight-c">"hidden-sm hidden-md"</span><span class="highlight-a">></span>Not visible for users on screens under 1280px wide.<span class="highlight-a"></p></span></span></pre>`
}
],
donts:[
{
description:`Avoid combining <code>.hidden</code> and <code>.visually-hidden</code> or responsive helpers for the same screen size.`,
sample:`<pre><span class="code-line"><span class="highlight-a"><p</span> <span class="highlight-b">class</span>=<span class="highlight-c">"hidden visually-hidden"</span><span class="highlight-a">></span>Do not do this.<span class="highlight-a"></p></span></span></pre>`