Raderna nedan är uppbyggda av fyra olikfärgade kolumner. Så här ser koden ut för första raden:
<div class="col-xs-3 bg-success">xs</div>
<div class="col-xs-3 bg-info">sm</div>
<div class="col-xs-3 bg-warning">md</div>
<div class="col-xs-3 bg-danger">lg</div>
Nu lägger vi till hidden. Sitter du vid en större skärm, prova dra webbläsarfönstrets kant så att fönstret blir smalare och bredare och se vad som händer. Lägg märke till att det är olika fält som försvinner beroende på webbläsarfönstrets bredd.
<div class="col-xs-3 hidden-xs bg-success">.hidden-xs</div>
<div class="col-xs-3 hidden-sm bg-info">.hidden-sm</div>
<div class="col-xs-3 hidden-md bg-warning">.hidden-md</div>
<div class="col-xs-3 hidden-lg bg-danger">.hidden-lg</div>
På raden ovan var det hela elementet som försvann. Det går låta kolumnen vara kvar men låta innehållet försvinna också. Se nedan:
<div class="col-xs-3><p class="hidden-xs bg-success">.hidden-xs</p></div>
<div class="col-xs-3><p class="hidden-sm bg-info">.hidden-sm</p></div>
<div class="col-xs-3><p class="hidden-md bg-warning">.hidden-md</p></div>
<div class="col-xs-3><p class="hidden-lg bg-danger">.hidden-lg</p></div>
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
På samma sätt går det skapa element som bara syns vid vissa bredder på webbläsarfönster med classen .visible. Prova öka och minska bredden på webbläsarfönstret.
<div class="col-xs-3 visible-xs bg-success">.visible-xs</div>
<div class="col-xs-3 visible-sm bg-info">.visible-sm</div>
<div class="col-xs-3 visible-md bg-warning">.visible-md</div>
<div class="col-xs-3 visible-lg bg-danger">.visible-lg</div>
Det kan vara praktiskt att kunna variera vilka kolumner som syns i kombination med olika bredd beroende på skärmens eller webbläsarfönstrets bredd.
Här är ett exempel där alla tre kolumner syns med 4/12 bredd om skärmen är bredare än 768 pixlar (sm, md, lg). Är skärmen smalare (xs) sträcker sig den gröna kolumnen över 8/12 och den gula döljs.
<div class="col-xs-8 col-sm-4 bg-success">.col-xs-8 .col-sm-4</div>
<div class="hidden-xs col-sm-4 bg-warning">.hidden-xs .col-sm-4</div>
<div class="col-xs-4 bg-danger">.col-xs-4</div>
På skärmar som är bredare än 768 pixlar (sm, md, lg) syns tre lika breda kolumner. På skärmar som är smalare än 768 pixlar (xs) delas den gula kolumnen i en gul och en blå smalare kolumn.
<div class="col-xs-4 bg-success">.col-xs-4</div>
<div class="col-sm-4 col-xs-2 bg-warning">.col-sm-4 .col-xs-2</div>
<div class="col-xs-2 visible-xs bg-primary">.col-xs-2 .visible-xs</div>
<div class="col-xs-4 bg-danger">.col-xs-4</div>
På skärmar som är minst 1200 pixlar breda (lg) syns tre kolumner. Om skärmen är smalare syns bara två.
<div class="col-lg-4 col-xs-6 bg-success">.col-lg-4 .col-xs-6</div>
<div class="col-lg-4 visible-lg bg-warning">.col-lg-4 .visible-lg</div>
<div class="col-lg-4 col-xs-6 bg-danger">.col-lg-4 .col-xs-6</div>