Bootstrap 4 Navbar [Angular Tutorial]

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

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

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

bootstrap

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.

bootstrap

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

bootstrap

  • 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

Subscribe Now and Get our React Native Course for FREE!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get FREE access to our React Native course, coming soon on Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.