Issues with bootstrap and jQuery functionality in SharePoint 2013 are causing operational disruptions

Having an issue with UI on Bootstrap in SharePoint 2013. I have ensured that all CSS and JS file paths are correct, but when I change the CDN link using Firebug, it works fine (only functional through Firebug). I'm puzzled as to why it's not working directly from SharePoint. Can anyone please help me?

File Paths:

<link href="../../_layouts/15/Site/css/bootstrap.min.css" rel="stylesheet">
<script src="../../_layouts/15/Site/js/jquery.min.js" type="text/javascript"></script>
<script src="../../_layouts/15/Site/js/bootstrap.min.js" type="text/javascript"></script>

CDN:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>

The CDN only works when changed via Firebug. It still doesn't function properly from SharePoint even after compiling.

csssharepointtwitter-bootstrap-3sharepoint-2013

Answer №1

Directly access the layout

Modify the path to:

<link href="/_layouts/15/Site/css/bootstrap.min.css" rel="stylesheet">
<script src="/_layouts/15/Site/js/jquery.min.js" type="text/javascript></script>
<script src="/_layouts/15/Site/js/bootstrap.min.js" type="text/javascript></script>

For an improved approach, consider using ~SiteCollection and ~Site with Sharepoint:scriptLink

<SharePoint:ScriptLink ID="ScriptLink1" Name="~SiteCollection/_layouts/...js" runat="server" />

<SharePoint:CssRegistration  ID="CssRegistration1" Name="<% $SPUrl:~SiteCollection/_layouts/....css" %>" runat="server" After="corev15.css" />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to align the navbar items in the center?

Is there a way to center the navigation bar elements using Bootstrap? HTML <body> <nav class="navbar navbar-inverse navbar-fixed-top " role="navigation"> <div> <ul class="nav navbar-nav"> ...

htmlcsstwitter-bootstrap

Alignment of link items within a Bootstrap 4 hamburger menu

Is there a way to display the menu items below instead of to the left? Check out this jsfiddle for more details. Additionally, I am looking to keep the hamburger icon in place and prevent it from moving when clicked. Here is a GIF showing the current beh ...

htmlcssbootstrap-4

Troubleshoot: Inline Styling Problem with Bootstrap 4 Popover

Is there a way to dynamically change the color of the Bootstrap 4 popover title using inline HTML style attributes? It seems that the plugin is removing them without any logical reason. Below is an example demonstrating this issue: $('#test'). ...

javascripthtmlcssbootstrap-4

Trouble with closing Bootstrap 4 modal

My Bootstrap 4 modal is causing issues as it pops up on button click but won't close unless I refresh the page. I've been attempting to get it to close by clicking the 'close' button or simply by clicking anywhere on the main page body. ...

javascripthtmlcssbootstrap-4

The dropdown menu I implemented is causing nearby HTML elements to be displaced downwards

I have a project where I added a dropdown menu to the navbar, but for some reason when toggled, it seems to push the HTML down. I've tried setting its position to absolute and top to 100%, but it didn't solve the issue. The project is built using ...

htmlcssbootstrap-4

What are some techniques for concealing a CSS transition beneath another element in both directions?

Witness the magic in action! By clicking on the black box below, a larger black box will gracefully emerge from beneath the sidebar. While it may not be as clear in jsfiddle, rest assured that this effect is more pronounced in browsers. Thanks to some clev ...

javascriptjqueryhtmlcsscss-transitions

Utilizing GSAP for crafting a dynamic horizontal scrolling section

I am currently working on creating a unique section that transforms into a horizontal scroller once the items (in this case, images) are visible, and then reverts to a vertical scroller once all the items have been scrolled through. My inspiration and ada ...

javascriptjquerycssgsapscrolltrigger

Styling HTML tables with CSS for optimal row sizing

I am encountering an issue with a table that I created. The first row consists of Table Headings, and it seems that the size of the letters in the second row differs from the third row. <table> <tr> <th>1</th> <th>2</ ...

htmlcsshtml-tablerow

Is there a way to determine the dimensions of the print area?

Looking to find the print area size in pixels for content calculation purposes. I am using the following CSS for sizing: @page { size: 11in 8.5in; margin: 1in; } ...

javascripthtmlcssprinting

The header in datatables.net is positioned on the side of the table rather than at the top

I am currently facing an issue with my datatables.net datatable. While all the columns and header are displaying properly, I am unable to position the header on top of the table. Instead, it appears on the side. Here's a visual representation: Curren ...

javascriptjqueryhtmlcssdatatables

`Switching between two buttons: A guide`

Here is the codepin: https://jsfiddle.net/magicschoolbusdropout/dwbmo3aj/18/ I currently have a functionality in my code that allows me to toggle between two buttons. When I click on one button, content opens and then closes when clicked again. The same b ...

javascripthtmljquerycss

What steps can be taken to default to a Google web font when Helvetica is not available on the user's device?

Is there a way to have a font fall back to a specific one on Google Web Fonts (Open Sans) if the user does not have Helvetica installed? I'm looking for an efficient method where downloading the font is only necessary if needed. For example, I don&ap ...

htmlcssfontsfont-face

setTimeout does not include the function showBox

Whenever I use console.log(this.showBox) inside the setTimeout() function, it unexpectedly returns undefined instead of false. Could someone please explain if the setTimeout() affects the accessibility of this.keyword? Thank you! <script> import Bl ...

javascripthtmlcssvue.js

CSS file unable to be retrieved by the server

I am using the lampp server on Linux. My homepage, home.php, is saved inside the htdocs folder which also contains a css folder with all the necessary CSS files. A snippet of my home.php file includes HTML code without PHP embedded yet. <html> <h ...

phphtmlcssapachelampp

Bootstrap 4: Concealed and Revealed Columns?

Is anyone else experiencing an issue where xs is hidden in xs views? I have a hunch it might be due to changes in Bootstrap v4, but I'm curious if there's a way to still make it work without delving into the CSS. My current setup uses the default ...

csstwitter-bootstrapbootstrap-4

Creating a table with multiple rows condensed into a single row (Using Material-UI/CSS)

Here is the array structure I am working with: const sample = [ { name: 'apple', detail: [{'a', 'b'}]}, { name: 'banana', detail: [{'a', 'b'}]}, ]; In order to create a table similar to the ...

cssreactjsuser-interfacehtml-tablematerial-ui

Emails in Dark Mode: Enhancing the User Experience

I am currently working on a project involving emails and I need to implement a dark mode for the email body. The email body is comprised of HTML with specific color styles defined. My objective is to change the text and background colors to create a dark m ...

htmlcssfrontenddarkmode

Tips for adding a numerical prefix to each line when the textarea is in editable mode

After conducting extensive research on Google, I have been unable to find a satisfactory solution. What I am aiming for is similar to the concept illustrated in this image: https://i.sstatic.net/iq6DE.png I should mention that my current technology stack ...

javascripthtmlcssangularjs

Sticky Position Not Functioning Properly in Flexbox Layout

I've attempted to use align-self: flex-start, but it had no effect. The main flex container is on the right side of my page (flex-direction: column) and I want one block of flex columns to stick once I scroll down to them. I enclosed a container aroun ...

htmlcssflexbox

Maintaining hover functionality of menu button while navigating through sub-menu options

Creating a CSS dropdown menu is straightforward, but maintaining the hover state on the main menu button while navigating through the dropdown selections can be tricky. In the past, I used JavaScript to change the class and retain the background image, but ...

cssdrop-down-menu