How to use bootstrap 4 in angular 2? - GeeksforGeeks

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
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
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";
@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"],
"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
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>
<!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:My Personal Notes
arrow_drop_upSave
AngularJS-Misc
Bootstrap-4
Picked
Bootstrap
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
How to keep gap between columns using Bootstrap?
Tailwind CSS vs Bootstrap
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills