CODEWITHSUNDEEP
twitter-bootstrap
Mr_Pop
Mr_Pop

Reputation: 41

Responsive design with Twitter bootstrap

I have implemented responsive design using twitter bootstrap for my site. The collapsing nav bar works well on phones but not on tablets and ipads. Basically i would like the collasible nav to automatically be implemented on a tablet or ipad. i'm finding the bootstrap documentation a little confusing. can anyone offer some guidance please.

Upvotes: 0

Views: 717

Answers (1)

nickhar
nickhar

Reputation: 20833

Bootstrap doesn't work by device, it uses screen widths (via CSS media queries) to collapse the navbar at particular widths. So the only way to enable it by default on the iPad is to make sure it collapses at or above the screen width of the iPad (768px in portrait mode).

I've done the same in the past, and on several occasions ended up editing the @media queries that form part of bootstrap-responsive.css to get it collapsing for tablets at more suitable widths. Eg:

@media (min-width: 768px) and (max-width: 979px) {

As detailed here, a more progressive method is to customise bootstrap to suit your needs and use custom variables - alter the @navbarCollapseWidth variable listed on the page, but you might prefer to edit your width's manually...

On a side note, it's probably worth looking at the screen-widths for various popular tablets and devices. This may be of help: Media Queries: How to target desktop, tablet and mobile?

Upvotes: 3

Related Questions