Bootstrap and SharePoint Online – how to avoid css ricochet

04 Mar 2016
March 4, 2016

In my current project I had the challenge to improve the user experience for some pages without messing too much with the MasterPage (because you shouldn’t, right?). The client explicitly requested components like accordions, responsive tables and more control of the page alignments. So what would be easier to use a mobile first, responsive made by the @twitter guys? Apparently SharePoint Online does not like bootstrap too much – one you add the css files, you will see notable changes.

In this post I show you how to fix that.

Bootstrap and SharePoint OnlineBootstrap

 

Bootstrap (currently 3.3.6 and shortly 4.0) brings a lot of nice components that can be embedded within a standard SharePoint Page. Its not end-user friendly, an editor needs a least basic html skills to use it – but if you can use it, its fairly easy to improve the user experience. And because the twitter guys are really smart (and their css skills are way better than mine) it even works decently on mobile devices.

You can simply (that was my first attempt) add the css tag to a page:

On the basic team site landing page I found at least 5 changes:

twitter bootstrap overrides the SharePoint css

twitter bootstrap overrides the SharePoint css

  1. the heading has an increased font size and the position has changed
  2. the title of a webpart has an increased font size
  3. the paginator icon is displaced
  4. the search icon of a doclib is displaced.
  5. the full screen icon is gone

How to restrain/scope bootstrap?

At first I thought its rather easy, just change a couple of lines within bootstrap and you should be good to go. Right, that took actually longer than the good solution – I stopped and googled. I found a solution on stackoverflow from 2012 – and guess what – it still works. In order to to that you need to do the following:

  1. Install nodejs
  2. Download the twitter bootstrap source code and unzip it
  3. Open the nodejs command prompt
  4. Install grunt-cli with the following command

  5. Switch to the twitter bootstrap directory
  6. Open the bootstrap.less file in the less folder and wrap every @import with:

    1.  

      Bootstrap-wrap

      Wrap everything – dont forget the closing } down below.

  7. Now switch back to the node command prompt. Change to the bootstrap directory.
  8. Run npm install to install missing packages

    1. Install missing packages with npm-install

      Install missing packages with npm-install

  9. Run grunt dist to compile your new css

    1. grunt-dist to compile your new scoped css

      grunt-dist to compile your new scoped css

       

  10. Et voila – then you have your perfectly scoped css in the folder dist/css:
    1. Scoped bootstrap

      Scoped bootstrap

       

Now you only have to upload this file to SharePoint Online (e.g. a style library) and either reference it within a Script Editor Webpart (your add it to your MasterPage if you are brave enough!). If you want to use it, you have to add the class “bootstrap” before:

add the bootstrap class in the first element or just wrap everything with a div

add the bootstrap class in the first element or just wrap everything with a div

And the you can use twitter bootstrap without jeopardizing your SharePoint Online look and feel:

twitter bootstrap without impact

twitter bootstrap without impact

 

The SASS way

If you want to do the same thing with the current version of bootstrap (and bootstrap 4 once its out), then you can simple download the SASS version:

Then open the _bootstrap.scss file with your favorite editor and wrap the imports with a class:

Compile the sass and check the css:

The sass approach took me like 5 minutes with VS Code – awesome.

If you have read it so far…

If you want my pre-compiled version, please take it from here (version 3.3.6, use on your own risk!).

And then leave a comment 🙂

Max Melcher
Follow me!

Max Melcher

Maximilian Melcher (MCSE, MCPD) is a Principal Consultant working at Alegri International Services in Munich, Germany. Max is a specialist in SharePoint technologies focused on search, social computing, web content management and collaboration. Max has led SharePoint implementations for Dax 30 companies since 2009.
Max’s free time is spent on twitter (@maxmelcher) mostly with a good coffee in his hands.
Max Melcher
Follow me!
Tags:
14 replies
  1. Johannes says:

    Hi Max,
    good post! Just a short addition:
    As bootstrap (unfortunately) applies some styles on the html and body element, you should additionally replace “.bootstrap html” and “.bootstrap body” with “.bootstrap” if you want these styles to be applied.

    If you’re using Visual Studio, you can get the same result by creating a file “yourfile.less” and add
    .bootstrap {
    @import (less) ‘bootstrap.css’;
    @import (less) ‘bootstrap-theme.css’; /* optional */
    }
    Visual Studio can import and minify without the need for the Node.js build process.

    Cheers
    Johannes

    Reply
    • Max Melcher says:

      Hey Johannes,

      good to hear from you! 🙂

      1. I think I don’t want them to be applied globally. In my solution they are not applied and perfectly isolated within my wrapper. You need them somewhere? Or did I misunderstand you?

      2. If you compile with visual studio, you loose the vendor prefix stuff mentioned on the bootstrap page: http://getbootstrap.com/getting-started/#download-autoprefixer

      Cheers,
      Max

      Reply
      • Johannes says:

        Hi Max,

        1. By prefixing, you get “.bootstrap html” and “.bootstrap body” selectors which probably won’t match your markup. You can apply these rules to your element by replacing “.bootstrap html” and “.bootstrap body” selectors with “.bootstrap”.

        2. Oh, good catch! Thanks 🙂

        Reply
  2. GC says:

    Too bad the link is broken, it is a good work here !

    Reply
  3. Kristian says:

    Hi Max, do you know how I can accomplish this with SASS?

    Reply
  4. Kristian says:

    Hi Max thanks for your reply. Your absolutely right. It worked the same way as with the LESS approach 🙂
    Thank you.

    Reply
  5. Me You says:

    Doesn’t seem to work if you want to use modal dialogs. The dialog shows but it shows as part of the page and doesn’t pop-up.

    Reply
    • Max Melcher says:

      I think the markup for the modals are added to the body once the modal is triggered – if that happens its outside the .container class and then you have the problem again. Did you check that?

      Reply
      • Me You says:

        Yes the modal is added to the body when triggered. Would you know how to fix this without a lot of re-work?

        Reply
      • Me You says:

        The work I am doing is actually for a bank so it’s fairly important 🙂 I am not so sure it has to do with being outside the container or now. When I put in tracing code, the parentElem to open call is always undefined whether I use constrained bootstrap or regular bootstrap css.

        Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close