Thank you for visiting my site!

Home / SharePoint 2013 Tutorials / Create A Responsive Bootstrap 4 Navigation Menu for in SharePoint Server 2013

Create A Responsive Bootstrap 4 Navigation Menu for in SharePoint Server 2013

 

This is the Bootstrap menu will use for the menu.Add it to the master Html to have it as reference, will delete later.

 
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
<!--replace this with the Sharepoint menus -->
    <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
            </div>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
    </ul>

      
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- replace this with the Sharepoint Search -->
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form> 

    </div>
 </nav>

Add the Frame for your new menu

 
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" 
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">

    <!-- START replace this with the Sharepoint menus -->

    <!--END replace this with the Sharepoint menus -->

        
    
     <div class="form-inline mt-2 mt-md-0">
     <!-- START replace this with the Sharepoint Search -->
     
     <!-- END replace this with the Sharepoint Search -->
     </div>

    </div>
</nav>

add the menu into your frame, add the “navbar-nav mr-auto” into class=”ms-breadcrumb-dropdownBox

<div class="ms-breadcrumb-top">
    <div class="ms-breadcrumb-dropdownBox navbar-nav mr-auto" style="display:none;">
        <!--SPM:<SharePoint:AjaxDelta id="DeltaBreadcrumbDropdown" runat="server">-->
        <!--SPM:<SharePoint:PopoutMenu
        Visible="false"
        runat="server"
        ID="GlobalBreadCrumbNavPopout"
        IconUrl="/_layouts/15/images/spcommon.png?rev=23"
        IconAlt="&#60;%$Resources:wss,master_breadcrumbIconAlt%&#62;"
        ThemeKey="v15breadcrumb"
        IconOffsetX="215"
        IconOffsetY="120"
        IconWidth="16"
        IconHeight="16"
        AnchorCss="ms-breadcrumb-anchor"
        AnchorOpenCss="ms-breadcrumb-anchor-open"
        MenuCss="ms-breadcrumb-menu ms-noList">-->
        <div class="ms-breadcrumb-top">
            <!--SPM:<asp:Label runat="server" CssClass="ms-breadcrumb-header" Text="&#60;%$Resources:wss,master_breadcrumbHeader%&#62;"/>-->
        </div>
        <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server">-->
        <!--SPM:<SharePoint:ListSiteMapPath
        runat="server"
        SiteMapProviders="SPSiteMapProvider,SPContentMapProvider"
        RenderCurrentNodeAsLink="false"
        PathSeparator=""
        CssClass="ms-breadcrumb"
        NodeStyle-CssClass="ms-breadcrumbNode"
        CurrentNodeStyle-CssClass="ms-breadcrumbCurrentNode"
        RootNodeStyle-CssClass="ms-breadcrumbRootNode"
        NodeImageOffsetX="0"
        NodeImageOffsetY="289"
        NodeImageWidth="16"
        NodeImageHeight="16"
        NodeImageUrl="/_layouts/15/images/fgimg.png?rev=23"
        RTLNodeImageOffsetX="0"
        RTLNodeImageOffsetY="312"
        RTLNodeImageWidth="16"
        RTLNodeImageHeight="16"
        RTLNodeImageUrl="/_layouts/15/images/fgimg.png?rev=23"
        HideInteriorRootNodes="true"
        SkipLinkText=""/>-->
        <!--SPM:</asp:ContentPlaceHolder>-->
        <!--SPM:</SharePoint:PopoutMenu>-->
        <!--SPM:</SharePoint:AjaxDelta>-->
    </div>
    <!--SPM:<SharePoint:AjaxDelta id="DeltaTopNavigation" BlockElement="true" 
        CssClass="ms-displayInline" runat="server">-->
    <!--SPM:<SharePoint:DelegateControl runat="server" 
        ControlId="TopNavigationDataSource" Id="topNavigationDelegate">-->
    <!--SPM:<Template_Controls>-->
    <!--SPM:<asp:SiteMapDataSource 
        ShowStartingNode="False"
        SiteMapProvider="SPNavigationProvider" 
        id="topSiteMap" 
        runat="server"
        StartingNodeUrl="sid:1002"/>-->
    <!--SPM:</Template_Controls>-->
    <!--SPM:</SharePoint:DelegateControl>-->
        <a name="startNavigation"></a>
    <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server">-->
    <!--SPM:<SharePoint:AspMenu 
        ID="TopNavigationMenu" 
        Runat="server" 
        EnableViewState="false"
        DataSourceID="topSiteMap"
        AccessKey="&#60;%$Resources:wss,navigation_accesskey%&#62;"
        UseSimpleRendering="true"
        UseSeparateCss="false"
        Orientation="Horizontal"
        StaticDisplayLevels="2"
        AdjustForShowStartingNode="true"
        MaximumDynamicDisplayLevels="2"
        SkipLinkText=""/>-->
    <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><link rel="stylesheet" type="text/css" href="http://store.patterns-online.com/_layouts/15/1033/styles/menu-21.css" /><div id="zz7_TopNavigationMenu" class=" noindex ms-core-listMenu-horizontalBox"><ul id="zz9_RootAspMenu" class="root ms-core-listMenu-root static"><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" title="Default Publishing Site" href="#" accesskey="1"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Default Publishing Site</span></span></a></li></ul></div><!--PE: End of READ-ONLY PREVIEW-->
    <!--SPM:</asp:ContentPlaceHolder>-->
    <!--SPM:</SharePoint:AjaxDelta>-->
