How to use bootstrap 4 in angular 2?

Last Updated : 28 Apr, 2020

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.

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

Output:

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

Related Articles