Getting Bootstrap to work on Windows Phone 8

There are a couple of websites I manage that use Twitter Bootstrap*. These websites are fully responsive and work well on all devices. Or actually, almost all devices. The wrapping of columns in a container on a Windows Phone doesn’t work the way you’d want it out of the box. Windows Phone interprets device-width as the actual resolution size. Other mobile browsers use what the manufacturer (or browser vendor) has decided is the optimal viewport width.

To fix this issue, follow these steps:

  1. Add this line to use –ms-viewport in your CSS file
    @-ms-viewport{
        width: device-width;
    }
  2. Add this line to the head tag of your HTML page (it’s probably already there since you’re using Bootstrap)
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  3. Add this JavaScript function as the first script in the head tag (because of a timing issue it won’t work if it isn’t the first script)
    (function() {
        if ("-ms-user-select" in document.documentElement.style && 
            navigator.userAgent.match(/IEMobile\/10\.0/)) {
            var msViewportStyle = document.createElement("style");
            msViewportStyle.appendChild(
                document.createTextNode("@-ms-viewport{width:auto!important}")
            );
            document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
        }
    })();

I found this solution over at Matt Stow’s blog ‘Firewoiks’. You can find the original article here.

Hope this helps.

* The Bootstrap project is no longer under the Twitter brand.

Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world. – about Bootstrap

How to add Next and Previous buttons to Twitter Bootstrap tabs

Just a quickie today: when working with Twitter Bootstrap tabs, like I am in my ASP.NET MVC 4 project, you might want to add Next and Previous buttons on the tabs to create something of a Wizard. Here’sa step by step overview of how I did this:

Add an ID to all the ListItem elements that are used for the tab navigation. For instance:

<ul class="nav nav-tabs" id="myTab">
    <li><a href="#example" data-toggle="tab" id="xmpl">Example</a></li>
    ...
</ul>

Add a button you would like to use to activate the Example tab

In the onclick, call the ShowTab JavaScript function with the id of the ListItem for the Example tab (which is ‘xmpl’ in this example)

The ShowTab function is simple:

function ShowTab(tabname) { 
    $('#' + tabname).tab('show'); 
}

Hope this helps