</div>

add the search into your frame.

<!--SPM:<SharePoint:AjaxDelta id="DeltaPlaceHolderSearchArea" BlockElement="true" CssClass="ms-mpSearchBox ms-floatRight" runat="server">-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><div class="ms-mpSearchBox ms-floatRight" id="ctl00_DeltaPlaceHolderSearchArea"><!--PE: End of READ-ONLY PREVIEW-->
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">-->
<div id="searchInputBox">
	<!--SPM:<SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox"/>-->
	<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><div class="ms-webpart-chrome "><div WebPartID="00000000-0000-0000-0000-000000000000" HasPers="true" id="WebPart" width="100%" class="ms-WPBody noindex " OnlyForMePart="true" allowDelete="false" style=""><div componentid="ctl00_SmallSearchInputBox1_csr" id="ctl00_SmallSearchInputBox1_csr"><div id="SearchBox" name="Control"><div class="ms-srch-sb ms-srch-sb-border" id="ctl00_SmallSearchInputBox1_csr_sboxdiv"><input type="text" value="Search This Site..." maxlength="2048" accessKey="S" title="Search This Site..." id="ctl00_SmallSearchInputBox1_csr_sbox" autocomplete="off" autocorrect="off" class="ms-srch-sb-prompt ms-helperText" /><a title="Search" class="ms-srch-sb-searchLink" id="ctl00_SmallSearchInputBox1_csr_SearchLink" href="javascript: {}"><img src="http://store.patterns-online.com/_layouts/15/images/searchresultui.png" class="ms-srch-sb-searchImg" id="searchImg" alt="Search" /></a><div class="ms-qSuggest-container ms-shadow" id="AutoCompContainer"><div id="ctl00_SmallSearchInputBox1_csr_AutoCompList"></div></div></div></div></div><div componentid="ctl00_SmallSearchInputBox1_csr" id="ctl00_SmallSearchInputBox1_csr"></div><div id="ctl00_SmallSearchInputBox1"></div><div class="ms-clear"></div></div></div><!--PE: End of READ-ONLY PREVIEW-->
</div>
<!--SPM:</asp:ContentPlaceHolder>-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify)--></div><!--PE: End of READ-ONLY PREVIEW-->
<!--SPM:</SharePoint:AjaxDelta>-->

All together

 
<?xml version="1.0" encoding="utf-8"?><!--SPG:

This HTML file has been associated with a SharePoint Master Page (.master file) carrying the same name.  While the files remain associated, you will not be allowed to edit the .master file, and any rename, move, or deletion operations will be reciprocated.

To build the master page directly from this HTML file, simply edit the page as you normally would.  Use the Snippet Generator at http://store.patterns-online.com/_layouts/15/ComponentHome.aspx?Url=http%3A%2F%2Fstore%2Epatterns%2Donline%2Ecom%2F%5Fcatalogs%2Fmasterpage%2FBoot4Starter%2Fdist%2Fseattle%5Fboot4%2Emaster to create and customize useful SharePoint entities, then copy and paste them as HTML snippets into your HTML code.   All updates to this file will automatically sync to the associated Master Page.

