Adding JQuery and Bootstrap references to Master Page

Question

I'm new to Sharepoint and I've a problem trying to add Jquery and Bootstrap references to a MasterPage. Just created a new master page (copied seatle.master to seatle2.master) and wanted to add:

<script src="/_catalogs/masterpage/jquery-2.1.4.min.js" type="text/javascript"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="/_catalogs/masterpage/bootstrap-3.3.5-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/_catalogs/masterpage/bootstrap-3.3.5-dist/css/bootstrap-theme.min.css">
<script src="_catalogs/masterpage/js/bootstrap.min.js"></script>

I've downloaded Jquery and Bootstrap into my server (testing server) and i'm using Sharepoint Designer to edit both Masterpage and site page.

My goal is to be able to create stuff with bootstrap and JQuery directly into the page (without using the Script Editor).

How and where should I insert the references in my Masterpage? Thanks

Answer 1

There are several ways to load jQuery and other resources. If you want to load them directly in your custom master page, there are also several places within the page to do so. Personally, I load them right under the CustomJSUrl line, like so:

This way, they get loaded before any page content, but AFTER the vanilla SharePoint scripts.

Answer 2

You could upload Bootstrap and JQuery files to a document library in SharePoint and use the Script Manager to load them on the masterpage.

<asp:ScriptManager id="ScriptManager" runat="server" EnablePageMethods="false" EnablePartialRendering="true" EnableScriptGlobalization="false" EnableScriptLocalization="true">
    <Scripts>
        <asp:ScriptReference Path="<%$SPUrl:~SiteCollection/YourDocLib/jquery.min.js%>"></asp:ScriptReference>
    </Scripts> 
</asp:ScriptManager>

Answer 3

Assuming it is SharePoint-Server and and you are changing the Master Page you can do this

Style Sheets can be referred in Master Page by adding CssLink control in header section of Master Page. Find below the sample for adding Style Sheet reference directly in Master Page. Add the below code inside the head tag of Master Page.

<SharePoint:CssRegistration  ID="CssRegistration1" Name="<% $SPUrl:~SiteCollection/_layouts/15/SFS.Ashok.Refer/Styles/sitecol-master.css%>" runat="server" After="corev15.css" />
<SharePoint:CssRegistration  ID="CssRegistration2" Name="<% $SPUrl:~Site/_layouts/15/SFS.Ashok.Refer/Styles/site-master.css%>" runat="server" After="corev15.css" />

Referring JavaScript is fairly strait forward in Visual Web Part. The Script Link is the best option to go for. The below is the code snippet to refer script in Visual Web Part.

<sharepoint:scriptlink runat="server" name="~SiteCollection/_layouts/15/SFS.Ashok.Refer/Scripts/sitecol-visualwp.js" > </sharepoint:scriptlink>
<sharepoint:scriptlink runat="server" name="~Site/_layouts/15/SFS.Ashok.Refer/Scripts/site-visualwp.js" > </sharepoint:scriptlink>

more information here

Answer 4

Use the following code to add the jQuery and Bootstrap reference:

<SharePoint:ScriptLink ID="ScriptLink7" language="javascript" name="~SiteCollection/Style Library/Style/js/jquery-1.10.2.min.js" runat="server" />
<SharePoint:Scriptlink ID="Scriptlink140" runat="server" name="~SiteCollection/Style Library/Responsive Style/js/bootstrap.js" language="javscript" />
<SharePoint:Scriptlink ID="Scriptlink160" runat="server" name="~SiteCollection/Style Library/Responsive Style/js/bootstrap.min.js" language="javscript" />
<SharePoint:Scriptlink ID="Scriptlink180" runat="server" name="~SiteCollection/Style Library/Responsive Style/js/CustomJS.js" language="javscript" />

Add these below the

<SharePoint:ScriptLink language="javascript" name="suitelinks.js" OnDemand="true" runat="server" Localizable="false" />

This worked for me when I had to achieve a similar functionality.