Avisi Blog

Re-spanning bootstrap columns

Geschreven door Gert-Jan van de Streek | 01 October 2012

Bootstrap has a few utility classes for responsive design. Among those .hidden-tablet and .hidden-phone. While the documentation warns to use 'on a limited basis', they can be used for various creative purposes. One is in combination with the fluid grid.

Consider a grid like:

<div class="row-fluid">    
<div class="span4"></div>    
<div class="span8"></div>    
</div>

How can you hide span4 and let span8 take up the entire width, to be used when the screen gets smaller?

With bootstrap 2.0.2 we can use the .hidden-phone and .hidden-tablet utility classes to hide the span4 for smaller screens:

<div class="row-fluid">    
<div class="span4 hidden-phone hidden-tablet"></div>    
<div class="span8 span12-tablet"></div>    
</div>

Add a class span12-tablet next to the span8. Then add css to reclaim the space that was left by hiding the span4:

@media (max-width: 979px) {
.span12-tablet {
width: 91.48936170212765% !important;
*width: 91.43617021276594% !important;
}
}

If you happen to be using less you can use bootstrap's grid mixins:

.span12-tablet {
@media (max-width: 979px) {
#grid > .fluid > .span(12) !important;
}
}