I'm confused as to why my external CSS file isn't cooperating with Bootstrap 4

I am facing an issue with loading an external CSS file into my index.php. I have placed the external CSS file at the end of all other CSS files like bootstrap and font awesome. However, when I try to make changes to the design using the code in the external CSS file, it doesn't seem to take effect because I suspect that it's not loading on my webpage.

Below is the code snippet from my index.php file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" href="img/favicon.ico">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/fontawesome-all.min.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
   <?php include 'header.php'; ?>
   
   <div>
       
   </div>
   
   <?php include 'footer.php'; ?>
   
   <script src="js/jquery-3.3.1.min.js"></script>
   <script src="js/popper.min.js"></script>
   <script src="js/bootstrap.bundle.min.js"></script>
   <!--<script type="text/javascript" src="http://www.google-analytics.com/ga.js"></script>-->
</body>
</html>

Here's the code in my header.php file:

<header class="navbar">
    <nav class="navbar navbar-expand-md bg-light navbar-light fixed-top">
        <!--<a class="navbar-brand" href="index.php">O.S.P</a>--> 
        <a class="navbar-brand" href="index.php">
            <img src="img/osp_logo_1.jpg" alt="logo" style="width:40px">
        </a>
        <span class="navbar-text">Online Service Provider</span>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav mx-auto">
                <li class="nav-item active mr-sm-5"><a class="nav-link" href="index.php">Home</a></li>
                <li class="nav-item dropdown mr-sm-5">
                    <a class="nav-link dropdown-toggle" href="services.php" id="navbardrop" data-toggle="dropdown">Services</a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Services Type 1</a>
                        <a class="dropdown-item" href="#">Services Type 2</a>
                    </div>
                </li>
                <li class="nav-item mr-sm-5"><a class="nav-link" href="about-us.php">About Us</a></li>
                <li class="nav-item mr-sm-5"><a class="nav-link" href="sign-in.php">Sign In</a></li>
                <li class="nav-item"><a class="nav-link" href="sign-up.php">Sign Up</a></li>
            </ul>
        </div>
        <form class="form-inline" action="">
            <input class="form-control mr-sm-2" type="text" placeholder="Search">
            <button class="btn" type="submit">
                <i class="fa fa-search"></i>
            </button>
        </form>
    </nav>
</header>

And this is the code in my external CSS file index.css:

body{
    background-color: darkgrey;
}
.form-inline .form-control{
    width: 200px;
}

I am trying to change the width of the search box, but even after loading the external CSS file, the change is not reflected on the webpage.

Answer №1

It's possible that your file path is incorrect.

Check to see if all your CSS files are in the same folder and correct your syntax like this:

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="fontawesome-all.min.css">
<link rel="stylesheet" href="index.css">

Refresh your page.

If this resolves the issue, it's likely due to a relative path css/index.css. To the browser, it appears as if you are trying to reference mywebsite.com/css/index.css. Add './' before css/index.css.

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

A set of six DIV's, divided into two columns of three each

I'm attempting to arrange two columns with three vertical DIVs side by side. The left column is designated for main text, while the right column is reserved for miscellaneous information. Each column consists of a top and bottom DIV that display image ...

Iterating over a range of values with _.each()

