Let’s try to add this navigation bar to our Angular 2 App.

bootstrap

Going back to your browser, search for bootstrap 4 navbar and click this.

bootstrap

bootstrap

In here, you can find different kinds of a navbar. A very simple one looks like this:

bootstrap

<nav class="navbar navbar-light bg-faded">
  <ul class="nav navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)<,
    </li>
    <li class="nav-item">
      <a class="nav-link" href+"#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
    <li class="nav-item">
      <a class="nva-link" href="#">About</a>
    </li>
  </ul>
</nav>

Another one is the Collapsible Content navbar. It has a customizable dropdown menu.

IT Certification Category (English)728x90

Another example would be the Responsive navbar. It’s designed to adjust according to your browser size.

bootstrap

<nav class="navbar navbar-light bg-faded">
  <button class="navbar-toggler hidden-sm-up" type="button" data-toggle='
    &#9776;
  </button>
  <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
    <a class="navbar-brand" href="#">Responsive navbar</a>
    <ul class"nav navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current:
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class=nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class=nav-link" href="#">About</a>
      </li>

bootstrap

  • Notice how the menu items adjusted as the browser got smaller? That’s because it is mainly used for mobile or tablet applications.

There is also the basic menu but with different color scheme. The blue one is what we’ll need for the sample we are going to do.

bootstrap

To do that, simply head to Supported Content and click copy.

bootstrap

Now going back to your IDE, open app.component.html then paste the code. You also need to enclose it with a <div> container class.

<div class="container-fluid">
 
<nav class="navbar navbar-light bg-faded">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav navbar-nav">
    <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="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
  <ul>
  <form class="form-inline pull-xs-right">
    <input class="form-control" type="text" placeholder="Search">
    <button class="btn btn-outline-sucess" type="submit">Search</button>
  </form>
</nav>
 
<a routerLink="/stocks">STOCKS</a>
 
<router-outlet></router-outlet>
 
</div>

That’s it! We are ready to customize our navbar. First, let’s edit the menu items.

<nav class="navbar navbar-light bg-faded">
  <a class="navbar-brand" href+"#">Angular Finance</a>
  <ul class="nav navbar-nav">
    <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="#">STOCKS</a>
    </li>
  </ul>
  <form class="from-inline pull-xs-right">
    <input class="form-control" type="text" placeholder="Search">
    <button class="btn btn-outline-success" type="submit">Search</button>
  </form>
</nav>
  • Two list items were deleted because all we need for the example is Angular Finance, Home, a router link that shows the ‘stock” component, and a search bar.

Now let’s add the router link to the ‘Stocks’ menu item

bootstrap

Save your work and you’re now ready to see the new navigation bar using Bootstrap 4. Go back to your browser.

bootstrap

Notice that the navbar is not color blue? We can change that simply by adding a background color. Go back to the bootstrap 4 site and copy the code for the color blue.

bootstrap

bootstrap

Paste the code to the navbar section and save your work. Check your browser again and you’re done!

bootstrap