Tag Archives: Less; Bootstrap; Html

SharePoint + Twitter Bootstrap = Less Hack

Developing for SharePoint 2010 is unhealthy. You cannot use last .NET features, you cannot use last JavaScript stuff and at the end you cannot use last CSS goodies. Of course, I want all this stuff. This post is about small hack that will give you Bootstrap styles in your SharePoint pages.

What the problem?

Well, if you just reference Bootstrap it will conflict with SharePoint styles. Results are quite ugly.

Solution

Solution that looks best for me is just to use less to add “namespace” to CSS files.

  1. Get Less support for Visual Studio – Web Essentials.
  2. Create less file in your Layouts folder
  3. Add something like this
  4. .my {
      
      // Put content of Twitter Bootstrap  files you need
      // For example I added this
      // https://github.com/twbs/bootstrap/blob/master/less/variables.less
      // https://github.com/twbs/bootstrap/blob/master/less/tables.less
    }
    

2. Wrap part of the page you need with div with class my:

<div class="my">
    <!-- your html -->
</div>

 

Enjoy.

Advertisements
Tagged