Boostrap messes up whole design

Question

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?

Answer 1

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

Answer 2

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