The Bootstrap nav bar toggle feature is failing to toggle

My bootstrap navigation toggle does not seem to be toggling on click when the page shrinks. I have made sure to import the jQuery library first, so I'm not sure why it's not working.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>JPV Painting Plus</title>
    <script src="https://code.jquery.com/jquery-3.4.0.js"></script>
    <link rel="stylesheet" type="text/css" href="js\bootstrap.min.js" />
    <link rel="stylesheet" type="text/css" href="css\bootstrap.min.css" />

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

</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
                <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                <a class="nav-item nav-link" href="#">Features</a>
                <a class="nav-item nav-link" href="#">Pricing</a>
                <a class="nav-item nav-link disabled" href="#">Disabled</a>
            </div>
        </div>
    </nav>
    <img id="index-banner" src="img\index-banner.jpg"/>
    <h1 class="text-center font-weight-bold"></h1>

</body>
</html>
htmlcsstwitter-bootstrapbootstrap-4

Answer â„–1

It seems like you are mistakenly importing the javascript file as a stylesheet, but it should be imported as a script instead.

Remember that when adding a stylesheet, you use a link element, while for js files, you should use a script element.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<title>JPV Painting Plus</title>

<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
        <a class="nav-item nav-link" href="#">Features</a>
        <a class="nav-item nav-link" href="#">Pricing</a>
        <a class="nav-item nav-link disabled" href="#">Disabled</a>
      </div>
    </div>
  </nav>
  <img id="index-banner" src="img\index-banner.jpg" />
  <h1 class="text-center font-weight-bold"></h1>

</body>

</html>

Answer â„–2

The code you entered was 

<link rel="stylesheet" type="text/css" href="js\bootstrap.min.js" />
, but it should actually be 
<script src="js/bootstrap.min.js"></script>
. This is because the correct syntax for including a JavaScript file is using the <script> tag, not the <link> tag which is used for stylesheets.

Answer â„–3

Make sure to include jQuery at the bottom of your HTML file, right before the closing body tag.
For instance, you can use 

<script src="PATH"></script>

instead of using a link tag.

Answer â„–4

Opt for the CDN variant of bootstrap instead of modules. The toggle feature functions correctly on CDN, whereas it did not work with the module.

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

Common Error for Novice HTML/CSS Learners

I am currently enrolled in an introductory web design course on Treehouse, and I have encountered a problem with centering a class in HTML using CSS. Despite following the instructions closely, my code is not displaying correctly. Can someone please review ...

htmlcss

Is it possible to create a carousel using PHP and MySQL?

Is it really impossible? I'm determined to pull images from a MySQL database and create a carousel similar to the one showcased in this link: . However, my goal is to achieve this using only HTML, CSS, PHP, and MySQL. ...

phphtmlmysqlcsscarousel

Remove and modify an li element that has been dynamically generated within a ul list

Currently, I am facing an issue in my code. I am dynamically creating li elements by taking input from an input box and then appending the data within li tags using jQuery. However, after adding the li element, I have included a delete button. The problem ...

javascriptjqueryhtml

Navigational assistance on the keyboard - Improving Accessibility

My situation involves selecting an option from a dropdown menu on X-page, which triggers the opening of Modal-1 while disabling the background. If a selection is made within Modal-1, it leads to Modal-2. I am facing two issues/questions: Upon opening Moda ...

htmlcssangularaccessibility

``There seems to be an issue with background size not functioning properly in

I have successfully implemented a body background image with full width following your previous questions and answers. However, I encountered an issue on Mozilla browser where the image is not scaling to full width. Here is the CSS code I am using: backgr ...

phphtmlcss

steps for including preset text in an input field within a form on WordPress

I am currently utilizing a WordPress plugin that automatically generates a form in the admin area based on user input. The form includes five fields that require URL validation. Users have the option to enter optional link text which will be displayed as t ...

javascriptjquerycssformsdefault-value

Is there a way I can turn off the dragging functionality in my situation?