-->
<!-- _lcid="1033" _version="15.0.5145" _dal="1" -->
<!-- _LocalBinding -->
<!--SPM:<%@Master language="C#"%>-->
<!--SPM:<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>-->
<!--SPM:<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>-->
<!--SPM:<%@ Import Namespace="Microsoft.SharePoint" %>-->
<!--SPM:<%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>-->
<!--SPM:<%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %>-->
<!--SPM:<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>-->
<!--SPM:<%@ Register TagPrefix="wssuc" TagName="Welcome" src="~/_controltemplates/15/Welcome.ascx" %>-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"[]>
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
    <!--SID:00 -->
    <head runat="server">
        <meta http-equiv="X-UA-Compatible" content="IE=10" />
        <meta name="GENERATOR" content="Microsoft SharePoint" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <meta http-equiv="Expires" content="0" />
        <!--SPM:<SharePoint:SPPinnedSiteTile runat="server" TileUrl="/_layouts/15/images/SharePointMetroAppTile.png" TileColor="#0072C6"/>-->
        <!--SPM:<SharePoint:RobotsMetaTag runat="server"/>-->
        <!--SPM:<SharePoint:PageTitle runat="server">-->
        <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server"/>-->
        <!--SPM:</SharePoint:PageTitle>-->
        <!--SPM:<SharePoint:StartScript runat="server"/>-->
        <!--SPM:<SharePoint:CssLink runat="server" Version="15"/>-->
        <!--PS: Start of READ-ONLY PREVIEW (do not modify) --><link href="http://store.patterns-online.com/_layouts/15/1033/styles/corev15.css" type="text/css" rel="stylesheet" /><link href="http://store.patterns-online.com/_layouts/15/1033/styles/searchv15.css" type="text/css" rel="stylesheet" /><!--PE: End of READ-ONLY PREVIEW -->
        <!--SPM:<SharePoint:CacheManifestLink runat="server"/>-->
        <!--SPM:<SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server" Localizable="false"/>-->
        <!--SPM:<SharePoint:ScriptLink language="javascript" name="menu.js" OnDemand="true" runat="server" Localizable="false"/>-->
        <!--SPM:<SharePoint:ScriptLink language="javascript" name="callout.js" OnDemand="true" runat="server" Localizable="false"/>-->
        <!--SPM:<SharePoint:ScriptLink language="javascript" name="sharing.js" OnDemand="true" runat="server" Localizable="false"/>-->
        <!--SPM:<SharePoint:ScriptLink language="javascript" name="suitelinks.js" OnDemand="true" runat="server" Localizable="false"/>-->
        <!--SPM:<SharePoint:CustomJSUrl runat="server"/>-->
        <!--SPM:<SharePoint:SoapDiscoveryLink runat="server"/>-->
        <!--SPM:<SharePoint:AjaxDelta id="DeltaPlaceHolderAdditionalPageHead" Container="false" runat="server">-->
        <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server"/>-->
        <!--SPM:<SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true"/>-->
        <!--SPM:</SharePoint:AjaxDelta>-->
        <!--SPM:<SharePoint:SPShortcutIcon runat="server" IconUrl="/_layouts/15/images/favicon.ico?rev=23"/>-->
        <link rel="stylesheet" href="/_catalogs/masterpage/Boot4Starter/dist/fonts/font-awesome.css" />
        <link rel="stylesheet" href="/_catalogs/masterpage/Boot4Starter/dist/css/bootstrap.min.css" />
        <link rel="stylesheet" href="/_catalogs/masterpage/Boot4Starter/dist/css/style.css" />
        <script type="text/javascript" src="/SiteAssets/jquery-3.4.1.min.js"/>



<![CDATA[ [if IE 9] ]]>        <style type="text/css">//<![CDATA[
    .ms-core-animation-transparent
    {
        opacity:0;
    }
    .ms-isBot .ms-core-animation-transparent
    {
        opacity:1;
    }
    
        //]]>
        </style>
<![CDATA[ [endif] ]]>        <!--[if lte IE 8]>
    <style type="text/css">//<![CDATA[
    .ms-core-animation-transparent,
    .ms-core-animation-transparent img
    {
       -ms-filter:"alpha(opacity=0)";
    }
    .ms-isBot .ms-core-animation-transparent,
    .ms-isBot .ms-core-animation-transparent img
    {
       -ms-filter:"";
    }
    //]]></style>
    <![endif]-->
        <script type="text/javascript">//<![CDATA[
        var g_pageLoadAnimationParams = { elementSlideIn : "sideNavBox", elementSlideInPhase2 : "contentBox" };
    
        //]]>
        </script>
        <!--SPM:<SharePoint:CssRegistration Name="Themable/corev15.css" runat="server"/>-->
        <!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:ContentType msdt:dt="string">Html Master Page</mso:ContentType>

