The Bootstrap carousel controls now add the carousel ID to the address bar instead of just moving to the next slide

I can't figure out why my carousel isn't working. The id of the carousel is showing up in the webpage's address, which usually happens when the 'bootstrap.js' file is missing, but I have included it.

Can anyone help me troubleshoot this issue? I'm feeling pretty frustrated about it.

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="First Web App">
    <meta name="keywords" content="HTML, CSS, JavaScript">

    <title>First Web App</title>

    <link rel="stylesheet" type="text/css" href="/css/home.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="88eae7e7fcfbfcfae9f8c8bda6b8a6b8a5eaedfce9b9">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    
    <script src="/js/home.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d5f5252494e494f5c4d7d08130d130d105f58495c0c">[email protected]</a>/dist/js/bootstrap.bundle.min.js" type="text/javascript" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"&g...
javascripthtmlcss

Answer №1

In Bootstrap 5, the data-* attributes have been updated to data-bs-*. Therefore, for Bootstrap 5, your code should look like this:

<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">


<!DOCTYPE html>
<html>

... (content unchanged) ...

</html>

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

Is there a way to configure json-server, when utilized as a module, to introduce delays in its responses

json-server provides a convenient way to introduce delays in responses through the command line: json-server --port 4000 --delay 1000 db.json However, when attempting to achieve the same delayed response using json-server as a module, the following code ...

javascriptjsonnode.jsjson-server

Unable to view the image in browsers other than Internet Explorer

On a webpage, there is a feature where clicking on the "Add More" link should display an input box and a "Delete" button image. Surprisingly, this functionality works perfectly on IE browsers, but not on Mozilla or Chrome. In non-IE browsers, only the text ...

javascriptcssgoogle-chrome

A variant of setTimeout designed specifically for family members

I am currently working on a program that involves creating a "health" variable which decreases by random amounts at random intervals. This means that a player may encounter scenarios like the following: 5 seconds Lose 20 health 3 more seconds Lose 25 healt ...

javascriptjquerysettimeout

Error: Unable to parse JSON field value due to an unexpected OBJECT_START

Currently in my coding project, I am utilizing node and mongoose to update a Watson rank and access the database. My goal is to insert multiple documents into the collection. While I can successfully add a single document, I encounter issues when creating ...

javascriptjsonnode.jsibm-watsonretrieve-and-rank

Is it possible for me to create a lineString connecting two points in OpenLayers3?

I need to create a lineString connecting my two given points, such as [-110000, 4600000] and [0, 0]. ...

javascriptopenlayers-3

Vue.js v-else-if directive not functioning properly: Unable to resolve directive: else-if

I am encountering a compilation error while using "if" and "else-if". [Vue warn]: Failed to resolve directive: else-if Here is the code I am working with: var app = new Vue({ el:"#app", data:{ lab_status : 2 } }); <script src="https: ...

javascriptvue.jsvue-directives

SequelizeIncludeError: unable to fetch data using the 'include' method

My database requests are handled using Sequelize.js, and I have set up a many-to-many relationship between two tables with a third junction table called polit_in_article. Let me walk you through my three tables: politician.js: module.exports = (sequelize ...

javascriptnode.jsexpresssequelize.js

Looking to access XML file data using Vue.js on the server side?

I am trying to access an XML file located in a specific path on the server side using VueJS without using jQuery. Can you provide me with some ideas or advice? Scenario: 1. The file is stored at /static/label/custom-label.xml. 2. I need to read this file ...

javascriptxmlvue.jsfilereader

Entering a string into Angular

Within my function, I trigger the opening of a modal that is populated by a PHP file template. Within this template, there exists a div element containing the value {{msg_text}}. Inside my JavaScript file, I initialize $scope.msg_text so that when the mod ...

javascriptphphtmlangularjs

Discovering the keycode for the GO button in JavascriptDiscovering the keycode

Can anyone help me figure out how to find the keycode for the GO button using Javascript in an Android browser? ...

javascriptandroiddom-events

Ensure each list item is directly aligned when swiping on a mobile device

Looking to make a simple horizontal list swipeable on mobile devices with tabs that snap from tab to tab, activating the content for the active tab immediately. The desired effect is to swipe directly from one tab to the next without having to click separ ...

javascriptjqueryhtmljquery-mobilemobile

Attempting to design a uniform question mark enclosed within a circle using CSS

I'm attempting to use CSS to create a glyph of a question mark inside a circle, similar to the copyright symbol ©. a::before { content: '?'; font-size: 60%; font-family: sans-serif; vertical-align: middle; font-weig ...

htmlcsspseudo-element

Implementation of Ionic Tabs with Hidden Back Button

Is there a way to hide the back button for a specific tab in my ionic app without affecting the rest of the page? I tried adding "hide-back-button="true" to the tab code, but it didn't work as expected. I want to achieve something like this: <ion ...

htmlionic-framework

HTML - Custom styled <select> element

My goal is to fully customize the style of a component and hide the selector image. All graphical styles such as borders and shadows have been defined in a previous table. Now, I want to remove all styling from the selection menu, including the icon used t ...

htmlcssselectwebviewstyles

Rearrange the following <div> to appear before the previous one on medium and small devices using Bootstrap

I'm working with this div from the Bootstrap framework: <div class="card-header py-md-0 py-lg-0 py-xl-0 pl-0 pr-0"> <div class="d-flex justify-content-between align-items-center"> <div class="h5 mb-0">Text text</div&g ...

htmlcss

JavaScript utilized to create a fully immersive full-screen webpage

I have been trying to implement a code for creating a full-screen website that works on all browsers. Unfortunately, my current code only seems to be functioning properly on Mozilla browser. When I try to view the site in Chrome and make it full screen, it ...

javascriptjqueryfullscreen

What is the method for using jQuery to retrieve hidden fields with the visible attribute set to "false"?

How can I access a control with "visible = false" attribute using jQuery? Some code examples would be appreciated. <tr>   <td class="TDCaption" style="text-align: left">     <asp:Label ID="lblMsg" runat="server" EnableViewState="False" F ...

jqueryasp.netcssselector

Inadequate data being sent to the server from Angular2 post request

Currently, I have a form field whose value I am passing to a service as this.form.value. However, when I log this.form.value on the console, I see Object { email: "zxzx", password: "zxzxx" }. Despite this, when I send the same data to the service and make ...

javascripttypescriptangular

Extract the content from the span element on Whatsapp Web

Currently, I am in the process of learning Python along with Selenium and have encountered a challenge. I am attempting to extract the username from the most recent message in a WhatsApp group conversation. Despite several attempts, I have been unsuccessfu ...

pythonhtmlcssseleniumselenium-webdriver

Python Selenium Timeout Exception Handling

Looking for a solution: def get_info(url): options = webdriver.ChromeOptions() options.headless = True chrome_browser = webdriver.Chrome('./chromedriver', chrome_options=options) chrome_browser.get(url) name = chrome_browser.f ...

pythonhtmlseleniumweb-scraping