Projects > Twitter.Bootstrap.WindowsPhone

The goal of this package is to allow Twitter Bootstrap 3 framework to work correctly on Windows Phone. I tested it on Windows Phone 8 (Nokia 920) and Windows Phone 7.5 (Nokia 900)

Based on the work of Tim Kadlec with his authorization.

Installing the package, will install / update Twitter.Bootstrap version 3.0 if needed.

Install-Package Twitter.Bootstrap.WindowsPhone

If you are using ASP.NET MVC 4 or 5, the only file you have to modify is App_Start\BundleConfig.cs

  1. Add the second line (bootstrap-windows-phone.js) to the bootstrap bundle.

    bundles.Add(new ScriptBundle("~/Scripts/bootstrap").Include("~/Scripts/bootstrap.js",
                                                                "~/Scripts/bootstrap-windows-phone.js"));
    
  2. For the CSS part: the Bootstrap 3 package creates a specific 'bootstrap' folder inside Content. The WindowsPhone package also adds its files in there. If you already have ~Content/bootstrap/*.css you have nothing more to do.

    bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/*.css", 
                                                         "~/Content/bootstrap/*.css",
                                                         "~/Content/themes/base/*.css"));
    

If you don't use the ASP.NET MVC 4 template, the How-To can be resumed like this :

  1. Be sure that the Bootstrap framework works properly first,
  2. Load the Content/bootstrap/bootstrap-windows-phone.min.css file in the header of your MasterPage / _Layout.cshtml page.
  3. Load the Scripts/bootstrap-windows-phone.min.js file at the bottom, after bootstrap.min.js

The result should be something like this :

<html>
  <head>
    [...]
    <link href="Content/bootstrap/bootstrap.min.css" media="all" rel="stylesheet" type="text/css" />
    <link href="Content/bootstrap/bootstrap.theme.min.css" media="all" rel="stylesheet" type="text/css" />
    <link href="Content/bootstrap/bootstrap-windows-phone.min.css" media="all" rel="stylesheet" type="text/css" />
    [...]
  </head>
  <body>
    [...]
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/bootstrap-windows-phone.min.js"></script>
  </body>
</html>

To see the expected result, be sure that your Windows Phone browser settings are correctly set to Mobile version.

Change log

  • 0.8.0 September 15th, 2013
    • Complete publication with documentation
  • 0.1.1 September 3rd, 2013
    • Moving style sheet files to bootstrap folder
  • 0.1.0 September 3rd, 2013
    • First release
blog comments powered by Disqus