+1-888-365-2779
Try Now
More in this section

Forums / General Discussions / Twitter Bootstrap + Sitefinity

Twitter Bootstrap + Sitefinity

12 posts, 0 answered
  1. Dan Sorensen
    Dan Sorensen avatar
    256 posts
    Registered:
    13 Aug 2010
    18 Jul 2012
    Link to this post
    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.
  2. Andrew from Australia
    Andrew from Australia avatar
    3 posts
    Registered:
    19 Jul 2012
    19 Jul 2012
    Link to this post
    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...
     
  3. Dan Sorensen
    Dan Sorensen avatar
    256 posts
    Registered:
    13 Aug 2010
    19 Jul 2012
    Link to this post
    Thanks, that partially answers my questions. As does this other message thread in the design forum that I somehow missed.

    Looks like the current answer is that much of bootstrap can be used EXCEPT the span grid system. (Unless I am willing to forgo the Sitefinity region editor)
  4. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    19 Jul 2012
    Link to this post
    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 
  5. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    21 Jul 2012
    Link to this post
    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.
  6. Dan Sorensen
    Dan Sorensen avatar
    256 posts
    Registered:
    13 Aug 2010
    23 Jul 2012
    Link to this post
    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.)
  7. Adam
    Adam avatar
    23 posts
    Registered:
    05 Apr 2013
    17 May 2013 in reply to Andrew from Australia
    Link to this post
    That link is gone. Is there an updated link?
  8. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    18 May 2013 in reply to Adam
    Link to this post
    Hey Adam,

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


  9. Daren
    Daren avatar
    5 posts
    Registered:
    26 Jun 2012
    21 May 2014
    Link to this post

    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 https://github.com/jbokkers/SF-BOILERPLATED/issues/7 but the original commentor didn't say if his/her issues were resolved.

  10. Svetoslav Manchev
    Svetoslav Manchev avatar
    735 posts
    Registered:
    29 Nov 2016
    26 May 2014
    Link to this post
    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
     
    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
     
  11. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    27 May 2014 in reply to Svetoslav Manchev
    Link to this post

    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

  12. Richard
    Richard avatar
    64 posts
    Registered:
    09 Oct 2012
    03 Sep 2014 in reply to Jochem Bökkers
    Link to this post

    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?

12 posts, 0 answered