The HTML page failed to load the bootstrap.min.css stylesheet

I am currently working on a project using Java with Spring Boot in IntelliJ IDEA, managed by Maven. However, I am facing an issue when trying to connect bootstrap.min.css on my HTML page.

This problem seems to appear randomly without any clear cause. Interestingly, I have multiple projects that are identical, and some encounter this problem while others do not.

I am linking bootstrap.min.css the same way as shown on this page https://getbootstrap.com/docs/4.3/getting-started/introduction/

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>LoginPage2</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Upon checking the browser console, I see the following error message:

Refused to apply style from 'http://localhost:8081/static/css/bootstrap.min.css' because its MIME type ('application/json') is not a supported stylesheet MIME type, and strict MIME checking is enabled

javahtmlcssspring-bootbootstrap-4

Answer №1

My solution involved:

  • swapping out the following code
<link rel="stylesheet" href="/static/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1N" crossorigin="anonymous">

with this revised version

<link rel="stylesheet" href="/static/css/bootstrap.css">

  • Removing all comments from files bootstrap.min.css and bootstrap.css

  • Additionally, I explicitly registered the path to resources in the project using Spring Boot, for example:

@Configuration
public class StaticResourceConfig implements WebMvcConfigurer {
    private static final String[] CLASS_PATH = {"classpath:/"};

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**").addResourceLocations(CLASS_PATH);
    }
}
  • If Spring Security is used, ensure proper permissions are set for accessing the resources.

Answer №2

For individuals utilizing a locally downloaded version of bootstrap on their personal computers, it is suggested to eliminate the integrity and crossorigin attributes from the link. This adjustment should help resolve any issues you may be experiencing.

Answer №3

Give this a go!

Include the following two additional attributes in your link tag:

type="text/css" media="all"

<link rel="stylesheet" href="/static/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" type="text/css" media="all">

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

Sending gibberish array from static method back to main method for printing

Hey guys, I need help with my assignment where I have to print numbers in the main that were inputted from a static method. So far, I've tried two options but none of them seem to work properly. Option 1: Unfortunately, this one just prints gibberish ...

javaarraysmethodsstatic

Exploring the versatility of CSS variables in JavaFX

In need to style four buttons in a consistent way, but each one should have its own unique image. Three styles are required: one for normal state, and the others for hover and focused states. Using CSS for this task would involve a lot of repetition, as ...

cssjavafx

Contrasting characteristics of APNs certificates

Are there any differences between certificates for development and production servers? If I have my_certificate.p12 and provide that information for ApnService <bean id="apnsServiceFactory" class="org.apache.camel.component.apns.factory.ApnsServiceFa ...

javaiosapple-push-notifications

Plenty of blank space beneath the image

There seems to be an excess of white space under my image (shown below), but I can't figure out why. https://i.sstatic.net/uJkvF.png This is my current HTML setup: <img src="images/testserver2.png" class="centerimage" style="display: block; marg ...

htmlcss

Pick out grouped objects without the use of Javascript

I am looking to design a single page where the display of categorized items changes based on user selection. Ideally, I want this to be chapter/hash (:target) dependent, but checkboxes influencing state would also work. As an experiment, I am trying to ac ...

htmlcss

Enhance the user experience with a personalized video player interface

I am facing difficulty in creating a responsive video with custom controls. While I understand that using a <figure></figure> element and setting the width to 100% makes the video responsive, I am struggling with making the progress bar also r ...

javascriptcsshtmlvideo

What could be the reason that str_replace is failing to replace this particular string?

I am facing an issue with my PHP code that is intended to load data from a CSS file into a variable, find the old body background colour, replace it with a new colour submitted through a form, save the updated CSS file, and update the colour in a database. ...

phpmysqlcssstr-replace

Tips on incorporating data from a JSON file into a dropdown list on an HTML page using AJAX and JavaScript

