Bootstrap is the world’s most popular framework for building responsive, and mobile-first sites while Angular is one of the most powerful JavaScript framework. There are three(3) major ways to add bootstrap to our angular project.
Method 1: Using Angular CLI (npm install).
Method 2: Using CDN (Copy and Paste method).
Method 3: Adding bootstrap CSS files to your project (Using CSS import ).
I will be focusing on method 1 and 2 in this publication.
Get Started: You are expected to have installed nodejs on your machine if not, it can be foundhttps://nodejs.org: download and install. Let’s start with installing angular using Command Line Interface (CLI) from NPM package.
npm install -g @angular/cli
let’s create a new angular project using command line interface (CLI).
ng new AngularBootstrap
You can add additional features when you are generating your angular project from CLI just as type of styling, by default styling is css. If you want to powerfull styling like SCSS in your project ( $ ng new AngularBootstrap — style=scss)
cd AngularBootstrap
If you are using VS code on your window machine just enter $ code . to open the project.
Method 1: Using Angular CLI (npm install). From the command line interface install bootstrap and references it in angular.json
npm install bootstrap --save
If you want to use bootstrap Javascript function, you need to install JQuery and popperjs with it. BootstrapJS depends on JQuery
npm install jquery --save
If you need the functionality of a popover in angular application, you can add popper.js. You can learn more on this https://popper.js.org/index.html#example10
npm install popper.js --save
Reference the path in angular.json file. Make sure you reference it under build node.
Method 2: Using CDN (CDN Referenced method).
This is an old way of referencing bootstrap in our project most especially in Angular 1, the url to the path is added to the index.html for global referenced. For more information go to https://www.getbootstrap.com/
This is an old way of referencing bootstrap in our project most especially in Angular 1, the url to the path is added to the index.html for global referenced. For more information go to https://www.getbootstrap.com/
Method 3: Adding bootstrap CSS files to your project:
You can direct add bootstrap folders to your asset directory in your angular project and reference the folder directly into your style.css or style.scss using
@import url("bootstrap.min.css");
Extra:- Font-awesome is the one of the most popular place to get icon to use for web design. You can add font-awesome icon to your angular project using npm, and reference the css in your angular.json file.
npm install font-awesome
Conclusion: In this publication, I have shown you, how to kickstart your angular project using bootstrap library. kindly click on the clap button. If you have any question contact me sensationalkunlex@gmail.com or sensationalkunlex@live.com
Không có nhận xét nào:
Đăng nhận xét