How to fix a problem that bootstrap does not work even though everything is installed?

  angular, angular-ui-bootstrap, angular8, css, typescript

I’m trying to create a popover using bootstrap
The library is installed for me below are the versions
And why does he not show me the design?
Anyone know what could be the problem?
"private": true,
"dependencies": {
"@angular/animations": "~11.0.1",
"@angular/cdk": "^11.0.2",
"@angular/common": "~11.0.1",
"@angular/compiler": "~11.0.1",
"@angular/core": "~11.0.1",
"@angular/fire": "^6.1.4",
"@angular/forms": "~11.0.1",
"@angular/platform-browser": "~11.0.1",
"@angular/platform-browser-dynamic": "~11.0.1",
"@angular/router": "~11.0.1",
"@ng-bootstrap/ng-bootstrap": "^8.0.2",
"@types/jquery": "^3.5.5",
"bootstrap": "^4.5.3",
"bootstrap-icons": "^1.1.0",
"firebase": "^8.1.2",
"jquery": "^3.5.1",
"popper.js": "^1.16.1",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"

    "styles": [
"scripts": ["node_modules/jquery/dist/jquery.min.js", 
my code:
import { Component } from '@angular/core';
declare var $:any;
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  ngOnInit() {
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>

It looks like this Should look like this

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.