I created new custom MasterPage. I used bootstrap library for MasterPage design. But
oslo.css breaks my design. How can I find
oslo.css in SharePoint Designer and How can I edit the CSS file?
oslo.css is not recommendable approach because it can break other elements which you might not find even.
You should check with developer tools about the CSS. Which CSS is breaking the layout and try to override that CSS with your custom CSS in the masterpage.
Here is the great solution Responsive SharePoint available that you can use with bootstrap for SharePoint. I assume all the CSS have been overridden in this solution so you can use that.
Also ShareBoot – Responsive SharePoint 2013 Theme will help you how to achieve responsive structure in SharePoint 2013.
Check your custom master page for a similar entry as below
<SharePoint:CssRegistration Name="Themable/oslo.css" runat="server" EnableCssTheming="true" />
Now instead of modifying
oslo.css. Create a copy of this file
C:\Program Files\Common Files\microsoft shared\Web Server Extensions\15\TEMPLATE\LAYOUTS\1033\STYLES and upload it under
Master Page Gallery and make required edits.
Now you can add reference to your new CSS using
<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/_catalogs/masterpage/CustomFolder/oslocustom.css %>" runat="server" after="corev15.css"/>