Is there a method to disable the dragging functionality within a draggable element? $('#dragitem').draggable({ scroll : false, drag: function(event, ui){ //check if condition is met if(†...

javascriptjqueryhtmlcssjquery-ui

Refresh HTML table when database is updated

My panel has a user table which is populated using the following snippet of Php code : <html> <body> <div id="order_table"> <table> <thead> <tr> <th>Name</th> < ...

phpjqueryhtmlajax

Is there a way to access the HTML and CSS source code without using the inspect feature

I'm working on a project that involves an "edit box" where users can write text, add emojis, change the background color, insert images, and more. After users finish creating their content, I want them to be able to send it via email. This means I ne ...

javascripthtmlcss

Several submission choices available within a single form

My form is set up like this: <form action='../performSQL.php' method='post'> <input type='hidden' name='hidden_id' value='$id'> <input type='date' name='porteringsdato' va ...

phphtml

CSS Grid with dynamically changing number of rows set to "auto", while ensuring one row always has a fixed size of "1fr"

Currently, I am experimenting with a CSS grid-based frontend and have encountered a specific requirement that keeps repeating itself in various parts of the frontend: A grid with a dynamic number of rows. Each row should be of variable size (auto). The f ...

htmlcsscss-grid

Tips on removing a stylesheet while transitioning to another page in Vue

I'm new to Vue.js and I'm experimenting with adding and removing stylesheets in components using the mounted and unmounted lifecycles. Initially, I successfully added a stylesheet using the following code: mounted() { this.style = document. ...

cssvue.jsbootstrap-4vue-routervuejs3

Updating the CSS style of an inner DIV using JavaScript

Can you provide guidance on how to modify the background color using JavaScript for the different styles listed below? i) Internal Style sheet and/or ii) External Style sheet I am currently working with the card deck slide show available at https://githu ...

javascriptcssbackground-colordivision

The CSS navigation bar is not properly aligned in the center

This menu was constructed by me: JSBIN EDIT ; JSBIN DEMO Upon closer inspection, it appears that the menu is not centered in the middle of the bar; rather, it is centered higher up. My goal is to have it positioned lower, right in the middle. I ...

javascripthtmlcss

The issue with the CSS combination of :after and :hover:after across different HTML elements

Encountering an issue while attempting to create a rollover effect using CSS :after and :hover pseudo-elements. Check out the clock and facebook icons on the right side by visiting: See below for the CSS code: .icon { background: url('. ...

csshoverspritelesspseudo-element

Issue with Firefox: Click event not fired when resize:vertical is set while focusing

Issue: Firefox is not registering the first click event when a textarea has the following CSS: textarea:focus { resize: vertical; } Check out the demo: http://jsbin.com/wuxomaneba/edit?html,css,output The fix for this problem is straightforward - ju ...

javascriptcssfirefox

My CSS disappears when using an ASP.Net MVC form

Unable to find any similar issue on Google... seeking some assistance. When I apply CSS formatting to style my form as desired, it displays correctly on the page without any issues. However... When I place the actual form within the following code snipp ...

htmlcssasp.net-mvc

PHP generated timetable displaying improperly formatted HTML cells

Having some trouble with my HTML table for a school timetable. This is what I want: Required Timetable. But instead, I'm getting something like this: Incorrect Timetable Here's the code snippet: // days of week array $days = array( 1 => &ap ...

phphtml

Tips for arranging divs in CSS grid with grid-template-areas technique

I am attempting to organize similar groups of elements in a grid: #grid { position: absolute; left: 135px; top: 158px; width: 1080px; height: 1035px; display: grid; grid-template-rows: 99px 1fr 1fr; grid-template-column ...

htmlcss

Create a personalized form with HTML and JQuery

Currently, the data is displayed on a page in the following format: AB123 | LHRLAX | J9 I7 C9 D9 A6 | -0655 0910 -------------------------------------------------------- CF1153 | LHRLAX | I7 J7 Z9 T9 V7 | -0910 1305 ---------------- ...

javascriptjqueryhtml