A question of containers...

May 22, 2013 at 9:35 AM
First, let me say 'kudos' on this project; I've been obsessed with Bootstrap ever since I started using it, and am ecstatic that a project like this one has cropped up!

I have a question related to containers, which you may have seen before: I've imported your project's design and have created a master page on my own, having imported your scripts and CSS. I'm using a container to design a responsive web page, but I'm encountering issues with my Sharepoint components. The web part seems to spill over the side of the container. I've scoured through the code in developer mode but so far, I'm not seeing what I've managed to mess up!

I've attached a screenshot, and can provide my master page - nothing confidential. Spill-over

Any help would be very much appreciated. Thanks in advance!
May 22, 2013 at 7:23 PM

We ran into this problem as well with web parts. Basically tables are still used by web parts in SP2013 and that causes problems with Bootstrap. What we found worked for us was to tell web part wrapper tables that it should use display: block to force the web part table to stay within the parent container.

We used two primary styles to accomplish this.
  • [class^="span"] .ms-webpart-zone, * [class^="span"] .ms-webpart-cell-vertical, * [class^="span"] .ms-webpart-chrome-vertical {
    display: block; /forces zone to stay within confines of responsive zone/
  • [class^="span"] .ms-WPBody > table, * [class^="span"] .ms-WPBody > table > tbody, * [class^="span"] .ms-WPBody > table > tbody > tr, * [class^="span"] .ms-WPBody > table > tbody > tr > td {
    display: block;
    width: 100%;
I do not think you will be able to simply copy and paste these styles into your stylesheet, but hopefully the theory will help.

May 23, 2013 at 5:46 AM
Hi Eric,

Awesome, I'll give that a go right away -- many thanks!

May 24, 2013 at 4:05 PM
Just a quick follow-up on this, don't know if it is of any use... I tried the above code, which as Eric suspected didn't work out for me; however, this time, inspecting the elements yielded something. On my side, it was the .row class that was causing the problem; margin-left was set to -30px. I therefore created a .row class in my own CSS with a margin-left of 0px - problem solved.

Best regards,
May 24, 2013 at 5:22 PM
Hi Rick,

That is interesting. The margin-left: -30px is included the in the bootstrap responsive css file although the implementation we built uses row-fluid, not row. I believe the negative margin-left is used in general to move the row so that it uses the entire container width even though the container has left and right padding.

I am glad you were able to fix your layout issue.