Twitter Bootstrap + Sitefinity

Has anyone been successful in integrating Twitter Bootstrap with Sitefinity? Any gotchas to watch out for? I assume that many of the components of Bootstrap will work fine, but the Bootstrap grid system is different than Sitefinity's, so that may be problematic, or impossible to use.

Run Sitefinity with Twitter Bootstrap, Below is a link to a quick how-to-get-started in combination with VisualStudio and the Sitefinity Thunder & Chirpy extensions...

Thanks, that partially answers my questions. As does this other message thread in the design forum that I somehow missed.

Dan & Andrew,

Thanks both of you for the tweets as well, I'm finishing up on the grid being compatible just being plagued with lack of 'community-time' on my end... Michael has volunteered to give it a spin so next week you should see an update :)

Jochem 

Hey,

After peer pressure and being featured in the Newsletter I had no choice :)
First version of the 'full' compatible Twitter Bootstrap / Sitefinity regions is available for download. 

It contains an empty Masterpage/Template featuring the responsive NavBar and the theme is compatible with the Bootstrap .row .spanx system, both static and fluid.

Known v1 issues:
Only works with the default 12 columns layout, if you a 16 column layout you're on your own.
Sitefinity's 5x 20% region isn't implemented in the static version, for obvious reasons.

Awesome! I'll get on it as soon as I can. I have a project coming up next week that has requested it - and I'm sure I'll test it fully then. I am excited about it! This week is on a different project, so I'm not sure how much I'll be able to break away and try it out. (just saying so you aren't surprised at a lack of initial response after your AWESOME turnaround time.)

That link is gone. Is there an updated link?

Hey Adam,

Posterous indeed kicked the bucket but you can find the blog posts here and here and the actual GitHub repository is here.

Hello,

I am late to the game but very happy to have found this thread. I am going to try integrating the SF-BOILERPLATED for BOOTSTRAP into Sitefinity 7. My UI guy also wants me to try updating to the latest bootstrap instead of 2.x. Any known gotchas for Sitefinity 7 or Bootstrap 3?

Daren

Update: Of course, after reading the readme in the root, I see the Twbs folder which is 3.0.2.  (I was looking at the Bootstrap folder!) So now I am checking what happens with 3.1.1.  I see there is an issue under github.com/.../7 but the original commentor didn't say if his/her issues were resolved.

Hi Daren,

As you read in the mentioned by you post, Sitefinity uses older version of Sitefinity (1.8.3) than you need. In order to avoid the conflicts using different versions of jQuery you can check this documentation article.

Regards,
Svetoslav Manchev
Telerik

Hey Daren,

Sorry for the belated reply.

It's updated to the latest Bootstrap (3.1.1) inside the twbs folder as you mentioned. With regards to the jQuery question - Svetoslav's solution works, yet for 100% compatibility (especially with page editing and/or inline editing) I'd advise to stick to jQuery 1.8.3 as Sitefinity provides by default.

With Sitefinity's included KendoUI actually requiring 1.9.+ and yet the Sitefinity team still sticking to jQuery 1.8.3 for the past 3 releases there are bound to be (compatibility) reasons to do so...

Jochem

Hey Jochem I see that you say "It's updated to the latest Bootstrap (3.1.1) inside the twbs folder
" so I clicked "Download ZIP" and it looks like in the twbs folder the sfproject.css file says "SF|Boilerplated based on Bootstrap v3.0.2 | sfproject.less"...so is that just a typo or is it using 3.0.2? 

Also I have run in to a problem where the nesting of certain Bootstrap layout controls causes problems. I'll create a page, organize everything, and hit publish. When I have to
go back in to edit the page the layout/content blocks are no longer in
the place I put them - kind of like when you change a pages template. 

This is what support told me -->  "I managed to track down the main offender in this scenario. It is due to the nesting of your Twitter bootstrap layout controls. Apparently after the template is changed and the layout controls lose their placeholders, they fail to create new ones when nested one inside the other. The strange thing here was that even though an error was logged
inside the error log file, after thorough debugging I could not manage to catch the exception in the code so that I can investigate its roots.... For future reference I would advise that you stick to our build in layout controls."

Have you run in to any problems like this with your controls? i'm using Sitefinity version 7.0 with the bootstrap 3.0.0 twbs theme as a base. 

*update: Ok I did figure out a bit more about my problem. The problem only comes up when I use some additional layout controls I created for 9x3, 3x9, 10x2, and 2x10. I did invent some classes for them, like .sf_2cols_1_75, but it appears that I may need to do much more and tinker with the sfproject.css to account for the additional layouts...Could that be causing my problems?

Has anyone ever run into this error when upgrading.  I upgraded from 7.2.5310.0 to 10.2.6602.0.

[MissingMethodException: Method not found: 'Telerik.Sitefinity.Abstractions.Mvc.MvcBootstrapper Telerik.Sitefinity.Abstractions.Bootstrapper.get_MVC()'.]
   Viaero.Next.Global.Application_Start(Object sender, EventArgs e) +0

[HttpException (0x80004005): Method not found: 'Telerik.Sitefinity.Abstractions.Mvc.MvcBootstrapper Telerik.Sitefinity.Abstractions.Bootstrapper.get_MVC()'.]
   System.Web.HttpApplicationFactory.EnsureAppStartCalledForIntegratedMode(HttpContext context, HttpApplication app) +529
   System.Web.HttpApplication.RegisterEventSubscriptionsWithIIS(IntPtr appContext, HttpContext context, MethodInfo[] handlers) +169
   System.Web.HttpApplication.InitSpecial(HttpApplicationState state, MethodInfo[] handlers, IntPtr appContext, HttpContext context) +169
   System.Web.HttpApplicationFactory.GetSpecialApplicationInstance(IntPtr appContext, HttpContext context) +396
   System.Web.Hosting.PipelineRuntime.InitializeApplication(IntPtr appContext) +333

[HttpException (0x80004005): Method not found: 'Telerik.Sitefinity.Abstractions.Mvc.MvcBootstrapper Telerik.Sitefinity.Abstractions.Bootstrapper.get_MVC()'.]
   System.Web.HttpRuntime.FirstRequestInit(HttpContext context) +525
   System.Web.HttpRuntime.EnsureFirstRequestInit(HttpContext context) +124
   System.Web.HttpRuntime.ProcessRequestNotificationPrivate(IIS7WorkerRequest wr, HttpContext context) +700