Sitefinity - Twitter Bootstrap and HTML5 Boilerplate

Posted by Community Admin on 05-Aug-2018 01:02

Sitefinity - Twitter Bootstrap and HTML5 Boilerplate

All Replies

Posted by Community Admin on 24-Feb-2013 00:00

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?





Posted by Community Admin on 26-Feb-2013 00:00

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.








Posted by Community Admin on 26-Feb-2013 00:00

I have to give it another try or three

Posted by Community Admin on 26-Feb-2013 00:00


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.


Posted by Community Admin on 26-Feb-2013 00:00


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.

Posted by Community Admin on 26-Feb-2013 00:00

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

Very much appreciated Jochem


Posted by Community Admin on 11-Mar-2013 00:00

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 

Posted by Community Admin on 11-Mar-2013 00:00


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.


Posted by Community Admin on 18-Mar-2013 00:00

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

Posted by Community Admin on 18-Mar-2013 00:00

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

Posted by Community Admin on 18-Mar-2013 00:00

Awesome, thank you

Posted by Community Admin on 17-May-2013 00:00

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?

Posted by Community Admin on 20-May-2013 00:00

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.

Posted by Community Admin on 20-May-2013 00:00


Awesome work! Thanks!

Posted by Community Admin on 05-Jun-2013 00:00

Thanks for share this great information!  Our dev team is also looking for Bootstrap on Sitefinity.

Posted by Community Admin on 18-Sep-2013 00:00

Hey Jochem how did you get the HTML5 data attributes to work? I assume you were able to since you said "it's html5 attributes are things you need to work around". 

Thanks so much for working on this stuff and figuring it out! I'd be lost if I didn't have your info to go off of.

Posted by Community Admin on 18-Sep-2013 00:00

Hey all,

I was pointed to /asked about this thread earlier today so apologies for the spam but, here's an update on Twitter Bootstrap.

Both Twitter Bootstrap v 2.3.1 and Bootstrap v 3.0.0 are now supported and part of the Github project.

Biggest reason for keeping both is the fact that as of v3.0.0 (twbs) is adopting the 'Mobile-first' doctrine and by default started using 'box-sizing: border-box;' opposed to the old fashion content-box.

Given the change in box-sizing, KendoUI is now included by default as well as part of the twbs theme+template. 

The sitefinity theme uses .less files to combine the necessary stylesheets for Sitefinity, KendoUI & Bootstrap and results in a single /global/sfproject.css

01./*  ------------------------------------*/
02./* #region less variables and mixins */
03./*  ------------------------------------*/
04.@import "../LESS/sfnormalize.less";
05.@import "../LESS/bootstrap/theme.less";
06./*  ------------------------------------*/
07./* #endregion */
08./*  ------------------------------------*/
09./* #region content */
10./*  ------------------------------------*/
11.... put your own styles here
12./*  ------------------------------------*/
13./* #endregion */
14./*  ------------------------------------*/

Twitter Bootstrap 3 themes are now also supported by simply swapping out line 05.

GitHub project link:
Box-sizing and why it matters:


Posted by Community Admin on 19-Sep-2013 00:00


They're no longer stripped by default. So you could for instance simply copy/paste a navbar example into a content-block and it works.  (change the <form> tag to a <span> of course).

Just keep your eyes open for <i> tags being converted into <em> by default.


Posted by Community Admin on 17-Apr-2015 00:00

If I wanted to use a pre-built template that is based on bootstrap, I like this one for instance:

Is there an easy way to import this?  Or would I just be making my life harder working with this template in Sitefinity rather than just using Sitefinity to build a template from scratch?

Posted by Community Admin on 22-Apr-2015 00:00

Hello David,

In case this is just a master page you can take a look on that article

If this is a custom theme you can find useful that documentation

More information how to create custom page template and using responsive design is described here and here.

I hope this information helps.

Svetoslav Manchev

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items

This thread is closed