<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">http://store.patterns-online.com/_catalogs/masterpage/Boot4Starter/dist/seattle_boot4.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
<mso:HtmlDesignFromMaster msdt:dt="string">http://store.patterns-online.com/_catalogs/masterpage/Boot4Starter/dist/seattle_boot4.html, http://store.patterns-online.com/_catalogs/masterpage/Boot4Starter/dist/seattle_boot4.html</mso:HtmlDesignFromMaster>
<mso:ContentTypeId msdt:dt="string">0x0101000F1C8B9E0EB4BE489F09807B2C53288F0054AD6EF48B9F7B45A142F8173F171BD10003D357F861E29844953D5CAA1D4D8A3A005164A08824CA15478E07616B81528E54</mso:ContentTypeId>
</mso:CustomDocumentProperties>
</xml><![endif]-->
    </head>
    <body>
        <!--SPM:<SharePoint:ImageLink runat="server"/>-->
        <!--SPM:<SharePoint:SPNoScript runat="server"/>-->
        <!--SPM:<SharePoint:SPClientIDGenerator runat="server" ServerControlID="DeltaPlaceHolderMain;DeltaPlaceHolderPageTitleInTitleArea;DeltaPlaceHolderUtilityContent"/>-->
        <script type="text/javascript">//<![CDATA[ var submitHook = function () { return false; }; theForm._spOldSubmit = theForm.submit; theForm.submit = function () { if (!submitHook()) { this._spOldSubmit(); } }; 
        //]]>
        </script>
        <!--SPM:<WebPartPages:SPWebPartManager runat="Server"/>-->
        <!--SPM:<asp:ScriptManager id="ScriptManager" runat="server" EnablePageMethods="false" EnablePartialRendering="true" EnableScriptGlobalization="false" EnableScriptLocalization="true"/>-->
        <!--SPM:<SharePoint:AjaxDelta id="DeltaDelegateControls" runat="server">-->
        <!--SPM:<SharePoint:DelegateControl runat="server" ControlId="GlobalNavigation"/>-->
        <!--SPM:<SharePoint:DelegateControl ControlId="GlobalSiteLink3" Scope="Farm" runat="server" Visible="false"/>-->
        <!--SPM:</SharePoint:AjaxDelta>-->
        <div id="TurnOnAccessibility" style="display:none" class="s4-notdlg noindex">
            <a id="linkTurnOnAcc" href="#" class="ms-TurnOnAcc" onclick="SetIsAccessibilityFeatureEnabled(true);UpdateAccessibilityUI();document.getElementById('linkTurnOffAcc').focus();return false;">
                <!--SPM:<SharePoint:EncodedLiteral runat="server" text="&#60;%$Resources:wss,master_turnonaccessibility%&#62;" EncodeMethod="HtmlEncode"/>-->
            </a>
        </div>
        <div id="TurnOffAccessibility" style="display:none" class="s4-notdlg noindex">
            <a id="linkTurnOffAcc" href="#" class="ms-TurnOffAcc" onclick="SetIsAccessibilityFeatureEnabled(false);UpdateAccessibilityUI();document.getElementById('linkTurnOnAcc').focus();return false;">
                <!--SPM:<SharePoint:EncodedLiteral runat="server" text="&#60;%$Resources:wss,master_turnoffaccessibility%&#62;" EncodeMethod="HtmlEncode"/>-->
            </a>
        </div>
        <div class="s4-notdlg s4-skipribbonshortcut noindex">
            <a href="javascript:;" onclick="document.getElementById('startNavigation').focus();" class="ms-SkiptoNavigation" accesskey="&lt;%$Resources:wss,skipribbon_accesskey%&gt;" runat="server">
                <!--SPM:<SharePoint:EncodedLiteral runat="server" text="&#60;%$Resources:wss,skipRibbonCommandsLink%&#62;" EncodeMethod="HtmlEncode"/>-->
            </a>
        </div>
        <div class="s4-notdlg noindex">
            <a href="javascript:;" onclick="document.getElementById('mainContent').focus();" class="ms-SkiptoMainContent" accesskey="&lt;%$Resources:wss,maincontent_accesskey%&gt;" runat="server">
                <!--SPM:<SharePoint:EncodedLiteral runat="server" text="&#60;%$Resources:wss,mainContentLink%&#62;" EncodeMethod="HtmlEncode"/>-->
            </a>
        </div>
        <div id="TurnOffAnimation" style="display:none;" class="s4-notdlg noindex">
            <a id="linkTurnOffAnimation" href="#" class="ms-accessible ms-acc-button" onclick="ToggleAnimationStatus();return false;">
                <!--SPM:<SharePoint:EncodedLiteral runat="server" text="&#60;%$Resources:wss,master_disableanimation%&#62;" EncodeMethod="HtmlEncode"/>-->
            </a>
        </div>
        <div id="TurnOnAnimation" style="display:none;" class="s4-notdlg noindex">
            <a id="linkTurnOnAnimation" href="#" class="ms-accessible ms-acc-button" onclick="ToggleAnimationStatus();return false;">
                <!--SPM:<SharePoint:EncodedLiteral runat="server" text="&#60;%$Resources:wss,master_enableanimation%&#62;" EncodeMethod="HtmlEncode"/>-->
            </a>
        </div>
        <a id="HiddenAnchor" href="javascript:;" style="display:none;">
        </a>
        <div id="ms-hcTest">
        </div>
        <div id="ms-designer-ribbon">
            <!--SID:02 {Ribbon}-->
            <!--PS: Start of READ-ONLY PREVIEW (do not modify) --><div class="DefaultContentBlock" style="background:rgb(0, 114, 198); color:white; width:100%; padding:8px; height:64px; overflow:hidden;">In true previews of your site, the SharePoint ribbon will be here.</div><!--PE: End of READ-ONLY PREVIEW -->
        </div>
        <!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AnonymousUsersOnly">-->
            <!--SPM:<wssucw:Welcome runat="server" EnableViewState="false"/>-->
        <!--ME:</SharePoint:SPSecurityTrimmedControl>-->
        <div id="s4-workspace" class="ms-core-overlay">
            <div id="s4-bodyContainer">
                    <div class="jumbotron-overlay">
                            <div class="jumbotron-overlay">    
                                    <div class="jumbotron text-center">
                                            <div class="container">
                                                <div class="row justify-content-center">
                                                    <div class="col-md-3">
                                                            <h1 id="pageTitle" class="ms-core-pageTitle">
                                                                    <!--SPM:<SharePoint:AjaxDelta id="DeltaPlaceHolderPageTitleInTitleArea" runat="server">-->
                                                                    <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server">-->
                                                                    <!--SPM:<SharePoint:SPTitleBreadcrumb
                                                            runat="server"
                                                            RenderCurrentNodeAsLink="true"
                                                            SiteMapProvider="SPContentMapProvider"
                                                        CentralAdminSiteMapProvider="SPXmlAdminContentMapProvider"
                                                        SkipLinkText="">-->
                                                                    <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><span id="ctl00_DeltaPlaceHolderPageTitleInTitleArea">Home</span><!--PE: End of READ-ONLY PREVIEW-->
                                                                    <!--SPM:<PATHSEPARATORTEMPLATE>-->
                                                                    <!--SPM:<SharePoint:ClusteredDirectionalSeparatorArrow runat="server"/>-->
                                                                    <!--SPM:</PATHSEPARATORTEMPLATE>-->
                                                                    <!--SPM:</SharePoint:SPTitleBreadcrumb>-->
                                                                    <!--SPM:</asp:ContentPlaceHolder>-->
                                                                    <!--SPM:</SharePoint:AjaxDelta>-->
                                                                    <!--SPM:<SharePoint:AjaxDelta BlockElement="true" id="DeltaPlaceHolderPageDescription" CssClass="ms-displayInlineBlock ms-normalWrap" runat="server">-->
                                                                    <a href="javascript:;" id="ms-pageDescriptionDiv" style="display:none">
                                                                        <span id="ms-pageDescriptionImage">
                                                                        </span>
                                                                    </a>
                                                                    <span class="ms-accessible" id="ms-pageDescription">
                                                                        <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat="server"/>-->
                                                                    </span>
                                                                    <!--SPM:<SharePoint:ScriptBlock runat="server">-->
                                                                    <!--SPM:_spBodyOnLoadFunctionNames.push("setupPageDescriptionCallout");-->
                                                                    <!--SPM:</SharePoint:ScriptBlock>-->
                                                                    <!--SPM:</SharePoint:AjaxDelta>-->
                                                            </h1>
                                                    </div>
                                                    <div class="header col-md-3 ">
                                                            <!--logo-->
                                                            <!--CS: Start Site Logo Snippet-->
                                                            <!--MS:<SharePoint:AjaxDelta id="DeltaSiteLogo" BlockElement="true" runat="server">-->
                                                                <!--MS:<SharePoint:SPSimpleSiteLink CssClass="ms-siteicon-a" runat="server" id="onetidProjectPropertyTitleGraphic">-->
                                                                    <!--MS:<SharePoint:SiteLogoImage CssClass="ms-siteicon-img" name="onetidHeadbnnr0" id="onetidHeadbnnr2" LogoImageUrl="/_layouts/15/images/siteIcon.png?rev=23" runat="server">-->
                                                                        <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><img id="ctl00_onetidHeadbnnr2" class="ms-siteicon-img" name="onetidHeadbnnr0" Src="http://store.patterns-online.com/_layouts/15/images/siteIcon.png?rev=23" alt="Content site" /><!--PE: End of READ-ONLY PREVIEW-->
                                                                    <!--ME:</SharePoint:SiteLogoImage>-->
                                                                <!--ME:</SharePoint:SPSimpleSiteLink>-->
                                                            <!--ME:</SharePoint:AjaxDelta>-->
                                                            <!--CE:End Site Logo Snippet-->
                                                    </div>
                                                </div>
                                            </div>
                                    </div>
                                </div>        
                    </div>
                                
                                
                    <nav class="navbar navbar-expand-lg navbar-light bg-light">
                            <!--<a class="navbar-brand" href="#">Navbar</a> -->
                            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                <span class="navbar-toggler-icon"></span>
                            </button>
                            
                            <!-- START replace this with the Sharepoint menus -->
                            <div class="collapse navbar-collapse" id="navbarSupportedContent">    
                            <div class="ms-breadcrumb-top">
                                    <div class="ms-breadcrumb-dropdownBox" style="display:none;">
                                        <!--SPM:<SharePoint:AjaxDelta id="DeltaBreadcrumbDropdown" runat="server">-->
                                        <!--SPM:<SharePoint:PopoutMenu
                                        Visible="false"
                                        runat="server"
                                        ID="GlobalBreadCrumbNavPopout"
                                        IconUrl="/_layouts/15/images/spcommon.png?rev=23"
                                        IconAlt="&#60;%$Resources:wss,master_breadcrumbIconAlt%&#62;"
                                        ThemeKey="v15breadcrumb"
                                        IconOffsetX="215"
                                        IconOffsetY="120"
                                        IconWidth="16"
                                        IconHeight="16"
                                        AnchorCss="ms-breadcrumb-anchor"
                                        AnchorOpenCss="ms-breadcrumb-anchor-open"
                                        MenuCss="ms-breadcrumb-menu ms-noList">-->
                                        <div class="ms-breadcrumb-top">
                                            <!--SPM:<asp:Label runat="server" CssClass="ms-breadcrumb-header" Text="&#60;%$Resources:wss,master_breadcrumbHeader%&#62;"/>-->
                                        </div>
                                        <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server">-->
                                        <!--SPM:<SharePoint:ListSiteMapPath
                                        runat="server"
                                        SiteMapProviders="SPSiteMapProvider,SPContentMapProvider"
                                        RenderCurrentNodeAsLink="false"
                                        PathSeparator=""
                                        CssClass="ms-breadcrumb"
                                        NodeStyle-CssClass="ms-breadcrumbNode"
                                        CurrentNodeStyle-CssClass="ms-breadcrumbCurrentNode"
                                        RootNodeStyle-CssClass="ms-breadcrumbRootNode"
                                        NodeImageOffsetX="0"
                                        NodeImageOffsetY="289"
                                        NodeImageWidth="16"
                                        NodeImageHeight="16"
                                        NodeImageUrl="/_layouts/15/images/fgimg.png?rev=23"
                                        RTLNodeImageOffsetX="0"
                                        RTLNodeImageOffsetY="312"
                                        RTLNodeImageWidth="16"
                                        RTLNodeImageHeight="16"
                                        RTLNodeImageUrl="/_layouts/15/images/fgimg.png?rev=23"
                                        HideInteriorRootNodes="true"
                                        SkipLinkText=""/>-->
                                        <!--SPM:</asp:ContentPlaceHolder>-->
                                        <!--SPM:</SharePoint:PopoutMenu>-->
                                        <!--SPM:</SharePoint:AjaxDelta>-->
                                    </div>
                                    <!--SPM:<SharePoint:AjaxDelta id="DeltaTopNavigation" BlockElement="true" 
                                        CssClass="ms-displayInline" runat="server">-->
                                    <!--SPM:<SharePoint:DelegateControl runat="server" 
                                        ControlId="TopNavigationDataSource" Id="topNavigationDelegate">-->
                                    <!--SPM:<Template_Controls>-->
                                    <!--SPM:<asp:SiteMapDataSource 
                                        ShowStartingNode="False"
                                        SiteMapProvider="SPNavigationProvider" 
                                        id="topSiteMap" 
                                        runat="server"
                                        StartingNodeUrl="sid:1002"/>-->
                                    <!--SPM:</Template_Controls>-->
                                    <!--SPM:</SharePoint:DelegateControl>-->
                                        <a name="startNavigation"></a>
                                    <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server">-->
                                    <!--SPM:<SharePoint:AspMenu 
                                        ID="TopNavigationMenu" 
                                        Runat="server" 
                                        EnableViewState="false"
                                        DataSourceID="topSiteMap"
                                        AccessKey="&#60;%$Resources:wss,navigation_accesskey%&#62;"
                                        UseSimpleRendering="true"
                                        UseSeparateCss="false"
                                        Orientation="Horizontal"
                                        StaticDisplayLevels="2"
                                        AdjustForShowStartingNode="true"
                                        MaximumDynamicDisplayLevels="2"
                                        SkipLinkText=""/>-->
                                    <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><link rel="stylesheet" type="text/css" href="http://store.patterns-online.com/_layouts/15/1033/styles/menu-21.css" /><div id="zz7_TopNavigationMenu" class=" noindex ms-core-listMenu-horizontalBox"><ul id="zz9_RootAspMenu" class="root ms-core-listMenu-root static"><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" title="Default Publishing Site" href="#" accesskey="1"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Default Publishing Site</span></span></a></li></ul></div><!--PE: End of READ-ONLY PREVIEW-->
                                    <!--SPM:</asp:ContentPlaceHolder>-->
                                    <!--SPM:</SharePoint:AjaxDelta>-->
                            </div>
                        
                            <!--END replace this with the Sharepoint menus -->
    
                            
                        
                                <!-- START replace this with the Sharepoint Search -->

                                <!--SPM:<SharePoint:AjaxDelta id="DeltaPlaceHolderSearchArea" BlockElement="true" CssClass="ms-mpSearchBox ms-floatRight" runat="server">-->
                                <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><div class="ms-mpSearchBox ms-floatRight" id="ctl00_DeltaPlaceHolderSearchArea"><!--PE: End of READ-ONLY PREVIEW-->
                                <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">-->
                                <div id="searchInputBox">
                                    <!--SPM:<SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox"/>-->
                                    <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><div class="ms-webpart-chrome "><div WebPartID="00000000-0000-0000-0000-000000000000" HasPers="true" id="WebPart" width="100%" class="ms-WPBody noindex " OnlyForMePart="true" allowDelete="false" style=""><div componentid="ctl00_SmallSearchInputBox1_csr" id="ctl00_SmallSearchInputBox1_csr"><div id="SearchBox" name="Control"><div class="ms-srch-sb ms-srch-sb-border" id="ctl00_SmallSearchInputBox1_csr_sboxdiv"><input type="text" value="Search This Site..." maxlength="2048" accessKey="S" title="Search This Site..." id="ctl00_SmallSearchInputBox1_csr_sbox" autocomplete="off" autocorrect="off" class="ms-srch-sb-prompt ms-helperText" /><a title="Search" class="ms-srch-sb-searchLink" id="ctl00_SmallSearchInputBox1_csr_SearchLink" href="javascript: {}"><img src="http://store.patterns-online.com/_layouts/15/images/searchresultui.png" class="ms-srch-sb-searchImg" id="searchImg" alt="Search" /></a><div class="ms-qSuggest-container ms-shadow" id="AutoCompContainer"><div id="ctl00_SmallSearchInputBox1_csr_AutoCompList"></div></div></div></div></div><div componentid="ctl00_SmallSearchInputBox1_csr" id="ctl00_SmallSearchInputBox1_csr"></div><div id="ctl00_SmallSearchInputBox1"></div><div class="ms-clear"></div></div></div><!--PE: End of READ-ONLY PREVIEW-->
                                </div>
                                <!--SPM:</asp:ContentPlaceHolder>-->
                                <!--PS: Start of READ-ONLY PREVIEW (do not modify)--></div><!--PE: End of READ-ONLY PREVIEW-->
                                <!--SPM:</SharePoint:AjaxDelta>-->
                        
                                <!-- END replace this with the Sharepoint Search -->
                        
                            </div>
                    </nav>                
                                
                                



             
                <div id="contentRow">
                    <div id="sideNavBox" class="ms-dialogHidden ms-forceWrap ms-noList">
                        <!--SPM:<SharePoint:AjaxDelta id="DeltaPlaceHolderLeftNavBar" BlockElement="true" CssClass="ms-core-navigation" role="navigation" runat="server">-->
                        <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderLeftNavBar" runat="server">-->
                        <a id="startNavigation" name="startNavigation" tabIndex="-1">
                        </a>
                        <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderLeftNavBarTop" runat="server"/>-->
                        <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderQuickLaunchTop" runat="server"/>-->
                        <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderLeftNavBarDataSource" runat="server"/>-->
                        <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderCalendarNavigator" runat="server"/>-->
                        <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderLeftActions" runat="server"/>-->
                        <div class="ms-core-sideNavBox-removeLeftMargin">
                            <!--SPM:<SharePoint:SPNavigationManager
                    id="QuickLaunchNavigationManager"
                    runat="server" 
                    QuickLaunchControlId="V4QuickLaunchMenu"
                    ContainedControl="QuickLaunch"
                    EnableViewState="false"