Looking to extract data from a JSON file and populate two dropdown lists in HTML using AJAX and JavaScript. The goal is to have the data displayed in the first dropdown list, and when an option is selected, the related data should be shown in the second dr ...

javascripthtmljsonajax

Tips for entering a value into a text field using JavaScript with Selenium WebDriver

Currently, I am utilizing WebDriver in conjunction with Java. My aim is to insert text into a text field utilizing JavaScript. What would be the best approach to achieve this task? ...

javajavascriptselenium-webdriver

Center two lines of text in a div in a vertical fashion

After going through several articles on this topic, I've picked up some tricks for vertical alignment like using line-height for a single line of text, display:table for multiple divs, and Flexbox in CSS3. However, I'm still struggling to align t ...

htmlcssflexbox

Having trouble replacing scss variables in react-h5-audio-player

I recently integrated react-h5-audio-player into my project and followed the instructions on the README page to customize the styles by updating the SCSS variables that control the colors. However, it appears that my custom styles are not being applied. An ...

javascripthtmlcssreactjssass

Toggle a DIV's class using jQuery upon clicking a link, then hide the link and reveal the hidden information inside the DIV. This functionality can be applied to multiple

My main objective is to create a product page that showcases multiple product images within the productLayout DIV. When the link within this DIV is clicked, it should add the class pL100, expanding the width of the DIV to reveal hidden content within the h ...

htmladdclassremoveclassjquery

What is the process for implementing form validation in JavaScript?

I am currently learning JavaScript and trying to incorporate a form validation feature in my main.handlebars file. Below is the code snippet from my main.handlebars: <form method="post" action="/save" onsubmit="return validateform()" name="myForm"> ...

javascripthtmlnode.js

Exception thrown: SQLFeatureNotSupportedException when trying to retrieve an array

In my project using MySQL 5.5, STS 2.9.2, and mysql-connector-java-5.1.21-bin.jar, I encountered an issue. The goal was to retrieve an array from a ResultSet. My code looked like this: try { Connection conn = DriverManager.getConnection(url, id, pass) ...

javamysqljdbc

Ways to show ImageView after selecting a spinner item

private String[] genres = { "Action", "Adventure", "Comedy", "Biography", "Drama", "Family", "Horror", "Romance" }; private Integer imageResources[] = { R.drawable.img_action, R.drawable.img_adventure, R.drawable.img_biografy, R.drawable.img_comedy, R.dr ...

javaandroidandroid-imageviewandroid-spinner

Removing quotation marks from a string stored as a parameter in the MongoDB Java driver

I am currently working with the MongoDB Java driver and I have a code snippet that looks like this: doc = new BasicDBObject("Physicalentity", "Pressure"). append("Sensor", "Tinkerforge"). append("Unit", "Lux"). append("loc", Location). append("value", p ...

javajsonmongodbmongodb-java

Is it possible to assign a name attribute to the <img> tag in HTML?

Can the "name" attribute be used in an "img" tag in HTML? If you have this knowledge, please do share and thank you in advance. ...

htmlimageattributes

Send your data to Node.js in tabular form

I am facing an issue with sending an editable table to my Node.js server. The response I am getting is "undefined". How can I resolve this problem? All the elements of my form are being parsed successfully, except for the table. The server logs the follo ...

javascripthtmlnode.jsexpressbody-parser

Is there a way to programmatically click on a table row within each table?

As a beginner in automation using Selenium with Java, I am currently testing a scenario that involves Student form testing. I have encountered numerous issues while attempting to dynamically input first and last names into the corresponding fields, filte ...

javaseleniumselenium-webdriverautomated-tests

Tips for arranging divs in a row to switch to stacking when the screen size decreases

Sorry if this question seems repetitive, but as a newbie, deciphering posts from others has been overwhelming! I have two divs placed side by side within a wrapper, but I need them to stack on top of each other when viewed on a tablet or phone. Below is t ...

htmlcss