I'm struggling to avoid that sharepoint overrides my bootstrap classes, but unfortunally without succes, I've tryied many solutions found on the web and also in Sharepoint StackExchange, but no good.

My goal is to add a custom navbar made with bootstrap in the master page. My masterpage is just basically a copy of the Oslo masterpage, I try to attach here some of the code of the page:

   <head runat="server">
        <link href="" rel="stylesheet">
        <meta name="GENERATOR" content="Microsoft SharePoint" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=10" />
        <meta http-equiv="Expires" content="0" />

        <SharePoint:SPPinnedSiteTile runat="server" TileUrl="/_layouts/15/images/SharePointMetroAppTile.png" TileColor="#0072C6" />
        <SharePoint:RobotsMetaTag runat="server" />
        <SharePoint:PageTitle runat="server">
        <asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server">
            <SharePoint:ProjectProperty Property="Title" runat="server" />
        <SharePoint:SPShortcutIcon runat="server" IconUrl="/_layouts/15/images/favicon.ico?rev=23" />
        <SharePoint:StartScript runat="server" />
        <SharePoint:CssLink runat="server" Version="15" />
        <SharePoint:CacheManifestLink runat="server" />
        <SharePoint:ScriptLink Language="javascript" Name="core.js" OnDemand="true" runat="server" Localizable="false" />
        <SharePoint:ScriptLink Language="javascript" Name="menu.js" OnDemand="true" runat="server" Localizable="false" />
        <SharePoint:ScriptLink Language="javascript" Name="callout.js" OnDemand="true" runat="server" Localizable="false" />
        <SharePoint:ScriptLink Language="javascript" Name="sharing.js" OnDemand="true" runat="server" Localizable="false" />
        <SharePoint:ScriptLink Language="javascript" Name="suitelinks.js" OnDemand="true" runat="server" Localizable="false" />

        <SharePoint:CustomJSUrl runat="server" />
        <SharePoint:SoapDiscoveryLink runat="server" />
        <SharePoint:AjaxDelta ID="DeltaPlaceHolderAdditionalPageHead" Container="false" runat="server">
            <!-- jQuery -->
            <SharePoint:ScriptLink ID="ScriptLink1" Name="~sitecollection/Style Library/jQuery/jquery.js" runat="server" />
            <!-- jQuery FINE -->
            <!-- Custom JS References -->
            <SharePoint:ScriptLink ID="ScriptLink3" Name="~sitecollection/Style Library/customJs/masterReorderer.js" runat="server" />
            <!-- Custom JS References -->
            <!-- CSS & jQuery BOOTSTRAP -->
            <SharePoint:CssRegistration Name="<% $SPUrl:~SiteCollection/Style Library/bootstrap/bootstrap.css%>" After="oslo.css" runat="server" />
            <SharePoint:CssRegistration Name="<% $SPUrl:~SiteCollection/Style Library/bootstrap/bootstrap-theme.css%>" After="oslo.css" runat="server" />
            <SharePoint:ScriptLink ID="ScriptLink2" Name="~sitecollection/Style Library/bootstrap/bootstrap.js" runat="server" />
            <!-- CSS BOOTSTRAP & jQuery FINE -->
            <asp:ContentPlaceHolder ID="PlaceHolderAdditionalPageHead" runat="server" />
            <SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true" />
            <asp:ContentPlaceHolder ID="PlaceHolderBodyAreaClass" Visible="true" runat="server" />
        <SharePoint:CssRegistration Name="Themable/oslo.css" runat="server" EnableCssTheming="true" />

Where I'm getting wrong?

  • Can you refer bootstrap css after the oslo.css? Oct 30, 2015 at 11:34
  • @AtishDipongkor I'll try straight avay.
    – FabioEnne
    Oct 30, 2015 at 11:35
  • @AtishDipongkor No good..all my css are inside the StyleLibrary at Site collection level.
    – FabioEnne
    Oct 30, 2015 at 11:42
  • How did you try? update your code in question Oct 30, 2015 at 11:45
  • @AtishDipongkor I just moved the references right after oslo.css
    – FabioEnne
    Oct 30, 2015 at 12:40

1 Answer 1


use in your custom css !important it's overrides others codes


.ms-cui-ribbon { 
    font-size: 12px !important

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.