Can someone help me figure out why my syntax is incorrect for applying two values from different iteratees (day.classes and event.part) on line 5? <div class="days"> <div class="headers"> <% _.each(daysOfTheWeek, function(day) { %&g ...

Is there a way to nest my form within another form and utilize just one submit button for both?

<form action="<?php $self ?>" method="post"> <h2>LundaBlogg</h2> <div class="fname"><label for="name"><p>Namn:</p></label><input name="name" type="text" cols="20" onkeyup="En ...

Is the form data in AngularJS not submitting correctly?

Why is my HTML form data not being submitted using POST method? HTML View Page:- <div class="col-sm-12"> <div class="card-box"> <form class="form-inline" name="addstock" ng-submit="saveStockPurchaseInvoice()"> <h ...

How to position button components at the center in a NextJS application?

Incorporating a button within my nextjs page has been a challenge as I am striving to position it in the center of the page for optimal viewing on both PCs and mobile devices. Despite various attempts, the button remains fixed on the far left side of the p ...

Display a full-screen image and align it horizontally from the center using CSS styling

When I fill a screen with an image using the following code: width:auto; height:100%; The image fills the screen vertically and almost entirely horizontally, but it gets cropped off on the right side. Is there a way to make the image float centered on th ...

Implement various class versions tailored specifically for mobile browsers

While editing a Wordpress theme, I decided to include a content box within Bootstrap's <div class="well">. However, I soon encountered an issue where there was excess space in the content box on desktop view. To address this, I removed the paddi ...

Deciding Between Javascript DOM and Canvas for Mobile Game Development

My idea for a mobile game involves using the Phonegap framework to create a game where players can control a ball's movement by utilizing their phone's accelerometer. I also envision incorporating other elements like enemies and walls into the ga ...

Nested elements not transitioning using CSS

Why is my transition not being applied to the submenu <a> tag? The color change is working fine, but the transition does not occur on hover. When I use the same rules on another element with a different main class, it works perfectly. It seems like t ...

Customize the default styles for Angular 2/4 Material's "md-menu" component

Seeking to customize default styles of md-menu in Angular Material. The challenge lies in the dynamic generation of elements by Angular Material, preventing direct access from HTML. Visual representation of DOM: https://i.sstatic.net/v8GE0.png Component ...

Menu items on the responsive design are vanishing

I am facing an issue with my sample menu layout. It appears fine on desktop view, but when I switch to a smaller window size of 480px, the items from About to Contact disappear when I hover away from the last item in the .has-children class. It seems like ...

What is preventing this code from setting the background color of the main content all the way to the bottom of the

I designed this webpage using HTML and CSS. ... #contents { margin: 0px; padding: 0px; width: 100%; background-color: white; color: black; border-top: 3px solid black; background-image: url(img/CloverImage.png); background ...

Utilize the href attribute on an image, whether it be through a class

I work as a designer and I'm looking to extract the same href link from class="kt-testimonial-title", either in id="slick-slide10", or in class="kt-testimonial-item-wrap kt-testimonial-item-0", or in class="kt-testimonial-image". Can this be achieved ...

Tips for achieving a full div image on hover

I'm having trouble with my CSS code for an image hover effect in a div. The image is appearing larger than the div and leaking out of it. How can I make sure the image stays contained within the div? Here's the updated CSS code: img { display ...

The property 'scrollHeight' is undefined and cannot be read

I've created a messaging system using javascript and php, but I'm facing an issue. When new messages are received or the chat log grows longer, it creates a scrollbar. The problem is that when a new message arrives, the user has to manually scrol ...

Populate the div with the URL parameter only when another span element is empty after a specified time interval using setTimeout

When displaying a person's name on a page, there are two different methods to consider. It can be extracted from the URL or retrieved from an email form in the CMS used. However, these two approaches sometimes conflict with each other. Currently, I h ...

The webpage loaded through ajax is not rendering correctly

One of the challenges I'm facing is getting a JavaScript script to load an HTML page into a specific div element on another HTML page: The page that's being loaded, startScreen.html, looks like this: <!DOCTYPE html> <html lang="en ...

A tutorial on implementing a "Back to Top" button that appears dynamically while scrolling in Angular

I've developed a scroll-to-top feature for my Angular project, but I'm facing an issue. The scroll icon appears immediately upon page load instead of only showing after the user scrolls down. Any ideas or suggestions on how to achieve this? Here ...

Issues with Bootstrap nav-tabs functionality have been reported in the 4.6 version specifically within an asp webform environment

I am currently working with Bootstrap 4.6 and attempting to utilize the nav function to create navigation tabs. However, I am encountering an issue where clicking on another tab does not trigger the expected behavior. The code snippet in question is as fol ...

Steps to customize the Spark theme in Flex 4

In the default Spark theme in Flex 4, what type of styling is included? Additionally, how can one override the Spark theme? For instance, when attempting to change the background color but seeing no effect, even though the CSS code appears correct. Here&ap ...