>-->
                            <!--SPM:<SharePoint:DelegateControl runat="server" 
						ControlId="QuickLaunchDataSource">-->
                            <!--SPM:<Template_Controls>-->
                            <!--SPM:<asp:SiteMapDataSource 
                                SiteMapProvider="SPNavigationProvider" 
                                ShowStartingNode="False"
                                id="QuickLaunchSiteMap" 
                                StartingNodeUrl="sid:1025" 
                                runat="server"
/>-->
                            <!--SPM:</Template_Controls>-->
                            <!--SPM:</SharePoint:DelegateControl>-->
                            <!--SPM:<SharePoint:AspMenu
                        id="V4QuickLaunchMenu"
                        runat="server"
                        EnableViewState="false" 
                        DataSourceId="QuickLaunchSiteMap"
                        UseSimpleRendering="true"
                        Orientation="Vertical"
                        StaticDisplayLevels="3"
                        AdjustForShowStartingNode="true"
                        MaximumDynamicDisplayLevels="0"
                        SkipLinkText=""
/>-->
                            <!--SPM:</SharePoint:SPNavigationManager>-->
                            <!--SPM:<SharePoint:SPNavigationManager
                        id="TreeViewNavigationManagerV4"
                        runat="server" 
                        ContainedControl="TreeView"
                        CssClass="ms-tv-box"
