Issue with Navigation menu dropdown not functioning properly on Angular version 12 with Bootstrap 5

I am attempting to integrate bootstrap with Angular through a CDN. Below is the content of my index.html file:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Laboratorio Sigma</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS only -->
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="75171a1a01060107140535405b445b44">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>
<body>
  <app-root></app-root>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2c0cdcdd6d1d6d0c3d2e2978c938c93">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>

I have created a navbar component and attempted to use a navbar from the bootstrap page:


<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="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>

However, I encountered an issue where the search bar within the navbar seems misplaced to the left. Additionally, the dropdown button does not seem to be functioning properly. Despite clicking on it, the list fails to display.

While I have used bootstrap in other angular projects before, this is my first experience using it via CDN. I am unsure about what may be causing these issues.

htmlcssangularnavbarbootstrap-5

Answer №1

After some trial and error, I successfully got it functioning by swapping out "data-toggle" with "data-bs-toggle". Similarly, for the data target attribute, I used "data-bs-target"

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

Having trouble with Bootstrap 4 maintaining consistent width when affixing the sidebar

Hello there, I'm currently working with Bootstrap 4 and trying to implement affix on the sidebar. I have set up three columns for the sidebar and made them fixed under certain conditions. However, I am facing an issue where the width of the sidebar ch ...

javascripthtmlcssbootstrap-4

What is the best approach for managing routing within a nested Module in Angular?

Seeking the best approach to handling routing with nested modules in Angular. Imagine starting the application at localhost:5000. The HomeComponent should be visible on the left side, while a <router-outlet> on the right side should render the Conta ...

angularangular-routing

Clicking on a span will allow you to alter the text within a paragraph located in a

I am hoping to update a paragraph of text with new content when a faux 'link' (span) at the bottom of the page is clicked. This is what I have so far <body> <p> This is the paragraph that should be changed after clicking on the sp ...

javascriptjqueryhtml

The e2e directory seems to be missing from my Angular project

https://i.stack.imgur.com/xzrlb.png Despite reinstalling the CLI, the E2E feature still eludes me. ...

angularangular-cli

Having trouble accessing the 'add' property of Rxjs Subscription

I have been working on optimizing my code and I encountered an issue with unsubscribing from multiple subscriptions in ngOnDestroy. Specifically, when trying to invoke the add() method to include additional child subscriptions, I keep getting an error me ...

angularangular7subscriptionrxjs6unsubscribe

Duplicate a DOM element and incorporate animation into it

After extensively researching articles and documentation on this topic, I have yet to find a solution that aligns with the approach I am attempting to implement. My scenario involves an array of category items which contain a nested array of products be ...

javascriptangulardom

Problem with <meta> tag occurring when initial-scale is adjusted

Initially, in the index.html file: <meta name="viewport" content="width=device-width, initial-scale=1" /> I decided to modify it to: <meta name="viewport" content="width=device-width, initial-scale=2" /> ...

javascripthtmlcssreactjsmeta-tags

Rotating SVG images with ease at any center point

I attempted to remove the unsupported animateTransform element: <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="1.2s" repeatCount="indefinite" /> and replaced it with CS ...

htmlcsssvg

Is it possible to display a variety of color schemes in just one console.log()?

My task involves working with an array of hexadecimal values, "colors": ["#d5dd90","#e6bb45","#ef9770"] To log these out in different colors, I used the following method: colors.forEach((value)=>{ console.log(& ...

javascriptcssconsolestylingconsole.log

"Utilize Apexcharts to access specific elements by right-clicking on

My goal is to access the chart element in order to make modifications with a right click event. I am utilizing the Angular framework and Apexcharts, which has a built-in function for left click but not for right click. To achieve this, I have decided to a ...

angularapexcharts

Bony Scaffold - halting the motion of specific components

Currently, I am utilizing skeleton to create a fluid layout, which is functioning effectively for the most part. However, I have encountered an issue specifically with the 2 column layout on Magento at this URL: In this setup, the navigation on the left s ...

htmlcssmagentoskeleton-css-boilerplate

The alignment of vertical text can impact the positioning of surrounding text

I am working on creating an online portfolio using HTML and CSS, but I am facing a challenge with vertical alignment. My goal is to have a line of vertical text running down the left side of the screen that displays "My occupation". On the right side of t ...

htmlcssvertical-alignmentvertical-text

Lack of animation on the button

Having trouble with this issue for 48 hours straight. Every time I attempt to click a button in the top bar, there is no animation. The intended behavior is for the width to increase and the left border color to change to green, but that's not what&ap ...

javascripthtmlcsssvelte

If one sibling requires flexing, apply flex to all siblings

Illustrative Issue: large: https://i.sstatic.net/oq0jA.png small: https://i.sstatic.net/WXqmV.png When space is limited, one row will start to flex while others remain static if they have enough space. Is there a way to make all rows flex when at least ...

htmlcsssvgflexboxcss-grid

What is the best way to update the value of a variable within a specific child component that is displayed using ngFor?

Hello there, I'm in need of some assistance with a coding issue. I have a parent component named "users-list" that displays a list of child components called "user" using *ngFor. Each component's class is dynamic and depends on various internal v ...

angulartypescript

Assistance needed with incorporating an additional link button into the extensive menu

I recently checked out the impressive mega menus featured on the w3schools website. You can find them here: (https://www.w3schools.com/howto/howto_css_mega_menu.asp). While using the "try it yourself" option, I tried to experiment with adding another mega ...

htmlcssmegamenu

Having trouble getting my AngularJS directive with a number in the name to function properly

Check out my code snippet: app.directive('3dPlansSlider', function(){ return { controller: 'projectCtrl', restrict: 'E', templateUrl: 'views/3dPlansSlider.html', link: function(scope, element, attr ...

javascripthtmlangularjs

The NGXS state does not get updated when a lazy loaded component is used

Recently, I started experimenting with the new lazy loaded components in Angular 9. I have a stateful component using NGXS with its state being lazy loaded in a module close to the component. However, after the component renders, the store does not update ...

angularngxsangular9

CSS animation - gradual disappearance on mouse exit

Hey everyone, I'm in need of some assistance with my animation. I've created a button that moves right and left in a loop, but I'm encountering an issue when the mouse moves away from the button. The transition is not smooth and it jumps bac ...

htmlcssloopsanimationtransform

Using Angular2, you can easily implement property binding on child elements

Consider this basic Angular 2 application Primary component: @Component({ selector: "app" }) @View({ directives: [ChildComponent] template: '<child-component></child-component>' }) export class App {} Child component @ ...

angular