Responsive Bootstrap not Working on Mobile Devices

Bootstrap is viewport (Mobile Device) friendly Framework. During coding we don't know what we are missing results in serious problems. If your bootstrap is not working properly then do paste a line of code an make it work in all Devices.

Twitter Bootstrap is a responsive framework which divide your page into columns in order to be responsive. It work perfect in all platforms. e.g. Mobiles, Tablets, Macs, Desktop including mobile applications too. Something friends ask me that responsive bootstrap and not working impossible. Yes it happens something let’s solve the issue together.

When creating my portfolio website i noticed it worked perfect in desktop/Laptop, but when i test it in mobile devices, discovered slight problem that bootstrap which is called responsive bootstrap is working unexpectedly wrong after some tried, tackle the problem which arises due to meta view port tag.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

All explain in bootstrap is well and good if you read the documentation properly. In bootstrap documentation¬† they also write about meta tags but some people neglect the part and can’t properly start from beginning, then stuck in many problems. View port meta used to control how HTML will be appear on different devices (mobile, tablets).

Look at websites which are not responsive in mobile devices due to meta missing.
Responsive Bootstrap Not WorkingViewport Meta:
This meta written like name= “view port” and the other one has two values, comma separated.
1. width = device-width
2. scaling = 1.0.
These are the two meta values to be include must in your head tag in order “Responsive Bootstrap” work properly in any platform either WordPress or Blogger or simple HTML. Because meta tells the browser it’s twitter bootstrap which is not worked correctly until you add view port meta. You can visit these two websites and both have missing viewport meta and it was causing problem i add and solve the problem creatively.

Meta tags are life saver for your website. If you want your scaling to be change or more small then you can change it to your desired value but carefully because changing from default 1.0 value to other cause more problems. Do it at your own risk but no risk try to be perfect.

Leave a Reply

Your email address will not be published. Required fields are marked *