>-->
                            <!--SPM:<SharePoint:SPLinkButton runat="server" NavigateUrl="~site/_layouts/15/viewlsts.aspx" id="idNavLinkSiteHierarchyV4" Text="&#60;%$Resources:wss,treeview_header%&#62;" accesskey="&#60;%$Resources:wss,quiklnch_allcontent_AK%&#62;" 
                        CssClass="ms-tv-header"/>-->
                            <!--SPM:<SharePoint:DelegateControl runat="server" ControlId="TreeViewAndDataSource">-->
                            <!--SPM:<Template_Controls>-->
                            <!--SPM:<SharePoint:SPHierarchyDataSourceControl
                                    runat="server"
                                    id="TreeViewDataSourceV4"
                                    RootContextObject="Web"
                                    IncludeDiscussionFolders="true"
/>-->
                            <!--SPM:<SharePoint:SPRememberScroll runat="server" id="TreeViewRememberScrollV4" onscroll="javascript:_spRecordScrollPositions(this);" 
                                    style="overflow: auto;">-->
                            <!--SPM:<SharePoint:SPTreeView
                                    id="WebTreeViewV4"
                                    runat="server"
                                    ShowLines="false"
                                    DataSourceId="TreeViewDataSourceV4"
                                    ExpandDepth="0"
                                    SelectedNodeStyle-CssClass="ms-tv-selected"
                                    NodeStyle-CssClass="ms-tv-item"
                                    SkipLinkText=""
                                    NodeIndent="12"
                                    ExpandImageUrl="/_layouts/15/images/tvclosed.png?rev=23"
                                    ExpandImageUrlRtl="/_layouts/15/images/tvclosedrtl.png?rev=23"
                                    CollapseImageUrl="/_layouts/15/images/tvopen.png?rev=23"
                                    CollapseImageUrlRtl="/_layouts/15/images/tvopenrtl.png?rev=23"
                                    NoExpandImageUrl="/_layouts/15/images/tvblank.gif?rev=23" 
