The minified version of Bootstrap's CSS will only be loaded when I explicitly import it in my index

I used to rely on BootstrapCDN for my styles, but now I want to download the files and use them locally. However, when I try to load the styles without an internet connection, they don't seem to work properly, especially the grid layout.

My current setup involves using ReactJS with Material UI and Bootstrap's grid components. You can take a look at my project structure.

I've updated the stylesheet links and scripts to point to my local files, adjusting jQuery and Popper.js tags accordingly.

CSS Changes:

Changed from:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"...>

To:

<link rel="stylesheet" href="../src/bootstrap/sources/css/bootstrap.min.css">

Updated JS Links:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"

Now:

<script src="../src/bootstrap/sources/js/bootstrap.min.js"></script>

I made similar adjustments for jQuery and Popper.js files as well.

However, even after making these changes, the grid layout is not functioning correctly. Strangely, if I include 

import './bootstrap/sources/css/bootstrap.min.css';
in my /src/index.js, where I handle private routes, the grid starts working again.

If I switch back to using BootstrapCDN and revert the links to how they were initially set up, the grid works fine without needing that extra import statement.

Could someone help me figure out what I might be doing wrong?

EDIT: I noticed in Chrome's network tab that all CSS and JS files are loading with a status code 304 - "not modified".

htmlcssreactjsbootstrap-4

Answer №1

Initially, there is no issue with including the CSS import in your JS file... So why worry about it? This method is frequently used in React applications.

Regarding the specific problem you mentioned: You are trying to reference a non-existent file like 

../src/bootstrap/jquery-3.2.1.slim.min.js
. This happens because the path is valid in your source code, but not in the final bundled version.

If you are using something like create-react-app, it's recommended to move your resources (such as the bootstrap folder) into the public directory instead. In this case, the correct URL should be something like 

"/bootstrap/jquery-3.2.1.slim.min.js"
. Alternatively, consider utilizing the %PUBLIC_URL% variable for better handling of URLs.

Refer to https://facebook.github.io/create-react-app/docs/using-the-public-folder for more information.

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

Identifying the camera model using getMediaStream

Are there methods available to determine if a user's device has a front, rear, or dual cameras installed? For instance, laptops typically only have a front-facing camera while some devices may have both. I am looking for a way to identify the type of ...

javascriptreactjstypescriptnext.js

Display a specific element only if another element exceeds a specified height

A snippet of HTML code is given below: <span class="day-number">{{day-number}}</span> <div class="event-box"> <div class="event-container"> </div> <div class="more-events">more ...</div> </div> The .e ...

javascriptjqueryhtmlcss

Clicking on the parent div with a Jquery onclick event does not trigger when the child image is clicked

I'm running into an issue with a simple code containing an image within a div Oddly enough, clicking on the div itself (even with padding) triggers the function, but clicking directly on the image does not. $(".parent0").click(function() { conso ...

javascriptjqueryhtml

The function makeStyle does not support the use of "this" keyword

My goal is to create a dynamic background image based on my props. I attempted to accomplish this by creating a React style and setting it to the picture stored in my state, but for some reason I am unable to use this.state.pictures. I'm not sure why. ...

reactjsmaterial-ui

Bits of code and the internet

When it comes to displaying code on the web, there are a few key steps involved: Encoding HTML entities Formatting The most basic workflow would involve: Start with a code snippet like: <html> I'm a full page html snippet <html>. ...

javascripthtmlangularjshtml-entities

The latest update of next.sj includes the enhanced GTM version 12.3 feature

https://i.stack.imgur.com/z8cYT.pngI successfully integrated GTM into Next.js (version 12.3.0) by adding it to the _app.tsx file using the Next.js Script tag and the _document.tsx body tag. _app.tsx import Script from "next/scri ...

reactjsperformancenext.jspagespeedlighthouse

ReactJS encountered an error: _this3.onDismissID is not defined as a function

My goal is to retrieve the latest news related to a specific search term from a website, showcase them, and provide a dismiss button next to each news item for users to easily remove them if desired. Here's a snippet of the code I'm using: import ...

