Skip to content
Related Articles

Related Articles

Include Bootstrap in AngularJS using ng-bootstrap
  • Last Updated : 18 Jun, 2019

AngularJS can be integrated with Bootstrap CSS and Javascript and can be used to create creative forms, tables, navigation bars, etc.

Steps:

  • Make sure the Angular CLI present in your system if not then run the command in the terminal to do so.
    npm install -g @angular/cli
  • Create a new project on visual studio code by running the code ng new project-name.
  • After creating new project, open that project on visual studio and its terminal make sure the path are in the directory of the new created project. Then run the following commands.
    npm install bootstrap@4.0.0-alpha.6 --save
    npm install --save @ng-bootstrap/ng-bootstrap
    npm install jquery --save
  • Import the NgbModule in app.module.ts by using import { NgbModule } from ‘@ng-bootstrap/ng-bootstrap’; and also include it in the imports: list.
    imports: [
        BrowserModule,
        NgbModule.forRoot()
      ],
  • Make the following additions in the angular.json/angular-cli.json which is available in visual studio code.
    "styles": [
        "./node_modules/bootstrap/dist/css/bootstrap.min.css",             
        "src/styles.css"
    ],
    "scripts": [
        "./node_modules/jquery/dist/jquery.min.js",             
        "./node_modules/bootstrap/dist/js/bootstrap.min.js"        
    ],
    

    There are two styles[] and scripts[] section in the angular.json so we have to add this part in the first section only. Also make sure that “./node_modules/bootstrap/dist/css/bootstrap.min.css” is written above “src/styles.css”. There is no need to include .js files because native Angular directives are based on Bootstrap’s markup and CSS and not on jQuery or Bootstraps javascript.

    Index.html




    <!DOCTYPE html>
    <html>
      
    <head>
        <meta charset="utf-8">
          
        <title>
            Include Bootstrap in AngularJS
        </title>
          
        <base href="/">
       
        <meta name="viewport" 
                content="width=device-width, initial-scale=1">
          
        <link rel="icon" type="image/x-icon" href="favicon.ico">
    </head>
      
    <body>
        <app-root>
            loading...
        </app-root>
    </body>
      
    </html>

    This code is only to display “loading…” before the app.component.html actually gets loaded.

    app.component.html




    <!DOCTYPE html>
    <html>
      
    <head>
        </script>
          
        <script src=
        </script>
          
        <script src=
        </script>
    </head>
      
    <body>
        <div class="container">
            <ngb-tabset>
                <ngb-tab title="Welcome">
                    <ng-template ngbTabContent>
                        Welcome to GeeksforGeeks
                    </ng-template>
                </ngb-tab>
                  
                <ngb-tab>
                    <ng-template ngbTabTitle>
                        Learn <b>Angular</b>
                    </ng-template>
                      
                    <ng-template ngbTabContent>
                        Refer various Angular articles available
                        in GeeksforGeeks.
                    </ng-template>
                </ngb-tab>
              
                <ngb-tab title="Edit" [disabled]="true">
                    <ng-template ngbTabContent>
                        <p>
                            Make various changes in the
                            code and explore
                        </p>
                    </ng-template>
                </ngb-tab>
            </ngb-tabset>
        </div>
    </body>

    Output:

    • Selecting Welcome tab:
      ng-bootstrapexample
    • Selecting Learn Angular tab:
      ngb2
    • Edit tab cannot be selected since it has been disabled.

    Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.




    My Personal Notes arrow_drop_up
Recommended Articles
Page :