Failure to apply Bootstrap Stylesheet

On certain pages, I have included Bootstrap.

On one particular page, I have an alert styled with Bootstrap.

This is how it's defined:

 $('#wrongPasswordDiv').html('<br/><div class="alert alert-danger" id="wrongPWAlert" role="alert">Incorrect password. Please try again!</div>');

Prior to that, the Bootstrap CSS file is included:

<link rel="stylesheet" type="text/css" href="/bootstrapcss" />

bootstrapcss is linked to the correct CSS file.

In the network tab, it is evident that Bootstrap is loading correctly:

https://i.sstatic.net/n9B7a.png

However, even though it is loading, the classes are not being applied.

When I switch to using a CDN to include Bootstrap, the classes are applied perfectly.

I am puzzled as to why the problem occurs, as Bootstrap is loading in both cases, but the styles are only being applied when loading from the CDN.

Any thoughts on why this might be happening?

Edit: After experimenting, it turns out that loading the CSS directly instead of through the router works. Interestingly, the same line works fine in another file, indicating that the routing is functioning properly as the file is being loaded.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Don't overlook the key detail: remember to navigate to the folder before the first slash in the address:

<link rel="stylesheet" type="text/css" href="./bootstrapcss" />

Answer №2

Kobi provided the solution in another post for this specific question:

By following this path:

$router->map('GET','/bootstrapcss','example.css','bootstrapcss'); Also

when making a match:

$match = $router->match();


 if($match['name'] === 'bootstrapcss'){
    header("Content-Type: text/css");
    $fileName = $match['target'];
    echo file_get_contents($fileName);
    return; }

You can find the complete solution here.

Appreciate the assistance once again!

Answer №3

make sure you include the correct file extension in your html code

<link rel="stylesheet" type="text/css" href="/bootstrap.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

How can I arrange individual events in agendaWeek view on FullCalendar.io and then merge them all into one line?

I am using Fullcalendar.io version 2 When I switch to the agendaWeek mode, all my events are displayed on one line in each day square. As a result, the more events I have, the thinner the event blocks become. Is there a way for me to display only one eve ...

javascriptjquerycssfullcalendar

How can I achieve a smooth opacity transition without using jQuery?

Although I understand that JQuery offers functions for this purpose, I am interested in finding a solution using only pure javascript. Is there a way to change the CSS opacity setting over time? Perhaps utilizing a unix time stamp with millisecond precisi ...

javascriptjquerycss

What is the purpose of using an img tag to retrieve a URL that is not an image?

Upon investigating a slow page load, I came across something interesting in the HTML: <img src="/ajax?action=askedAboutCookies" style="display:none" width="0" height="0" alt="" /> When the page loads, it sends a request but never receives a respons ...

javascriptjqueryhtmljson

Having trouble getting items to align properly in Bootstrap

As a student, I am struggling with my development skills while attempting to create a personal website. I am encountering difficulty aligning items on my rows in bootstrap. Here is what I am trying to accomplish: 1. However, I am currently stuck at this po ...

htmlcsstwitter-bootstrap

AngularJS making a HttpPost request resulting in a 500-Internal Server Error

I'm currently working on an application where I need to include a user in the database which requires a POST operation. However, every time I try to run the application, I encounter a 500-Internal Server Error for the POST API call. Here is a snippe ...

javascripthtmlangularjsasp.net-mvcasp.net-web-api

Is there a way to redirect the user directly to the upload page without displaying the response?

Recently, I came across this code snippet that adds a progress bar to an upload form. Currently, the code displays the response from the upload page below the form. However, my goal is to redirect the user to the upload page so they can view the response t ...

javascriptphpjqueryhtmlajax

A step-by-step guide to dynamically binding values to all browser tabs using localStorage and AngularJS

I currently have two files named index.html and server.js in my project. Within my code, I am utilizing local storage to retain text data across tabs. Below is the snippet of my implementation. I have two main queries: 1. Will the data persist when I clo ...

javascriptangularjshtml

The numbering in the list does not align vertically with the corresponding content

I am attempting to create an ordered list with collapsible sections inside the li elements. The goal is to display basic information about a specific context, and when clicking on a link, additional details are shown. While the code is functional, I am fac ...

csstwitter-bootstrapbootstrap-5

Show 1 Blog Post on a Separate AngularJS Page

I would like to show only Test Post 1 on the next HTML page titleDetails.html when the user clicks on Test Post 1 in index.html 1) titleDetails() in index.html: <a ng-click="titleDetails(post)">{{ post.title }} </a> 2) Controller Variables a ...

javascripthtmlangularjs

Trouble getting CSS and Javascript to bind when dynamically appending HTML elements

Attempting to dynamically bind HTML from an Angular controller SkillsApp.controller('homeController', function ($scope, $http, $q, $timeout) { $scope.getAllCategories = function () { $http({ url: "/Categories/GetAllCategories", ...

javascriptjqueryhtmlcssangularjs

php redirecting form data

Being a beginner in PHP, I'm aiming to create a script that can direct me to a specific address based on the value of an input form. Is this the right approach? index.html <form action="process.php" method="post"> <input type="text" nam ...

phphtmlforms

Guide on hosting two html pages on a NodeJS server

Currently, I am in the process of learning NodeJS and Javascript with a goal to construct a basic server that can host 2 HTML pages. One page should be accessible via localhost:3000/index, while the other can be reached through localhost:3000/about. While ...

javascripthtmlnode.jsserver

Wrap text elegantly around your images with Flex Mobile

Looking to develop a component for a Flex Mobile app that will allow me to have text wrapped around an image, similar to what you see in articles or blogs. In HTML, this can be achieved with a tag like: <image align='right' /> associated t ...

htmlimageapache-flexmobile

Embedding a CSS class within the primary class selector

Can someone help me with this HTML challenge? <div class="span3"> <div class="abc">code for first div</div> <div class="abc">code for second div</div> </div> I'm trying to hide the first "abc" division within th ...

htmlcss

What is the best way to duplicate an image on both sides in a vertical manner?

I've successfully implemented a background image on the left side of the website, however, I'm facing difficulty in replicating the same effect on the right side of the webpage. <style> body { background-image: url('background. ...

htmlcss

Is it possible to show a specific portion of an image based on its size using only CSS?

Is there a way to use CSS to display only a specific part of an image based on its width and height? If not possible with CSS alone, would TypeScript be a solution? For example, if I have an image that is 2,434px × 1,697px inside a div that is 700x700, h ...

csstypescript

PHP code fails to set a hidden element within a form array

My current project involves sifting through a modest PHP application to debug and enhance it. One snag I've come across is that what should be updates are instead treated as deletes and inserts. To rectify this, I've made some adjustments. Speci ...

phphtml

Does the icon vanish once you alter the button's color?

Warning: Adult content Check out this website: link When you visit this page, you'll notice that the Add to Cart button is orange. The button also has an icon of a shopping cart. This icon only appears if you remove the following code. To make th ...

htmlcss

Tips for centering text with a Bootstrap switch

Currently, I am in the process of creating a form using Bootstrap, and I have been progressing well, except for one issue. I want to integrate a switch type checkbox into the form, with a label on top and text on either side of it. Despite several attempts ...

htmlcsscss-positionbootstrap-5

"Efficiently Triggering Multiple Events with One Click in JavaScript

Hey everyone, I could use some assistance. I'm trying to execute multiple events with a single click. Currently, I can change the image in my gallery on click, but I also want to add text labels corresponding to each image. Whenever I click on a diffe ...

javascripthtmljquerycssdom-events