1

I have got HTML from designer which only uses two CSS; bootstrap.css and myStyle.css (custom CSS). There is no other CSS or JS file in HTML. The design looks fine when I open it in browser.

But when I convert the same HTML into SharePoint Master Page (using Design Manager) then whole designs messes up. It looks like bootstrap CSS is messing up with SharePoint CSS. I have tried using "after" but it shows the same messed up design.

<!--SPM:<SharePoint:CssRegistration Name="&#60;%$SPUrl:~SiteCollection/Style Library/css/bootstrap.css%&#62;" after="corev15.css" runat="server"/>-->
<!--SPM:<SharePoint:CssRegistration Name="&#60;%$SPUrl:~SiteCollection/Style Library/css/myStyle.css%&#62;" after="corev15.css" runat="server"/>-->

Has anyone used bootstrap with SharePoint successfuly?

  • I do hope that designer has not changed the original bootstrap.css but only applied changes in myStyle.css.. First test both files individually by linking them with the Stylish browser extension.. if you get conflicts trim them down selector by selector. Better yet.. hire a Designer who understands SP and pay him/her to do it – Danny '365CSI' Engelman Feb 9 '17 at 20:02
  • I've done exactly what @Danny is describing, had to use bootstrap and edit the core bootstrap.css is manipulating. It still looks a little off, but works great for my custom modals. – Mike Feb 9 '17 at 20:08
  • @Danny'365CSI'Engelman Are you talking about this? addons.mozilla.org/en-US/firefox/addon/stylish – Frank Martin Feb 10 '17 at 11:59
  • Yes, or StyleBot or pick any of the dozen Extensions that let you live edit CSS against a page – Danny '365CSI' Engelman Feb 10 '17 at 12:13
  • @Danny'365CSI'Engelman I have installed that plugin but don't see any option to edit CSS of current site. i.imgur.com/vwxEO73.jpg – Frank Martin Feb 10 '17 at 12:19
0

The safer way to do that is to create "custom" bootstrap build. What does it mean?
In SharePoint usually you don't want to apply bootstrap to all elements (especially on some OOB controls, etc.). In that case it would be perfect to apply bootstrap to some elements by selector.
For example if you want to create bootstrap panel, you write

<div class="panel panel-default">
  <div class="panel-body">A Basic Panel</div>
</div> 

then bootstrap.css rules will apply:

.panel {padding: ....}

But what would be perfect, if I can have below markup:

<div class="bootstrap">
    <div class="panel panel-default">
      <div class="panel-body">A Basic Panel</div>
    </div>
</div>

and in bootstrap.css:

.bootstrap .panel {padding: ...}  

In that way bootstrap styling will apply only on elements inside .bootstrap div, for all others OOB SharePoint rules will apply. This can be done via custom bootstrap build.
You need to download bootstrap sources, then create style.less file:

.bootstrap {
    @import "/path-to-bootstrap-less.less";
    @import "/path-to-bootstrap-responsive-less.less";
}

Then you need to compile this .less. The easiest way is through the npm:

npm install -g less 
lessc style.less  

As a result, all bootstrap-cpecific selectors will be prepended with .bootsrap class selector and you can write your html without hurting outside oob SharePoint.
More different options you can find in this SO question - Applying CSS styles only to certain elements

0

Try this in your custom css

    *, *:before, *:after {
            -webkit-box-sizing: content-box; /*border-box causes many issues with SP*/
            -moz-box-sizing: content-box; /*border-box causes many issues with SP*/
            box-sizing: content-box; /*border-box causes many issues with SP*/
        }

        #s4-bodyContainer * {

            -webkit-box-sizing: border-box; /*content-box causes many issues with content*/
            -moz-box-sizing: border-box; /*content-box causes many issues with content*/
            box-sizing: border-box; /*content-box causes many issues with content*/
        }
    img {
    max-width: none;
    width: auto;
}

* [class^="span"] img {
    max-width: 100%; /*for images inside span grid*/
}

#scriptWPQ2 img, img.ms-webpart-menuArrowImg, #applist img {
    /*within a span may still need to have width of image not 100% for SP2013 OOTB features/imges*/
    width: auto;
    max-width: none;
}

Above ideas borrowing from those books:

Pro SharePoint 2013 Branding and Responsive Web Development

SharePoint 2013 Branding and User Interface Design

  • I tried the above code but it didn't work. – Frank Martin Feb 12 '17 at 19:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.