Sitefinity - Twitter Bootstrap and HTML5 Boilerplate - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Sitefinity - Twitter Bootstrap and HTML5 Boilerplate

  • Sitefinity - Twitter Bootstrap and HTML5 Boilerplate
  • I am looking for blogs, forums, useful links, and advice moving forward with a Bootstrap or Boilerplate, combination, with Sitefinity 5.4

    Any advice or information appreciated

    Jochem Bokker's contributions seem to be the best place to start after some googling.

    Sitefinity 'bare minimum' styles & masterpage for use with Sitefinity v5 and Twitter Bootstrap v2.03 - Jochem Bokke
    Sitefinity v5 page layout templates using the Twitter Bootstrap grid columns - Michael Roper

    Twitter Bootstrap

    Sitefinity Boilerplate - Jochem Bokke

    HTML5 Boilerplate

    Sitefinity Thread

    Are there any others I am missing?





  • How does going down this path with your template and theme mess you up when you add Sitefinity's responsive design license to your project?

    I am not use to the silence you get in the design and styling section, or is there just nothing more to add? 

    I also want to use the technique Flafel goes over with stripping the Sitefinity nav down to a simple list to allow any css and jQuery menu skinning you want to use or even Shadow Nav.  However I hate to go down that path only to find it completely clashes with the boilerplate responsive design navigation or any bootstrap combination attempts.

     Well regardless of any insight offered, if I make any ground on this I will of course post.








  • I have to give it another try or three
  • @Bill,

    Sorry for the silence.
    First, thanks for reposting my links. The blogpost describes the Github SF-BOILERPLATED project,

    Inside that SF-Boilerplated you'll find 2 themes/templates, one based on the default html5boilerplate, the other on Twitter Bootstrap.


    To be honest I've not really kept the Bootstrap part updated because need/desire seemed limited, but the Boilerplate part should be up to date (and that was a pure personal choice).

    HTML5Boilerplate is a system that basically gets everything setup right, but doesn't add any functionality - call it a 'reset'.

    Bootstrap on the other hand adds a lot of functionality on top of the reset. And because of that, it has two issues when it comes to working with Sitefinity:

    First, the grid system isn't compatible. Imagine a 2 column layout 25%+75%

    Sitefinity way:

    <div runat="server" class="sf_cols">
        <div runat="server" class="sf_colsOut sf_2cols_1_25">
            <div runat="server" class="sf_colsIn sf_2cols_1in_25">
        <div runat="server" class="sf_colsOut sf_2cols_2_75">
            <div runat="server" class="sf_colsIn sf_2cols_2in_75">

    Bootstrap way:

    <div class="row-fluid">
      <div class="span4">...</div>
      <div class="span8">...</div>

    As you can see they don't really stack up against each other. So you need to get creative and re-assign classes/styles to get them to play nice if you'd like to use the layout controls and have them benefit from Bootstrap's functionality.

    The second (although minor) problem you run into is xhtml vs html5. Sitefinity templates are still xhtml and the content blocks as well. 

    Bootstrap relies heavily on the html5 data-* attribute for its functionality. So by default when in Sitefinity you can't quickly open a content-block, go to html view and paste something like this:

    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">

    The sitefinity RadEditor will simply strip out the data-toggle part.

    Anyway, as I said before the HTML5Boilerplate will set you up with a modern starting point, in a non-conflicting way.

    The Bootstrap framework, also functions great in combination with Sitefinity, but it's lay-outing difference and it's html5 attributes are things you need to work around.

    I'll see what I can do in terms of spare time now that Boilerplate v2.3 is out and try and update the Github project.


  • @Bill,

    Regarding your 2nd question.
    You need to base your design on a custom .master page (in order to make it html5 at the minimum) and skip the built-in templates.

    As for a theme, you need to build your own from scratch and incorporate h5bp/bootstrap yourself.

    (basically the reason why I setup the project)

    As to licensing, it doesn't affect it at all, but as I pointed out in the first answer, Sitefinity's responsive design logic depends on those .sf_cols, .sf_2cols_1_25 classes, it doesn't know what to do with the .row-fluid and .span4 out of the box.

    You can assign a different stylesheet to the responsive design rules in which you can compensate ofcourse.

    Falafel's ShadowNav widget isn't specifically targetted or optimized for Bootstrap but it does strip out many of the default radcontrol styling and tag clutter and allows for easier transformations.

    But since you get the full source-code, you can easily change it's layouting template to whatever you'd like to have.

  • Thank you very much for your explanation, above and beyond.

    Very much appreciated Jochem


  • I do admit I check that github site a few times a day so if you have at the very least an audience of one.  I want to do post and see if there is more support with your permission.

    I also wanted to be clear when I asked if Sitefinity responsive design license would work with your boilerplate work I was not asking a is it okay licensing question.  What I meant was if I go down the road of spending hours and hours getting a really nice site setup with boilerplate and then I buy the license to add all the cool device view mobility features of the responsive view add-on would I then find that responsive view takes care of all the adaptive view issues all on it's own that I was trying to address with boilerplate based templating and theming?  In other words if I am planning on purchasing responsive design add-on should I skip trying to implement a Sitefinity boilerplate template/theme?

    Thx again for your advice 

  • @Bill,

    My permission is totally not needed, don't be silly - we're all one community of Sitefinity people no? The more input and insight there is, the better the end result will be...

    Currently sitefinity's Mobile add-on offers 2 major features:
    - Mobile Preview
    - Responsive design rule-based setup.

    As for 'Mobile Preview' that's a really cool end-consumer feature that allows content editors to preview and make changes when a site is viewed on a tablet or phone. That will work out-of-the-box with whatever setup you have, even if you've not setup any responsive rules.

    The responsive rule setup are getting more advanced with each release of Sitefinity. First they offered global rule sets, now they offer them template based already. If I'm not mistaking the v6 roadmap has even further mobile enhancements up its sleeve.

    The rule sets basically define the 'when' and 'what' for your site. And here comes the crucial part: it allows you to set circumstances to offer 'internal responsive' transform (1 row, 2 columns > 2 rows, 1 column) or assign unique .css files (iphone retina specifc css files). So it's not just a nice interface for media-queries.

    Getting back to boilerplate/bootstrap. 

    Like I said before, the 'boilerplate' theme/template will work 100% out-of-the-box with the mobile add-on, because it sets you up properly, without having media-queries or responsive design rules of its own. 

    The 'Bootstrap' theme/template is somewhat trickier, because Twitter bootstrap has media-queries of its own and its rule-set differs from Sitefinity's default. 

    So while the 'Mobile preview' function will work 100% out-of-the-box it's rule-sets are incompatible (sf_cols vs row-fluid classes).

    If you're planning on using Twitter Bootstrap, then you have to 'ignore' it's internal responsive transforms (1 row, 2 columns > 2 rows, 1 column) unless you really want to go deep and make them compatible. 

    Instead of having to setup all these columns transfers, bootstrap will handle them for you automatically and for you all that is left to do is to enhance rule-sets with external css if you specifically want to target and enrich certain devices.

    Because of it's class difference, sitefinity lay-out widgets aren't compatible with bootstrap widgets as said before. In order to make those compatible, you'll have to tweak them - or tweak Bootstrap so that it will apply the same functionality to .sf_colsOut .sf_2cols_1_25 + .sf_colsIn .sf_2cols_1in_25 as it does to .span4.


    I'll see what I can do in making the layout widgets compatible with Bootstrap this week.


  • Jochem, just a shout out, if you are still working towards this in your spare time or have you moved on?  Thx Either way it is all good.  Thx again
  • Hey Bill,

    Hadn't gotten around to writing a blogpost about it yet to describe how they work but I've put them on GitHub already.

    A short write-up can be found at
  • Awesome, thank you
  • I'm extremely interested in this too! What is the current status of the Bootstrap theme? Is it compatible with version 6.0? Also, would it, in theory, replace all of Sitefinity's responsive stuff?
  • 04b00887-4cb5-6f77-96ac-ff0000ae3c70_sitefinity6-with-bootstrap-stats.png
    Hey Adam,

    I've updated both the HTML5Boilerplate and the Twitter Bootstrap port last week. For a quick video of how it works/what you get, I've uploaded a short video on YouTube.

    - Sitefinity v6 and Twitter Bootstrap 2.3.1 compatible.
    - Bootstrap is fully untouched for easy updating*.
    - Fully theme/template compatible.
    - Uses Bootstrap responsive grid while maintaining Sitefinity layout compatibility.
    - Additional layout controls, similar to the default ones provided by Telerik.
    - Optimized HTML5 enhanced Masterpage with both .less and .css support for the theme.

    Twitter Bootstrap's variables.less has one edit. Where Bootstrap uses the foldername 'img' I've replaced it with 'images' in order to adhere to Sitefinity naming convention. (lines 154+155).
    // Sprite icons path
    // -------------------------
    @iconSpritePath:          "../images/glyphicons-halflings.png";
    @iconWhiteSpritePath:     "../images/glyphicons-halflings-white.png";

    The attached screenshot shows some metrics on an IIS8 site with caching & compression enabled.

    In that setup, everything boils down to a total of 8 requests and with warm cache it only pulls in 2 requests and only 6.9Kb (content of the page) giving us a Yslow/Pagespeed score of about 97 out of 100.

  • Jochem,

    Awesome work! Thanks!