Reputation: 10627
I'm using a fluid Twitter Bootstrap layout for my design and am about to make it responsive. Consider a grid such as this:
<div class="row-fluid">
<div class="span4"></div>
<div class="span8"></div>
</div>
What is the best way to hide span4 and let span8 take up the entire width, to be used when the screen gets smaller?
Upvotes: 13
Views: 41975
Reputation: 5267
TLDR: Use the 2nd code snippet
Bootstrap is a mobile first framework so I'll explain from the smallest screen-size up. The layout is always 12 columns wide regardless of breakpoints/screen-size.
Starting from the smallest breakpoint (xs - extra small), the span4
is hidden and the span8
takes all of the width (all 12 columns)
<div class="row-fluid">
<div class="span4 hidden-xs"></div>
<div class="span8 col-xs-12"></div>
</div>
We are not quite done yet as we haven't defined behavior when the next breakpoint up is hit (sm/small/screen width is over 767px), so we'll make span4
take a third of the width (12 columns/3 = 4 columns) and the span8
will take the rest of the width (12-4= 8 columns)
<div class="row-fluid">
<div class="span4 hidden-xs col-sm-4"></div>
<div class="span8 col-xs-12 col-sm-8"></div>
</div>
The above assumes you wanted the change to happen on the change between the xs - sm breakpoints.
Further reading:
If you wanted the change between sm-md (md = medium) then I might use the visible-md class which will show the span4
on breakpoints medium and up (>992px)
<div class="row-fluid">
<div class="span4 visible-md col-md-4"></div>
<div class="span8 col-xs-12 col-md-8"></div>
</div>
Upvotes: 3
Reputation: 432
Write Like this
in phone device this div will hide<div class="span4 hidden-phone"></div>
and this div will show <div class="span8 visible-phone"></div>
Update
Previous Answer for Bootstrap 2.3
Now bootstrap 3 come in market..
so i update my answer for new user → bootstrap3
in phone device this div will hide<div class="col-md-4 hidden-xs"></div>
and this div will show <div class="col-xs-4 visible-xs"></div>
Upvotes: 3
Reputation: 1484
just:
<div class="row-fluid">
<div class="span4 hidden-desktop"></div>
<div class="span8"></div>
</div>
Upvotes: 0
Reputation: 1145
This would be the best option to keep it dynamic. In my example I have width set to 6 columns next to fluidGridColumnWidth
[class*="span"] {
width: 100%;
.row-fluid {
[class*="span"] {
width: (@fluidGridColumnWidth * 6) + (@fluidGridGutterWidth * (6 - 1)) - (.5 / @gridRowWidth * 100 * 1%);
float: left;
margin-left: @fluidGridGutterWidth;
&:first-child {
margin-left: 0;
}
}
}
}
Upvotes: 3
Reputation: 337
I came up with a small variation of that.
Add stack-tablet
class to a row-fluid
to make the spans stack on tablet width, not only on phone width (bootstrap default):
@media (max-width: 979px) {
.row-fluid.stack-tablet [class*="span"] {
width: 100%;
display: block;
float: none;
margin-left: 0;
}
}
Can be used together with the display- and hidden- classes.
Upvotes: 0
Reputation: 16569
If using bootstrap 2.2.1 you can:
Change the html to:
<div class="row-fluid">
<div class="span4 hidden-phone hidden-tablet"></div>
<div class="span8"></div>
</div>
Now add this to your css overrides:
@media (min-width: 768px) and (max-width: 979px)
{
[class*="span"],
.row-fluid [class*="span"] {
display: block;
float: none;
width: 100%;
margin-left: 0;
}
}
This will also work for any other span widths you have specified in your html.
the effect of these changes makes all span widths 100% causing the iPad to always use 1 column fluid mode in portrait mode.
Upvotes: 6
Reputation: 437
With bootstrap 2.0.2 and up you can:
Change the html to:
<div class="row-fluid">
<div class="span4 hidden-phone hidden-tablet"></div>
<div class="span8 span12-tablet"></div>
</div>
(I interpreted 'smaller' with tablet and phone sizes, use your own definitions for other sizes)
.hidden-phone and .hidden-tablet hide the span4 for smaller screens.
To reclaim that space and re-span the span8, add this to your css:
@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;
}
}
Upvotes: 24
Reputation: 4575
Using a media query with whatever min/max width set .span4
to display: none;
Then, add .span8
to the rule for .span12
for everything below whatever width you hide .span4
as all that work is already done for you by bootstrap, so no need to duplicate. It will look something like this:
@media (min-width: 320px){
.span12,
.span8 {
width: 300px;
}
}
(That last bit of code is just an example, but there will be something like it in bootstraps scaffolding.)
Hope that helps :)
EDIT:
This could work, I tested it using dev tools on the bootstrap site and it seemed to work. Again, in a media query:
@media (min-width: 320px){
#special .span4 {
display: none;
}
#special .span8 {
float: none;
width: auto;
}
}
Upvotes: 13