>-->
                            <!--SPM:</SharePoint:SPTreeView>-->
                            <!--SPM:</SharePoint:SPRememberScroll>-->
                            <!--SPM:</Template_Controls>-->
                            <!--SPM:</SharePoint:DelegateControl>-->
                            <!--SPM:</SharePoint:SPNavigationManager>-->
                            <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderQuickLaunchBottom" runat="server">-->
                            <div class="ms-core-listMenu-verticalBox">
                                <!--SPM:<SharePoint:ClusteredSPLinkButton
                                runat="server"
								id="idNavLinkViewAll"
                                PermissionsString="ViewFormPages"
                                NavigateUrl="~site/_layouts/15/viewlsts.aspx"
                                Text="&#60;%$Resources:wss,AllSiteContentMore%&#62;"
                                accesskey="&#60;%$Resources:wss,quiklnch_allcontent_AK%&#62;"
                                CssClass="ms-core-listMenu-item ms-core-listMenu-heading"/>-->
                                <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><a id="ctl00_idNavLinkViewAll" accesskey="3" class="ms-core-listMenu-item ms-core-listMenu-heading" href="#"><span class="ms-splinkbutton-text">All Site Content</span></a><!--PE: End of READ-ONLY PREVIEW-->
                            </div>
                            <!--SPM:</asp:ContentPlaceHolder>-->
                        </div>
                        <!--SPM:</asp:ContentPlaceHolder>-->
                        <!--SPM:</SharePoint:AjaxDelta>-->
                    </div>
                    <div id="contentBox" aria-live="polite" aria-relevant="all">
                        <div id="notificationArea" class="ms-notif-box">
                        </div>
                        <!--SPM:<SharePoint:AjaxDelta id="DeltaPlaceHolderMain" BlockElement="true" IsMainContent="true" runat="server">-->
                        <a id="mainContent" name="mainContent" tabindex="-1">
                        </a>
                        <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderMain" runat="server">-->
                        <div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black;">
            This area will be filled in by content you create in your page layouts.
		
                        
                        </div>
                        <!--SPM:</asp:ContentPlaceHolder>-->
                        <!--SPM:</SharePoint:AjaxDelta>-->
                    </div>
                    <!--SPM:<SharePoint:AjaxDelta id="DeltaFormDigest" BlockElement="true" runat="server">-->
                    <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderFormDigest" runat="server">-->
                    <!--SPM:<SharePoint:FormDigest runat="server"/>-->
                    <!--SPM:</asp:ContentPlaceHolder>-->
                    <!--SPM:</SharePoint:AjaxDelta>-->
                    <div class="ms-hide">
                        <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderSiteName" runat="server" Visible="false"/>-->
                        <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server" Visible="false"/>-->
                        <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderPageImage" runat="server" Visible="false"/>-->
                        <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderTitleLeftBorder" runat="server" Visible="false"/>-->
                        <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderMiniConsole" runat="server" Visible="false"/>-->
                        <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderTitleRightMargin" runat="server" Visible="false"/>-->
                        <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderTitleAreaSeparator" runat="server" Visible="false"/>-->
                        <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderNavSpacer" runat="server" Visible="false"/>-->
                        <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderLeftNavBarBorder" runat="server" Visible="false"/>-->
                        <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderBodyLeftBorder" runat="server" Visible="false"/>-->
                        <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderBodyRightMargin" runat="server" Visible="false"/>-->
                        <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat="server" Visible="true"/>-->
                        <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderTitleAreaClass" runat="server" Visible="false"/>-->
                        <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderGlobalNavigation" runat="server" Visible="false"/>-->
                        <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderGlobalNavigationSiteMap" runat="server" Visible="false"/>-->
                        <!--SPM:<asp:ContentPlaceHolder id="WSSDesignConsole" runat="server" Visible="false"/>-->
                    </div>
                </div>
            </div>
            <div>
                <!--Footer-->
            </div>
        </div>
        <!--SPM:<SharePoint:ScriptBlock runat="server">-->
        <!--SPM:var g_Workspace = "s4-workspace";-->
        <!--SPM:</SharePoint:ScriptBlock>-->
        <script src="/_catalogs/masterpage/Boot4Starter/dist/js/popper.min.js"></script>
        <script src="/_catalogs/masterpage/Boot4Starter/dist/js/bootstrap.bundle.min.js"></script>
        <script src="/_catalogs/masterpage/Boot4Starter/dist/js/custom.js"></script>
    </body>
</html>

ADD YOUR COMMENT