Bootstrap 4.1 on SharePoint 2016 breaks custom fonts

Question

As mentioned in the title, I'm currently facing the problem that something with/in Bootstrap might break the usual way of using custom fonts. I add <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> right in the beginning and <!-- Custom CSS Import --> <SharePoint:CssRegistration Name="<% $SPUrl:~sitecollection/_catalogs/masterpage/WTE/Styles/bootstrap.min.css %>" runat="server" /> <SharePoint:CssRegistration Name="<% $SPUrl:~sitecollection/_catalogs/masterpage/WTE/Styles/bootstrap-custom.css %>" runat="server" /> in the end of the part. Additionally

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="<asp:Literal runat='server' Text='<%$SPUrl:~sitecollection/_catalogs/masterpage/WTE/Scripts/jquery-3.3.1.min.js%>' />" ></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" src="<asp:Literal runat='server' Text='<%$SPUrl:~sitecollection/_catalogs/masterpage/WTE/Scripts/bootstrap.min.js%>' />" ></script>
<script type="text/javascript" src="<asp:Literal runat='server' Text='<%$SPUrl:~sitecollection/_catalogs/masterpage/WTE/Scripts/bootstrap-custom.js%>' />" ></script> 

is added right before the closing body tag. The rest is the simple seatle master page. What am I missing? In seatle master page alone it works just like a charm. So the font itself is ready to use and my spfont should be without any mistakes.

Answer 1

There are going to be quite a few things that do not look right with the layout once bootstrap is used in SharePoint. Make a custom CSS file and store it in the Style Library to override the some of the changes the bootstrap.css does and reference it in your code when you use bootstrap, or you can open the bootstrap.css file and make the modification you need to get it to play right with your master page. I use bootstrap in my farm and have had to do the same thing. Once you get it right though it is nice to have in your styling arsenal for SharePoint.

Answer 2

@lazoDev said right things. Bootstrap has some things that is not working at all with SharePoint styles. Ex. body , html tags styles.
You can wrap your code to make it isolated to some css class.
Like in this question answers.
'.bootstrap-scope' is what you may search in this article. May be some styles you must be manully changing after scoping styles but such way you can use bootstrap.