Include Bootstrap in AngularJS using ng-bootstrap

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



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

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

    app.component.html

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:

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


    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.