javascriptreactjsfunctionthis

What steps should be taken in PHP to display a popup when the user input is found to be invalid?

I've been working on implementing a popup in PHP to show if the user enters an existing username, as per our teacher's requirement to use popUp instead of alert. I have set the visibility property of the popup to "Hidden" in CSS; <div class=&q ...

javascriptphphtml

Tips for utilizing the useState Hook in NextJs to manage several dropdown menus efficiently:

Currently, I am in the process of designing an admin panel that includes a sidebar menu. I have successfully implemented a dropdown menu using the useState hook, but it is not functioning exactly as I had envisioned. My goal is to have the if statement onl ...

javascriptreactjsreact-hooksnext.js

Can the Live Search fields be cleared?

In my current project, I am utilizing php and html files with Ajax to display the contents of a MySQL database on a webpage. The main file for displaying the contents is index.php, which retrieves data from fetch.php. I found helpful guidance on how to set ...

phphtmlmysqlajax

Javascript is experiencing a decrease in the variability of its content

I currently have multiple pages structured like this: <body> <table><tr><td align="center" width="100%"> --PAGE HTML-- </td></tr></table> </body> For a temporary period, I need to change the str ...

javascriptjqueryhtmlcss

Does the MUI Autocomplete API allow for the creation of multiple tags with the "enter" event when pasting space-delimited text?

In my reactjs application, I am utilizing the MUI Autocomplete control. Currently, when I paste custom space-delimited content (such as 3N1CE2CPXEL289419 3N1BC1AP8AL399166) and hit enter, a single tag is created for it as shown in the Autocomplete API imag ...

reactjsautocompletematerial-uijsx

Establishing headings and frames for a collection of Essays

I have integrated a RSS Feed into my Vue.js application to display a series of articles. I want to organize these articles in a container similar to tweets on the left, with a heading labeled Latest Articles. However, when I use a tag in the template sect ...

htmlcssnode.jsvue.js

Displaying a group of elements in ReactJS

I'm currently working on assembling an array using different JSX components. There's a function I've created that populates this array with components and then returns it. let components = []; switch (obj.type) { case 'title': ...

javascriptreactjsmaterial-ui

Adjust the dimensions of the thead, tbody, and td elements on the fly

I've implemented this property in a .css file on the table shown below and there are 9 records. .fixed tbody td, thead th { width: 5.2%; float: left; } In my scenario, when there are 4 columns, the width should be 23.2%; for 5 columns ...

javascriptjquerycss

Best practices for making an AJAX call to fetch information from a database

I have a database containing a single table. The table includes columns for Company and Time, among others, with Company and Time being crucial. Users can make appointments by filling out a form. Within the form, there are 2 <select> elements - one ...

javascriptc#jqueryhtmlajax

HTML video audio playing, but screen remains empty

I am facing an issue while trying to watch a video using HTML. The audio plays, but the video remains blank. The video is in MP4 format and can be found at this link. Interestingly, it works when downloaded and viewed, as my friend created it. I even tried ...

phphtml

Can the outcomes be showcased again upon revisiting a page?

Whenever I navigate away from and return to my filter table/search page, the results vanish. I'm looking for a way to preserve the results without reloading the page. Essentially, I want the page to remain as it was originally, with the search results ...

javascripthtmljquerycss

Tips for effectively utilizing Higher Order Components with React Hooks?

What is the optimal method for utilizing HOC when needing to retrieve data from a hook? There are two approaches: Passing the data received from the hook as a parameter to the HOC HOC: export const withAuth = ( isAuth: boolean, { ComponentForAut ...

reactjsreact-hooksreact-hoc

Tips for clearing a material-ui search input field with the help of a button

Currently, I am working on a tutorial that involves implementing react material-ui tables along with a search input textfield. I am attempting to enhance this by adding a button that not only resets the table report but also clears the search input textfie ...

javascriptreactjsmaterial-uiuse-state