Max Melcher

5 minute read

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 (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:

<!-- Latest compiled and minified CSS --> css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

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

    1. npm install grunt-cli -g

    • Switch to the twitter bootstrap directory
    • Open the bootstrap.less file in the less folder and wrap every @import with:
      1. .bootstrap {

}

            &nbsp;

            <div id="attachment_2105" style="width: 310px" class="wp-caption aligncenter">
              <a href="https://melcher.it/wp-content/uploads/Bootstrap-wrap.png"><img data-attachment-id="2105" data-permalink="https://melcher.it/2016/03/bootstrap-sharepoint-online-avoid-css-ricochet/bootstrap-wrap/" data-orig-file="https://melcher.it/wp-content/uploads/Bootstrap-wrap.png" data-orig-size="943,652" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="Bootstrap-wrap" data-image-description="<p>wrap every include</p>

” data-medium-file=“https://melcher.it/wp-content/uploads/Bootstrap-wrap-300x207.png" data-large-file=“https://melcher.it/wp-content/uploads/Bootstrap-wrap.png" class=“wp-image-2105 size-medium” src=“https://melcher.it/wp-content/uploads/Bootstrap-wrap-300x207.png" alt=“Bootstrap-wrap” width=“300” height=“207” srcset=“https://melcher.it/wp-content/uploads/Bootstrap-wrap-300x207.png 300w, https://melcher.it/wp-content/uploads/Bootstrap-wrap-768x531.png 768w, https://melcher.it/wp-content/uploads/Bootstrap-wrap-930x643.png 930w, https://melcher.it/wp-content/uploads/Bootstrap-wrap-765x529.png 765w, https://melcher.it/wp-content/uploads/Bootstrap-wrap.png 943w” sizes=“(max-width: 300px) 100vw, 300px” />

              <p class="wp-caption-text">
                Wrap everything &#8211; dont forget the closing } down below.
              </p>
            </div></li> </ol> </li> 

              * Now switch back to the node command prompt. Change to the bootstrap directory.
              * Run **npm install** to install missing packages 
                  1. <pre class="lang:default decode:true" title="Install missing packages">npm install</pre>

                    <div id="attachment_2107" style="width: 310px" class="wp-caption aligncenter">
                      <a href="https://melcher.it/wp-content/uploads/npm-install.png"><img data-attachment-id="2107" data-permalink="https://melcher.it/2016/03/bootstrap-sharepoint-online-avoid-css-ricochet/npm-install/" data-orig-file="https://melcher.it/wp-content/uploads/npm-install.png" data-orig-size="499,334" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="npm-install" data-image-description="" data-medium-file="https://melcher.it/wp-content/uploads/npm-install-300x201.png" data-large-file="https://melcher.it/wp-content/uploads/npm-install.png" class="wp-image-2107 size-medium" src="https://melcher.it/wp-content/uploads/npm-install-300x201.png" alt="Install missing packages with npm-install" width="300" height="201" srcset="https://melcher.it/wp-content/uploads/npm-install-300x201.png 300w, https://melcher.it/wp-content/uploads/npm-install.png 499w" sizes="(max-width: 300px) 100vw, 300px" /></a>

                      <p class="wp-caption-text">
                        Install missing packages with npm-install
                      </p>
                    </div></li> </ol> </li> 

                      * Run grunt dist to compile your new css 
                          1. <pre class="lang:default decode:true ">grunt dist</pre>

                            <div id="attachment_2108" style="width: 310px" class="wp-caption aligncenter">
                              <a href="https://melcher.it/wp-content/uploads/grunt-dist.png"><img data-attachment-id="2108" data-permalink="https://melcher.it/2016/03/bootstrap-sharepoint-online-avoid-css-ricochet/grunt-dist/" data-orig-file="https://melcher.it/wp-content/uploads/grunt-dist.png" data-orig-size="499,334" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="grunt-dist" data-image-description="" data-medium-file="https://melcher.it/wp-content/uploads/grunt-dist-300x201.png" data-large-file="https://melcher.it/wp-content/uploads/grunt-dist.png" class="wp-image-2108 size-medium" src="https://melcher.it/wp-content/uploads/grunt-dist-300x201.png" alt="grunt-dist to compile your new scoped css" width="300" height="201" srcset="https://melcher.it/wp-content/uploads/grunt-dist-300x201.png 300w, https://melcher.it/wp-content/uploads/grunt-dist.png 499w" sizes="(max-width: 300px) 100vw, 300px" /></a>

                              <p class="wp-caption-text">
                                grunt-dist to compile your new scoped css
                              </p>
                            </div>

                            &nbsp;</li> </ol> </li> 

                              * Et voila &#8211; then you have your perfectly scoped css in the folder **dist/css**: 
                                  1. <div id="attachment_2109" style="width: 310px" class="wp-caption aligncenter">
                                      <a href="https://melcher.it/wp-content/uploads/scoped-bootstrap.png"><img data-attachment-id="2109" data-permalink="https://melcher.it/2016/03/bootstrap-sharepoint-online-avoid-css-ricochet/scoped-bootstrap/" data-orig-file="https://melcher.it/wp-content/uploads/scoped-bootstrap.png" data-orig-size="943,652" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="scoped-bootstrap" data-image-description="" data-medium-file="https://melcher.it/wp-content/uploads/scoped-bootstrap-300x207.png" data-large-file="https://melcher.it/wp-content/uploads/scoped-bootstrap.png" class="wp-image-2109 size-medium" src="https://melcher.it/wp-content/uploads/scoped-bootstrap-300x207.png" alt="Scoped bootstrap" width="300" height="207" srcset="https://melcher.it/wp-content/uploads/scoped-bootstrap-300x207.png 300w, https://melcher.it/wp-content/uploads/scoped-bootstrap-768x531.png 768w, https://melcher.it/wp-content/uploads/scoped-bootstrap-930x643.png 930w, https://melcher.it/wp-content/uploads/scoped-bootstrap-765x529.png 765w, https://melcher.it/wp-content/uploads/scoped-bootstrap.png 943w" sizes="(max-width: 300px) 100vw, 300px" /></a>

                                      <p class="wp-caption-text">
                                        Scoped bootstrap
                                      </p>
                                    </div>

                                    &nbsp;</li> </ol> </li> </ol> 

                                    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 &#8220;bootstrap&#8221; before:

                                    <div id="attachment_2110" style="width: 310px" class="wp-caption aligncenter">
                                      <a href="https://melcher.it/wp-content/uploads/bootstrap-class.png"><img data-attachment-id="2110" data-permalink="https://melcher.it/2016/03/bootstrap-sharepoint-online-avoid-css-ricochet/bootstrap-class/" data-orig-file="https://melcher.it/wp-content/uploads/bootstrap-class.png" data-orig-size="618,469" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="bootstrap class" data-image-description="" data-medium-file="https://melcher.it/wp-content/uploads/bootstrap-class-300x228.png" data-large-file="https://melcher.it/wp-content/uploads/bootstrap-class.png" class="wp-image-2110 size-medium" src="https://melcher.it/wp-content/uploads/bootstrap-class-300x228.png" alt="add the bootstrap class in the first element or just wrap everything with a div" width="300" height="228" srcset="https://melcher.it/wp-content/uploads/bootstrap-class-300x228.png 300w, https://melcher.it/wp-content/uploads/bootstrap-class.png 618w" sizes="(max-width: 300px) 100vw, 300px" /></a>

                                      <p class="wp-caption-text">
                                        add the bootstrap class in the first element or just wrap everything with a div
                                      </p>
                                    </div>

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

                                    <div id="attachment_2111" style="width: 310px" class="wp-caption aligncenter">
                                      <a href="https://melcher.it/wp-content/uploads/twitter-bootstrap-without-impact.png"><img data-attachment-id="2111" data-permalink="https://melcher.it/2016/03/bootstrap-sharepoint-online-avoid-css-ricochet/twitter-bootstrap-without-impact/" data-orig-file="https://melcher.it/wp-content/uploads/twitter-bootstrap-without-impact.png" data-orig-size="1868,718" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="twitter bootstrap without impact" data-image-description="" data-medium-file="https://melcher.it/wp-content/uploads/twitter-bootstrap-without-impact-300x115.png" data-large-file="https://melcher.it/wp-content/uploads/twitter-bootstrap-without-impact-1024x394.png" class="wp-image-2111 size-medium" src="https://melcher.it/wp-content/uploads/twitter-bootstrap-without-impact-300x115.png" alt="twitter bootstrap without impact" width="300" height="115" srcset="https://melcher.it/wp-content/uploads/twitter-bootstrap-without-impact-300x115.png 300w, https://melcher.it/wp-content/uploads/twitter-bootstrap-without-impact-768x295.png 768w, https://melcher.it/wp-content/uploads/twitter-bootstrap-without-impact-1024x394.png 1024w, https://melcher.it/wp-content/uploads/twitter-bootstrap-without-impact-930x357.png 930w, https://melcher.it/wp-content/uploads/twitter-bootstrap-without-impact-765x294.png 765w" sizes="(max-width: 300px) 100vw, 300px" /></a>

                                      <p class="wp-caption-text">
                                        twitter bootstrap without impact
                                      </p>
                                    </div>

                                    &nbsp;

                                    ## 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][5]:

                                    [<img data-attachment-id="2560" data-permalink="https://melcher.it/2016/03/bootstrap-sharepoint-online-avoid-css-ricochet/bootstrap-getsass/" data-orig-file="https://melcher.it/wp-content/uploads/bootstrap-getsass.png" data-orig-size="284,184" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="bootstrap-getsass" data-image-description="" data-medium-file="https://melcher.it/wp-content/uploads/bootstrap-getsass.png" data-large-file="https://melcher.it/wp-content/uploads/bootstrap-getsass.png" class="aligncenter size-full wp-image-2560" src="https://melcher.it/wp-content/uploads/bootstrap-getsass.png" alt="" width="284" height="184" />][6]

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

                                    [<img data-attachment-id="2558" data-permalink="https://melcher.it/2016/03/bootstrap-sharepoint-online-avoid-css-ricochet/bootstrap-sass/" data-orig-file="https://melcher.it/wp-content/uploads/bootstrap-sass.png" data-orig-size="789,428" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="bootstrap-sass" data-image-description="" data-medium-file="https://melcher.it/wp-content/uploads/bootstrap-sass-300x163.png" data-large-file="https://melcher.it/wp-content/uploads/bootstrap-sass.png" class="aligncenter size-medium wp-image-2558" src="https://melcher.it/wp-content/uploads/bootstrap-sass-300x163.png" alt="" width="300" height="163" srcset="https://melcher.it/wp-content/uploads/bootstrap-sass-300x163.png 300w, https://melcher.it/wp-content/uploads/bootstrap-sass-768x417.png 768w, https://melcher.it/wp-content/uploads/bootstrap-sass-765x415.png 765w, https://melcher.it/wp-content/uploads/bootstrap-sass.png 789w" sizes="(max-width: 300px) 100vw, 300px" />][7]

                                    Compile the sass and check the css:

                                    [<img data-attachment-id="2561" data-permalink="https://melcher.it/2016/03/bootstrap-sharepoint-online-avoid-css-ricochet/bootstrap-sass-compiled/" data-orig-file="https://melcher.it/wp-content/uploads/bootstrap-sass-compiled.png" data-orig-size="950,451" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="bootstrap-sass-compiled" data-image-description="" data-medium-file="https://melcher.it/wp-content/uploads/bootstrap-sass-compiled-300x142.png" data-large-file="https://melcher.it/wp-content/uploads/bootstrap-sass-compiled.png" class="aligncenter size-medium wp-image-2561" src="https://melcher.it/wp-content/uploads/bootstrap-sass-compiled-300x142.png" alt="" width="300" height="142" srcset="https://melcher.it/wp-content/uploads/bootstrap-sass-compiled-300x142.png 300w, https://melcher.it/wp-content/uploads/bootstrap-sass-compiled-768x365.png 768w, https://melcher.it/wp-content/uploads/bootstrap-sass-compiled-930x442.png 930w, https://melcher.it/wp-content/uploads/bootstrap-sass-compiled-765x363.png 765w, https://melcher.it/wp-content/uploads/bootstrap-sass-compiled.png 950w" sizes="(max-width: 300px) 100vw, 300px" />][8]

                                    The sass approach took me like 5 minutes with VS Code &#8211; awesome.

                                    ## If you have read it so far&#8230;

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

                                    And then leave a comment 🙂
comments powered by Disqus