Bootstrap 4.1 on SharePoint 2016 breaks custom fonts












2















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



























    2















    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

























      2












      2








      2








      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














      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













      share|improve this question











      share|improve this question




      share|improve this question










      asked Dec 12 '18 at 13:24









      airlinerairliner

      917




      917






















          2 Answers
          2






          active

          oldest

          votes


















          2














          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
            Dec 12 '18 at 15:20






          • 1





            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
            Dec 12 '18 at 15:38






          • 1





            I laughed harder than I should about your last comment. :D But seriously, I may found a bug with SharePoint 2016 onPrem regarding custom fonts w/ custom master pages. The stock Seatle masterpage works like a charm with fonts. I just downloaded and copied it under another name and the font is broken. The only way out was: Change the Look with Seatle and custom font and go to Site Settings >> Change Masterpage and set the custom masterpage there afterwards. Now both, font and masterpage, work together...

            – airliner
            Dec 13 '18 at 12:38













          • Nice! That is good to know. I will keep that in mind as well. Glad you were able to solve you problem!

            – lazoDev
            Dec 13 '18 at 12:47



















          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.






          share|improve this answer
























            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',
            autoActivateHeartbeat: false,
            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
            });


            }
            });














            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









            2














            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
              Dec 12 '18 at 15:20






            • 1





              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
              Dec 12 '18 at 15:38






            • 1





              I laughed harder than I should about your last comment. :D But seriously, I may found a bug with SharePoint 2016 onPrem regarding custom fonts w/ custom master pages. The stock Seatle masterpage works like a charm with fonts. I just downloaded and copied it under another name and the font is broken. The only way out was: Change the Look with Seatle and custom font and go to Site Settings >> Change Masterpage and set the custom masterpage there afterwards. Now both, font and masterpage, work together...

              – airliner
              Dec 13 '18 at 12:38













            • Nice! That is good to know. I will keep that in mind as well. Glad you were able to solve you problem!

              – lazoDev
              Dec 13 '18 at 12:47
















            2














            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
              Dec 12 '18 at 15:20






            • 1





              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
              Dec 12 '18 at 15:38






            • 1





              I laughed harder than I should about your last comment. :D But seriously, I may found a bug with SharePoint 2016 onPrem regarding custom fonts w/ custom master pages. The stock Seatle masterpage works like a charm with fonts. I just downloaded and copied it under another name and the font is broken. The only way out was: Change the Look with Seatle and custom font and go to Site Settings >> Change Masterpage and set the custom masterpage there afterwards. Now both, font and masterpage, work together...

              – airliner
              Dec 13 '18 at 12:38













            • Nice! That is good to know. I will keep that in mind as well. Glad you were able to solve you problem!

              – lazoDev
              Dec 13 '18 at 12:47














            2












            2








            2







            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 Dec 12 '18 at 13:48









            lazoDevlazoDev

            1,5821020




            1,5821020













            • 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
              Dec 12 '18 at 15:20






            • 1





              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
              Dec 12 '18 at 15:38






            • 1





              I laughed harder than I should about your last comment. :D But seriously, I may found a bug with SharePoint 2016 onPrem regarding custom fonts w/ custom master pages. The stock Seatle masterpage works like a charm with fonts. I just downloaded and copied it under another name and the font is broken. The only way out was: Change the Look with Seatle and custom font and go to Site Settings >> Change Masterpage and set the custom masterpage there afterwards. Now both, font and masterpage, work together...

              – airliner
              Dec 13 '18 at 12:38













            • Nice! That is good to know. I will keep that in mind as well. Glad you were able to solve you problem!

              – lazoDev
              Dec 13 '18 at 12:47



















            • 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
              Dec 12 '18 at 15:20






            • 1





              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
              Dec 12 '18 at 15:38






            • 1





              I laughed harder than I should about your last comment. :D But seriously, I may found a bug with SharePoint 2016 onPrem regarding custom fonts w/ custom master pages. The stock Seatle masterpage works like a charm with fonts. I just downloaded and copied it under another name and the font is broken. The only way out was: Change the Look with Seatle and custom font and go to Site Settings >> Change Masterpage and set the custom masterpage there afterwards. Now both, font and masterpage, work together...

              – airliner
              Dec 13 '18 at 12:38













            • Nice! That is good to know. I will keep that in mind as well. Glad you were able to solve you problem!

              – lazoDev
              Dec 13 '18 at 12:47

















            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
            Dec 12 '18 at 15:20





            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
            Dec 12 '18 at 15:20




            1




            1





            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
            Dec 12 '18 at 15:38





            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
            Dec 12 '18 at 15:38




            1




            1





            I laughed harder than I should about your last comment. :D But seriously, I may found a bug with SharePoint 2016 onPrem regarding custom fonts w/ custom master pages. The stock Seatle masterpage works like a charm with fonts. I just downloaded and copied it under another name and the font is broken. The only way out was: Change the Look with Seatle and custom font and go to Site Settings >> Change Masterpage and set the custom masterpage there afterwards. Now both, font and masterpage, work together...

            – airliner
            Dec 13 '18 at 12:38







            I laughed harder than I should about your last comment. :D But seriously, I may found a bug with SharePoint 2016 onPrem regarding custom fonts w/ custom master pages. The stock Seatle masterpage works like a charm with fonts. I just downloaded and copied it under another name and the font is broken. The only way out was: Change the Look with Seatle and custom font and go to Site Settings >> Change Masterpage and set the custom masterpage there afterwards. Now both, font and masterpage, work together...

            – airliner
            Dec 13 '18 at 12:38















            Nice! That is good to know. I will keep that in mind as well. Glad you were able to solve you problem!

            – lazoDev
            Dec 13 '18 at 12:47





            Nice! That is good to know. I will keep that in mind as well. Glad you were able to solve you problem!

            – lazoDev
            Dec 13 '18 at 12:47













            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.






            share|improve this 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.






              share|improve this answer


























                2












                2








                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.






                share|improve this answer













                @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












                share|improve this answer



                share|improve this answer










                answered Dec 12 '18 at 14:17







                user80188





































                    draft saved

                    draft discarded




















































                    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.




                    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

                    How to change which sound is reproduced for terminal bell?

                    Can I use Tabulator js library in my java Spring + Thymeleaf project?

                    Title Spacing in Bjornstrup Chapter, Removing Chapter Number From Contents