Bootstrap Responsive Framework with SP 2013

Saturday, February 07, 2015

7

Responsive UIs are all the rage these days, but SharePoint hasn't caught up just yet.  Maybe in SP15.  One can hope. In the meantime, Bootstrap UI is my go-to solution.  It's one of the most robust and mature (and free!!) responsive frameworks.  It has no external dependencies and integrating with SharePoint is as simple as including a single CSS and JS file in your masterpage.

However, Bootstrap's CSS overrides some important SharePoint classes.  This article covers CSS fixes to make the two play nicely together.  They are just some of the more common issues, and are by no means an exhaustive list.  If you discover others, please do share in the comments!

These changes were tested on a SP 2013 Publishing Site with Bootstrap v3.3.2.

Page Width

As we narrow the browser window on a responsive site, we expect to eventually hit the mobile breakpoint.  On a SP site, that may never happen.  At some point, horizontal scrollbars crop up and the actual content window stops getting smaller.

This is because one of the onion-like layers of container elements has a min-width restriction, which needs to be removed:

#contentBox {
    min-width: 0;
}

Text Styles

Bootstrap's line-heights and font sizing messes with SP menu and modal dialog text.

.ms-dlgContent {
    line-height: 1.1;
}

#s4-ribbonrow {
    line-height: 1.2;
}

.ms-core-menu-link:hover,
.ms-core-menu-link:focus,
.ms-core-menu-link:active,
#s4-ribbonrow a:hover,
#s4-ribbonrow a:focus,
#s4-ribbonrow a:active {
    text-decoration: none;
}

#pageStatusBar,
.ms-cui-tooltip {
    line-height: 1.1;
    font-size: 8pt;
}

.ms-cui-modalDiv-ie,
.ms-cui-glass-ie {
    background-color: transparent;
}

Box Sizing

Box-sizing is an innocent-looking CSS property that can sow utter chaos and ruin on a page.  It specifies whether an element's width and height include the padding and border (border-box), or just the inner content (content-box).

Content-boxing is the default, which is what SharePoint's CSS is built to work with.  Bootstrap, however, requires border-box and sets that pretty much globally.  This doesn't completely break SharePoint, but most controls will be mis-aligned or cut off.

We have to allow Bootstrap to use border-box, while reverting just the SharePoint elements to content-box.  I started with Olly Hodgson's fixes for SP2010, and added some classes for 2013:

#s4-ribbonrow *,
#s4-ribbonrow *:before,
#s4-ribbonrow *:after,
#ms-help *,
*[class*='ms-core-menu'],
*[class*='ms-dlg'],
*[class*='ms-dlg']:before,
*[class*='ms-dlg']:after,
.ms-dlgFrameContainer > div,
.ms-dlgFrameContainer > div:before,
.ms-dlgFrameContainer > div:after,
.ms-dlgFrameContainer > div > div,
.ms-dlgFrameContainer > div > div:before,
.ms-dlgFrameContainer > div > div:after,
.ms-MenuUIPopupBody,
.ms-MenuUIPopupBody:before,
.ms-MenuUIPopupBody:after,
.ms-MenuUIPopupBody *,
.ms-MenuUIPopupBody *:before,
.ms-MenuUIPopupBody *:after,
.ms-ToolPaneOuter,
.ms-ToolPaneOuter:before,
.ms-ToolPaneOuter:after,
.ms-ToolPaneOuter *,
.ms-ToolPaneOuter *:before,
.ms-ToolPaneOuter *:after,
*[class*='ms-cui'],
*[class*='ms-cui']:before,
*[class*='ms-cui']:after,
*[class*='ms-cui'] *,
*[class*='ms-cui'] *:before,
*[class*='ms-cui'] *:after,
*[class*='ms-dlg'] *,
*[class*='ms-dlg'] *:before,
*[class*='ms-dlg'] *:after,
*[class*='ms-webpart'] * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}


7 comments:

Really useful thanks. I also had to add it to iframe

Amazing, thank you so much

Amazing, thank you so much

Dude ... from a perfect stranger ... thank you so much. Man, you saved me with this fix ... really appreciate it!

In my case I had a problem with SharePoint Online (yes still a problem with Bootstrap.)

font-size was too small on modern pages because of the default size used by bootstrap. The spacing around s4-titlerow was broken because of content-box requirement.

Fixed with these styles added:

html {
font-size: 16px !important;
};
#s4-titlerow,
...,
{
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

Post a Comment