How to use responsive features of bootstrap 2.0

Question

I\'m using bootstrap 2.0 from twitter and unsure how to make it responsive.

• How can I remove elements when in mobile/small screen mode?
• How can I replace

Answer 1

I've been playing with the responsive parts of bootstrap for the last few days, take a look at /less/responsive.less to get an idea of how you can utilize the responsive features of bootstrap.

You basically look at the browser's width/height to determine which css properties to apply to the page. So, for example if you want to change h2 when the user is using a smaller device, you would do something like this:

@media (max-width: 480px) {
    h2 { font-size: 15px; }
}

You can do this with any style you want to affect when the size of the screen changes.

You can replace some elements by utilizing css replacement methods and then just have different styles affect things at different widths. Or you could use jquery or maybe response.js to do it. I'm still playing with this part of it.

Answer 2

Hiding Elements

You can hide elements with:

display: none;
visibility: hidden;

Hopefully you're using LESS or SASS so you can just specify:

@mixin hidden {
  display: none;
  visibility: hidden;
}

And then easily mix it in when necessary:

footer {
  @include hidden;
}

Just apply them to any selector in the relevant media query. Also, understand that media queries cascade onto smaller media queries. If you hide an element in a wide media query (tablet sized), then the element will remain hidden as the website shrinks.

Replacing Images

Bootstrap doesn't offer image resizing as the screen shrinks, but you can manually change the dimensions of images with CSS in media queries.

But a particular solution I like is from this blog post: http://unstoppablerobotninja.com/entry/fluid-images/

/* You could instead use ".flexible" and give class="flexible" only to 
   images you want to have this property */
img { 
  max-width: 100%;
}

Now images will only appear in their full dimensions if they don't exceed their parent container, but they'll shrink fluidly as their parent element (like the <div> they're in) shrinks.

Here's a demo: http://unstoppablerobotninja.com/demos/resize/

To actually replace images, you could swap the background image with CSS. If .logo has background: url("logo.png");, then you can just specify a new background image in a media query with .logo { background: url("small-logo.png");

Change h2 to h5

If this is because you want to change the size of the heading, don't do this. H2 has semantic value: It's not as important as H1 and more important than H3.

Instead, just specify new sizes for your h1-h6 elements in media queries as your website gets smaller.

@media (max-width: 480px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 80%;
  }
}

Answer 3

I think bootstrap has built-in features for this (in responsive-utilities.less):

<a href="#">
  <span class="visible-desktop">Click here to get more information</span>
  <span class="visible-tablet">More information</span>
  <span class="visible-phone">Info</span>
</a>

Answer 4

As to your first question - I'm not sure if this was available when you asked, but Bootstrap has classes "hidden-phone", "visible-desktop" etc to handle hiding of elements on different sized screens. Just add the .hidden-phone class to an element and it will disappear on screens smaller than 768px wide.

EDIT

After the release of bootstrap 3, the 2.3.2 documentation is now at:

http://getbootstrap.com/2.3.2/scaffolding.html#responsive

The new 3.x documentation is at:

http://getbootstrap.com/css/#responsive-utilities

Answer 5

For responsive images you could have

.responsive-image { max-width:100%; height:auto; }

and you could use this as

<img src="testimage.jpg" border="0" alt="blank image" class="responsive-image">

For responsive navigation

Use tinynav https://github.com/viljamis/TinyNav.js

This converts <ul> and <ol> navigation to a select box for small screens.