Bootstrap Navbar not working correctly: AngularCLI

Question

I included bootstrap into my angularcli project but when I try to include a navbar none of the elements are working correctly. I am using a standard boostrap navbar example from the website but it looks weird:

What is wrong with my project that is making the navbar not load correctly?

navbar.component.html

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" 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>
  <a class="navbar-brand" href="#">Navbar</a>

  <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">
        <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="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

.angular-cli.json

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],

Martin Parenteau · Accepted Answer · 2018-03-31 16:31:14Z

13

The code below shows how to implement the navbar in Angular with ng-bootstrap and Bootstrap 4. You can see it at work in this plunker.

The ng-bootstrap library is developped for Angular, and does not require jQuery
Using Bootstrap 4, you should replace navbar-toggleable-md with navbar-expand-md
The ngbCollapse directive is used to show/hide the dropdown menu

<nav class="navbar navbar-expand-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" (click)="isNavbarCollapsed = !isNavbarCollapsed" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div [ngbCollapse]="isNavbarCollapsed" class="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">
        <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="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

edited Mar 31, 2018 at 16:31

answered Feb 11, 2018 at 20:48

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Martin Parenteau Over a year ago

I updated my answer to show how to use Bootstrap 4 navbar with Angular 5.

pushkin · Accepted Answer · 2018-11-20 20:07:18Z

11

navbar.component.html:

<nav class="navbar navbar-default">
   <div class="container-fluid">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" (click)="toggleNavbarCollapsing()">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
         </button>
         <a routerLink="/" class="navbar-brand">Navbar</a>
      </div>
      <div class="navbar-collapse" [class.collapse]="navbarCollapsed">
      ...

navbar.component.ts:

navbarCollapsed = true;

toggleNavbarCollapsing() {
    this.navbarCollapsed = !this.navbarCollapsed;
}

edited Nov 20, 2018 at 20:07

pushkin

10.4k16 gold badges65 silver badges112 bronze badges

answered Nov 20, 2018 at 19:46

Aleksandar Petrovic

1501 silver badge5 bronze badges

Comments

Ragavan Rajan · Accepted Answer · 2018-02-11 21:08:11Z

10

There are some known issues in bootstrap 4 especially in navbar implemenation

Hence uou have to install bootstrap [email protected]

if you are using npm then the following libraries is best recommonded

 npm install [email protected] --save

npm install [email protected] tether jquery --save

In .angular-cli.json file add the dependencies

"styles":[
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
],

"scripts":[
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],

Use the following HTML

 <nav class="navbarnavbar-inverse">
    <div class="container">
    <div class="navbar-header">
    <button type="button" class="navbar-togglecollapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
    <span class="sr-only">Togglenavigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Angular5Website</a>
    </div>
    <div id="navbar" class="collapsenavbar-collapse">
    <ul class="navnavbar-nav">
    <li class="active"> <a href="#">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
    </ul>
    </div><!--/.nav-collapse-->
    </div>
    </nav>

edited Feb 11, 2018 at 21:08

answered Feb 11, 2018 at 20:25

Ragavan Rajan

4,4572 gold badges30 silver badges47 bronze badges

6 Comments

FrankTheTank Over a year ago

It stil lhas a problem ill post a picture of the new look

Ragavan Rajan Over a year ago

Try the bootstrap 3.3.7 example navbar component. I have added the sample HTML for your kind reference.

FrankTheTank Over a year ago

that worked! Why is all of bootstraps documentation not working?

Ragavan Rajan Over a year ago

glad it helped!!. I was scratching my head to implement this. Not sure why the documentation was not up to date. But after three hours of scratching my head, I got the above solution.

FrankTheTank Over a year ago

like only one of the navbar elements

|

DornescuM · Accepted Answer · 2022-07-18 15:53:41Z

0

Just add to index.html head link to css and js

Bootstrap 5.2 Angular 13

link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"

script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous" /script

answered Jul 18, 2022 at 15:53

DornescuM

531 silver badge7 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Bootstrap Navbar not working correctly: AngularCLI

4 Answers 4

1 Comment

Comments

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related