Bootstrap 3 for SharePoint 2010

Nov 8, 2013 at 8:31 PM
Thanks a lot for really great template for SharePoint 2010 for Bootstrap 2.2. It was really easy to integrate and worked great.

Currently, I am trying to convert Bootstrap 2.2 to 3 version for SharePoint 2010.

I followed the article to do so : http://bootply.com/bootstrap-3-migration-guide

From above article, I made respective changes to masterpage, bootstrap-custom.css and bootstrap-custom.js file. But does not work as expected. ribbon region displaying horizontal scrollbar, responsiveness does not work any more. I am trying to debug but no luck.

1) do you have any suggestion, which will help me to fix this ?
2) is there any recent release planned for SharePoint 2010 for Bootstrap 3 version ?

Any help is greatly appreciated.

Thanks
Coordinator
Nov 11, 2013 at 11:58 PM
Hi,

Yes, we want to get B3 working with SP 2010 but I do not have a timeline for this.

In the mean time, my suggestion would be to follow the steps as outlined in the article you reference.

My summary:
Remove the references to the B2 css and js files. Replace these with the B3 CSS and JS files and then link to them in your Master Page.
Replace container-fluid with container in the Master Page and Page Layouts
Replace row-fluid with row in the same
Replace span# with col-sm-#, i.e. replace span9 with col-sm-9. You could use col-md-# or col-lg-#, but I suggest col-sm-# to start.
Remove all code from the custom stylesheet including in Responsive SharePoint for SP2010.

Load your page and see what happens.

Now go through the custom stylesheet provided in our package and add in blocks of code at a time. Start at the top and replace any container-fluid with container, row-fluid with row and span? with col-sm-?. Some of the fixes may not work and might need a slight change, or others may not be needed. That would be the first step to trying to get this to work. Oh, and you might want to review the B3 for SP2013 package, in particular the custom stylesheet as well as the js file. Not too much changes between both versions of SP.

A few other notes, images in general are not set as responsive in B3. There is a new class, img-responsive that does this for you. That means that we do not need to reset all images to not be responsive, then re-reset to be responsive in a col-sm block. But all elements in B3 now have a box-sizing of border-box. This will cause a problem with SP, in particular the ribbon. You could reset the entire ribbon to use content-box, i.e.
#s4-ribbonrow *, #s4-ribbonrow *:after, #s4-ribbonrow *.before {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
From there you will still need to spend a lot of time in Firebug, one of the major reasons why we don't have a solution yet. I hope this helps.

Eric
Nov 12, 2013 at 2:40 PM
Eric,

Thanks for the summary steps. I am interested in this also.

NilangShah,

How is your progress on this? I would like to help also.

Thanks,
Roger
Nov 12, 2013 at 3:46 PM
Eric,
Thanks a lot for all the suggestions, I am going to try that and will let you know how that goes.

Roger,
Thanks for offering help. I might not be able to work on this for next couple of days. But will post it here if any help needed.
by any chance, are you also working on migrating Bootstrap 3 for SharePoint 2010?

Thanks,
Nilang
Nov 13, 2013 at 1:27 AM
I'd be interested in that as well. I am going to work on that in the next few weeks as i will have a requirement to have B3 integrated with SP2010 for work. It would be awesome contribute.
Coordinator
Nov 13, 2013 at 5:23 AM
Hi All,

It sounds as though B3 and SP2010 will be popular indeed. I am not sure if anyone on our team will be able to get to this for a while. If anyone is able to get this working and willing to share it with the community, please email me and I will help you get it posted here.

Otherwise we will continue on our end and do what we can to get this working with a full release.

Eric
Nov 13, 2013 at 6:48 PM
Sure Eric, I will be working on this in coming weeks and would love to share with Community if I can make it work.

Thanks,
Nilang
Nov 14, 2013 at 6:08 PM
Nilang,

Yes, SP2010 with Bootstrap 3. I am also playing around with a namespaced version of bootstrap to use without branding the whole site. Not sure which approach is best for my needs.

Thanks,
Roger
Jan 24, 2014 at 7:39 PM
Just curious if anyone made any progress on this? I've just recently started up the effort for my engagement. I am wondering if it's worth posting my progress somewhere and then collaborate with others. What are some good approaches for this?