Saturday, April 20, 2024
Angular 8Angular 9Bootstrap 4Bootstrap 4.5

Angular 9 Bootstrap 4.5 tabs working example

Angular 9 Bootstrap 4.5 tabs working example

Hello to all, welcome to In this post, I will tell you, Angular 9 Bootstrap 4.5 tabs working example.

Here is the working code snippets and please use carefully:

1. Very first, you need to run below commands to set Bootstrap 4.5 behaviour into your angular 9 application:

npm install --save bootstrap

npm install jquery --save

npm install --save @types/jquery

npm install popper.js --save


2. Now you need to add below code into your angular.json file:

"styles": [
"scripts": ["node_modules/jquery/dist/jquery.min.js", 


3. Now you need to add below code into your app.component.html file:

<div class="container">
<ul class="nav nav-tabs">
    <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#home">Home</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu3">Menu 3</a></li>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active show">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>


This is it and if you have any kind of query related to this post then please do comment below.



the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.


Leave a Reply

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