Responsive css rules using bootstrap

css, responsive-design, twitter-bootstrap, twitter-bootstrap-3

Solution

The best way is to incorporate the classes of bootstrap in your code. Additionally use utility classes for showing and hiding content by device. They will hide or show div's at a given screen size with these classes:

.visible-phone   
.visible-tablet  
.visible-desktop 
.hidden-phone    
.hidden-tablet   
.hidden-desktop

(Phones 767px and below, Tablets 979px to 768px).

Update: this week things have changed, Bootstraps new version has different classes:

Old= .visible-phone new = .visible-sm

Old= .visible-tablet new = .visible-md

Old= .visible-desktop new = .visible-lg

Old= .hidden-phone new = .hidden-sm

Old= .hidden-tablet new = .hidden-md

Old= .hidden-desktop new = .hidden-lg

More changes are easily viewed at the migration guide

Update: the new classes starting with 'visible' have been deprecated in favor of classes that regulate the CSS display property. See bootstraps explanation

Problem

I would like some parts of my site to reduce in size on a mobile device. Is it possible to have these changes triggered by bootstrap, instead of manually adding responsive css rules based on page width? For example, by trial and error I figured out that bootstrap3 switches from fixed-width to variable width and collapsed `navbar` whenever the browser width is smaller than `767px`. I would like some other elements of my page to style simultaneously. Is there a natural/native way to have these changes triggered/inherited from bootstrap responsive rules, instead of manually adding ``` @media screen and (min-width: 767px) ```

Original source