Bootstrap 4.1 on SharePoint 2016 breaks custom fonts











up vote
2
down vote

favorite












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.










share|improve this question







New contributor




airliner is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
























    up vote
    2
    down vote

    favorite












    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.










    share|improve this question







    New contributor




    airliner is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
    Check out our Code of Conduct.






















      up vote
      2
      down vote

      favorite









      up vote
      2
      down vote

      favorite











      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.










      share|improve this question







      New contributor




      airliner is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.











      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.







      sharepoint-server master-page custom-masterpage boot-strap






      share|improve this question







      New contributor




      airliner is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.











      share|improve this question







      New contributor




      airliner is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      share|improve this question




      share|improve this question






      New contributor




      airliner is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      asked 4 hours ago









      airliner

      214




      214




      New contributor




      airliner is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.





      New contributor





      airliner is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.






      airliner is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.






















          2 Answers
          2






          active

          oldest

          votes

















          up vote
          3
          down vote













          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.






          share|improve this answer





















          • Well, I already disabled all font-settings in bootstrap.min.css just to be sure that this is not causing my problem at all. You may have any hint what might be another point to check?
            – airliner
            3 hours ago










          • You are just going to have to do some detective work on your own with the DEV toolbar. See what you need to do in order to get things to look right again. There are going to be a lot of !important clauses in your CSS I can tell you that. There is really no solid "this is how you do it" answer since every SharePoint farm is different. Just keep wacking the square peg into the round hole until it fits lol
            – lazoDev
            2 hours ago


















          up vote
          2
          down vote













          @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.






          share|improve this answer








          New contributor




          Vsevolod Vasilev is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
          Check out our Code of Conduct.


















          • I'll take a look at this.Thanks so far!
            – airliner
            3 hours ago











          Your Answer








          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "232"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          convertImagesToLinks: false,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: null,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });






          airliner is a new contributor. Be nice, and check out our Code of Conduct.










          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsharepoint.stackexchange.com%2fquestions%2f254186%2fbootstrap-4-1-on-sharepoint-2016-breaks-custom-fonts%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          2 Answers
          2






          active

          oldest

          votes








          2 Answers
          2






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes








          up vote
          3
          down vote













          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.






          share|improve this answer





















          • Well, I already disabled all font-settings in bootstrap.min.css just to be sure that this is not causing my problem at all. You may have any hint what might be another point to check?
            – airliner
            3 hours ago










          • You are just going to have to do some detective work on your own with the DEV toolbar. See what you need to do in order to get things to look right again. There are going to be a lot of !important clauses in your CSS I can tell you that. There is really no solid "this is how you do it" answer since every SharePoint farm is different. Just keep wacking the square peg into the round hole until it fits lol
            – lazoDev
            2 hours ago















          up vote
          3
          down vote













          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.






          share|improve this answer





















          • Well, I already disabled all font-settings in bootstrap.min.css just to be sure that this is not causing my problem at all. You may have any hint what might be another point to check?
            – airliner
            3 hours ago










          • You are just going to have to do some detective work on your own with the DEV toolbar. See what you need to do in order to get things to look right again. There are going to be a lot of !important clauses in your CSS I can tell you that. There is really no solid "this is how you do it" answer since every SharePoint farm is different. Just keep wacking the square peg into the round hole until it fits lol
            – lazoDev
            2 hours ago













          up vote
          3
          down vote










          up vote
          3
          down vote









          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.






          share|improve this answer












          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.







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered 4 hours ago









          lazoDev

          1,492920




          1,492920












          • Well, I already disabled all font-settings in bootstrap.min.css just to be sure that this is not causing my problem at all. You may have any hint what might be another point to check?
            – airliner
            3 hours ago










          • You are just going to have to do some detective work on your own with the DEV toolbar. See what you need to do in order to get things to look right again. There are going to be a lot of !important clauses in your CSS I can tell you that. There is really no solid "this is how you do it" answer since every SharePoint farm is different. Just keep wacking the square peg into the round hole until it fits lol
            – lazoDev
            2 hours ago


















          • Well, I already disabled all font-settings in bootstrap.min.css just to be sure that this is not causing my problem at all. You may have any hint what might be another point to check?
            – airliner
            3 hours ago










          • You are just going to have to do some detective work on your own with the DEV toolbar. See what you need to do in order to get things to look right again. There are going to be a lot of !important clauses in your CSS I can tell you that. There is really no solid "this is how you do it" answer since every SharePoint farm is different. Just keep wacking the square peg into the round hole until it fits lol
            – lazoDev
            2 hours ago
















          Well, I already disabled all font-settings in bootstrap.min.css just to be sure that this is not causing my problem at all. You may have any hint what might be another point to check?
          – airliner
          3 hours ago




          Well, I already disabled all font-settings in bootstrap.min.css just to be sure that this is not causing my problem at all. You may have any hint what might be another point to check?
          – airliner
          3 hours ago












          You are just going to have to do some detective work on your own with the DEV toolbar. See what you need to do in order to get things to look right again. There are going to be a lot of !important clauses in your CSS I can tell you that. There is really no solid "this is how you do it" answer since every SharePoint farm is different. Just keep wacking the square peg into the round hole until it fits lol
          – lazoDev
          2 hours ago




          You are just going to have to do some detective work on your own with the DEV toolbar. See what you need to do in order to get things to look right again. There are going to be a lot of !important clauses in your CSS I can tell you that. There is really no solid "this is how you do it" answer since every SharePoint farm is different. Just keep wacking the square peg into the round hole until it fits lol
          – lazoDev
          2 hours ago












          up vote
          2
          down vote













          @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.






          share|improve this answer








          New contributor




          Vsevolod Vasilev is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
          Check out our Code of Conduct.


















          • I'll take a look at this.Thanks so far!
            – airliner
            3 hours ago















          up vote
          2
          down vote













          @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.






          share|improve this answer








          New contributor




          Vsevolod Vasilev is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
          Check out our Code of Conduct.


















          • I'll take a look at this.Thanks so far!
            – airliner
            3 hours ago













          up vote
          2
          down vote










          up vote
          2
          down vote









          @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.






          share|improve this answer








          New contributor




          Vsevolod Vasilev is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
          Check out our Code of Conduct.









          @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.







          share|improve this answer








          New contributor




          Vsevolod Vasilev is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
          Check out our Code of Conduct.









          share|improve this answer



          share|improve this answer






          New contributor




          Vsevolod Vasilev is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
          Check out our Code of Conduct.









          answered 4 hours ago









          Vsevolod Vasilev

          1915




          1915




          New contributor




          Vsevolod Vasilev is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
          Check out our Code of Conduct.





          New contributor





          Vsevolod Vasilev is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
          Check out our Code of Conduct.






          Vsevolod Vasilev is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
          Check out our Code of Conduct.












          • I'll take a look at this.Thanks so far!
            – airliner
            3 hours ago


















          • I'll take a look at this.Thanks so far!
            – airliner
            3 hours ago
















          I'll take a look at this.Thanks so far!
          – airliner
          3 hours ago




          I'll take a look at this.Thanks so far!
          – airliner
          3 hours ago










          airliner is a new contributor. Be nice, and check out our Code of Conduct.










          draft saved

          draft discarded


















          airliner is a new contributor. Be nice, and check out our Code of Conduct.













          airliner is a new contributor. Be nice, and check out our Code of Conduct.












          airliner is a new contributor. Be nice, and check out our Code of Conduct.
















          Thanks for contributing an answer to SharePoint Stack Exchange!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.





          Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


          Please pay close attention to the following guidance:


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsharepoint.stackexchange.com%2fquestions%2f254186%2fbootstrap-4-1-on-sharepoint-2016-breaks-custom-fonts%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          What visual should I use to simply compare current year value vs last year in Power BI desktop

          Alexandru Averescu

          Trompette piccolo