twitter Bootstrap site is non responsive on phones and tablets


This is more of a question of whether you are using correct meta, styles and javascript lib or not on your pages.

Generally nowadays you will use CSS frameworks like Bootstrap and rely on them for responsiveness of your pages.

Lets see what’s bare minimum requirement for your pages to work and look good if you are solely building your pages with twitter bootstrap


You should be including the responsive CSS stylesheet provided with bootstrap

and then you should include jQuery and bootstrap.js files on your page before the body end tag as shown below

Don’t forget to add viewport meta tag in your head element as shown below

So the bare minimum HTML template for twitter bootstrap is shown below


In addition to above you can also put a mobile friendly icons links as shown below


so the final template will be

The above should also be included inside the head element.

Now when you try to view your site on your iPhone or Android phone you will see your site behaving properly layout wise. Always try to use bootstrap grid system for column based layouts.



If this post needs any correction please let me know by leaving your comments.

I hope this helps




Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.