I am experiencing difficulties getting my custom CSS styles to appear on my webpage despite using Bootstrap

I recently entered the world of Bootstrap and decided to take an online class to learn more about it.

During the course, I discovered that I could create custom CSS classes to enhance my webpage.

So, I set up a folder named my project folder and added the path to the head of my page like this:

 <!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" herf="css/styles.css">

However, I noticed that the CSS effects were not showing on my webpage as expected

.footer{
    background-color: #D1C4E9;
    margin: 0px auto;
    padding: 20px 0px 20px 0px;
}

Just for reference, I am using Sublime as my text editor and running Ubuntu 20 on my system.

cssbootstrap-4

Answer №1

UPDATE 1.1 The template you are viewing is the Bootstrap starting point template, not the one you originally referenced.

<!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">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1d1ced1d1c4d38fcbd2e1908f90978f90">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </body>
</html>

This template is a blank canvas for your creativity to flourish. For ideas and inspiration, explore the component section on the Bootstrap website @ https://getbootstrap.com/docs/4.5/components/. Incorporating components within the body tag will kickstart your project.

Bootstrap leverages Content Delivery Networks (CDNs) to efficiently load stylesheets and JavaScript files. CDNs enhance page loading speed by reducing the distance between server and user. They offer superior performance without relying on local paths.

It's advisable to utilize CDNs with a backup plan in case of connectivity issues. If facing problems, ensure your local pathing is accurate before considering alternatives to CDNs.

Answer №2

Your CSS link contains a typo. The word href is misspelled, which is why your CSS is not being detected.

Incorrect:

<link rel="stylesheet" herf="css/styles.css">

Correct:

<link rel="stylesheet" href="css/styles.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 proper method for updating _variables in the latest version of Bootstrap, 4.3.1?

I am currently utilizing Bootstrap 4.3.1 within my Angular 8 project and I aim to customize some of the default variables in Bootstrap, such as $font-size-base. Despite attempting the following code, it does not seem to be effective. Can someone provide g ...

angularbootstrap-4angular8ng-bootstrapangular-bootstrap

I am facing an issue with the responsiveness of the mat-card component within a div in

Is it possible to display several small paper cards in a div so that they wrap around the container? ...

htmlcssangularjsangular-material2

What is the best way to implement a front-end CSS style for text instead of a background style?

I have HTML text I want to style with a color like rgba(0,0,0,0.1), but I want the color to appear above or on top of the text, not below or behind it. Issue: How can I accomplish this? (CSS or JavaScript solutions are welcome). Thank you in advance for ...

javascripthtmlcss

ReactJS does not update the conditional CSS class when hovering with mouseOnEnter or mouseOnOver

I am currently attempting to showcase data in a table where each row features an info icon that is only visible upon hovering. Additionally, I want a pop-up to appear when the info icon is clicked (there is an onclick function assigned to this button). He ...

javascriptcssreactjsreact-nativereact-redux

Highlighting rows using jQuery upon selecting checkboxes

I attempted to emphasize a row in a table using jQuery when the checkbox is checked. This is the jQuery code I used for this purpose: $(":checkbox").change(function() { $(this).closest("tr").toggleClass("highlight", this.checked); }); However, it see ...

jqueryhtmlcsscheckboxhtml-table

A surprise awaits in IE with the unusual appearance of a div display

body { background: #9cdcf9 url(/images/left_cloud.png) bottom left no-repeat; font-family:\"Trebuchet MS\"; padding:0; margin:0; border:0; } #cloud-container { width: 100%; background: url(/images/right_cloud.png) bott ...

htmlcssinternet-explorer

What is the method for writing to an HTML file with the use of expressjs?

Alright, I have an interesting idea here. I am looking for a way to allow users to push a button and have a new p element permanently added to the HTML file. This means that even after reloading the page, everyone should be able to see this new element. An ...

javascripthtmlcssnode.jsexpress

The configuration of DataTables with the rowGrouping plugin and specifying aoColumns definitions encountered issues

Currently, I am in the process of working on a table that utilizes rowGrouping. Up until now, working with datatables has been smooth sailing for me. However, I have encountered some challenges with my current datatable implementation. The table is initia ...

phpjqueryhtmlcssdatatable

The Bootstrap CSS styles seem to be malfunctioning following the upgrade from Angular 4 to Angular 5

Developed a Single Page Application with Angular 4 and .NET Core 2, integrated with Bootstrap for styling. However, upon upgrading from Angular 4 to Angular 5, the Bootstrap styling disappeared. It seems that the bootstrap.css file is not being loaded cor ...

cssangular

Vue Quasar Drawer Layout with Bottom Bar

Struggling to implement a footer in my q-drawer. Below is the template and component code I am currently using: <template> <q-layout view="hHh lpR fFf"> <q-header elevated> <q-toolbar> <q-btn flat de ...

cssvue.jsquasar-framework

Place the text over the svg illustration

Could you help me with moving the letter "s" to where the grey box is located? I attempted to do it using CSS, but it ended up affecting the responsiveness of the layout. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cg ...

svgbootstrap-4

Display a hidden div only when a cookie is set during the initial visit

I'm currently facing an issue while trying to set multiple cookies based on the existence of a div using JavaScript. On the first visit, I want to display the div to the user if it exists, then set a cookie (named redCookie) that expires in 3 days. Up ...

javascriptjquerycsscookies

The Jssor bullet navigator is not visible on the webpage

Currently, I am working on implementing a full-width slider with arrow navigators, bullet navigators, and captions using the Jssor plugin. Rather than copying and pasting example code, I decided to tackle this project independently with just a little guida ...

javascriptjqueryhtmlcssjssor

CSS Boxes Misaligned - Need Correcting

Feeling a bit frustrated with CSS at the moment, always getting tripped up by the little things. So here's my issue: I'm working on a design that requires 2 columns - one sidebar of 300px on the right, and the other column should fill the remaini ...

csshtml

Trigger a 'change password' notification using Javascript

Issue: I am currently working on developing a web application that includes a password change functionality without the use of form submission. The process I have in mind is as follows: Show a Bootstrap modal pop-up User enters new password Upon clickin ...

javascriptvue.jsoptimizationbootstrap-4passwords

Incorporating Sass into Django

As I delve into my Django Project, one question looms large: where exactly should all my Sass files be placed? Is it more practical to create a central 'Sass' folder within the main Project Folder or designate a 'Sass' directory for eac ...

pythoncssdjangowebsass

Arrange two divs on either side of the center div when on a smaller screen

Looking for a straightforward approach to achieve this. Imagine it as follows: [A][__B_][A] to [A][A] [__B_] I hope that explanation is clear, but I'm happy to provide more details if necessary. Thank you in advance! ...

htmlcss

Implementing a sticky second Navbar with Bootstrap 5 and Vanilla JavaScript to stay fixed at the top during scrolling

I am currently working on a project that involves two navbars. The first navbar is dedicated to contact information, while the second navbar contains menu links. My goal is to have the second navbar fixed at the top of the page when scrolling, and I am lo ...

javascripthtmlcssbootstrap-5

Attach a floating div to multiple elements throughout a webpage

Looking for the optimal method to place a div in various locations on a webpage while anchoring it from the bottom left. The div should be able to be attached to any element on the page for relative positioning, specifically intended for a tooltip. Each ...

css

Tips for merging two text boxes in a form with CSS

Is it possible to combine two text boxes in a form using CSS, similar to the design on Tumblr's login page at ? If CSS is not the solution, what alternative methods can be used? Any assistance would be greatly appreciated. I am aiming to enhance the ...

htmlcssformsinputtextinput