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

One thought on “SharePoint + Twitter Bootstrap = Less Hack

  1. so thank you very much… literally saved my day or more.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s