How to use bootstrap 4 in angular 2?

Bootstrap is an open-source toolkit for developing with HTML, CSS, and JS. The Bootstrap framework can be used together with modern JavaScript web & mobile frameworks like Angular.

Bootstrap 4 is the newest version of Bootstrap, which is the most popular HTML, CSS, and JavaScript framework. This article is a step by step guide to using Bootstrap 4 with Angular 2.

Follow the below steps to use the Bootstrap 4 in Angular 2: Before following the steps you have to make sure that you already installed Angular CLI, if it was not installed then run the below command to install the Angular CLI. After installing the Angular CLI you can follow the below steps.

npm install -g @angular/cli
  • Step 1: Create a new project by running the below command in the terminal.
    ng new project-name
  • Step 2: Here need to install the Bootstrap. Now open the project in the terminal and run the following command on Angular 2 CLI to add bootstrap to your project.
    npm i bootstrap@next --save
  • Step 3: Now have to importing CSS, go to src/style.css and import bootstrap
    @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

  • Step 4: For Bootstrap JS components to work you will still need to import bootstrap.js into angular.json/angular-cli.json under scripts. This should happen automatically, its still better to check.
    "scripts": ["../node_modules/jquery/dist/jquery.js",
                      "../node_modules/tether/dist/js/tether.js",
                      "../node_modules/bootstrap/dist/js/bootstrap.js"],

  • Step 5: Now have to restart the server.
    ng serve
  • Step 6: Now you have to run app.component.html code.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
        </title>
    </head>
      
    <body>
      
        <nav class="navbar navbar-light bg-light">
            <a class="navbar-brand" href="#">
                <img src="/docs/4.0/assets/brand/bootstrap-solid.svg" 
                     width="30" height="30" 
                     class="d-inline-block align-top" alt=""
                 Bootstrap
            </a>
            <form class="form-inline">
                <input class="form-control mr-sm-2" type="search" 
                       placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" 
                        type="submit">
                  Search
                </button>
            </form>
        </nav>
        <div class="container">
      
            <div class="jumbotron">
                <h1>
                  <i class="fa fa-camera-retro"></i>
                   Welcome to Geeks for Geeks
                </h1>
                <p>A Computer Science portal for geeks.</p>
            </div>
      
        </div>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:



  • 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.