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
ng new project-name
npm i bootstrap@next --save
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
"scripts": ["../node_modules/jquery/dist/jquery.js", "../node_modules/tether/dist/js/tether.js", "../node_modules/bootstrap/dist/js/bootstrap.js"],
ng serve
<!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 > |

Please Login to comment...