TheDeveloperBlog.com

Home | Contact Us

C-Sharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript | SQL | PHP | Angular | HTML

Angular 7 with Bootstrap

Angular 7 with Bootstrap with angular7, tutorial, introduction, angular, js, Installation, History and Versions, First App, files explanation, Components, Directives, ngIf Directive, ngFor Directive, ngClassDirective, ngStyle Directive, Angular7 with Bootstrap etc.

<< Back to ANGULAR

Angular 7 with Bootstrap

How to install Bootstrap for Angular project?

Run the following command on command prompt:

npm install --save bootstrap@3  => The @3  is important!
Angular 7 with Bootstrap

Further, when you use a project created with Angular CLI 6+ (check via ng v ), you'll have an angular.json file instead of an .angular-cli.json file. In that file, you still need to add Bootstrap to the styles[] array, but the path should be node_modules/bootstrap/dist/css/bootstrap.min.css , NOT ../node_modules/bootstrap/dist/css/bootstrap.min.css . The leading ../ must not be included.

Angular 7 with Bootstrap

Here, we are using the Angular 7.2.3 version.

How to add bootstrap.css file in the project?

Expand Node Module (library root folder)

Angular 7 with Bootstrap

Go to bootstrap folder and expand it.

Angular 7 with Bootstrap

Go to dist folder and expand dist.

Angular 7 with Bootstrap

Expand css and you will find "bootstrap.css". Expand bootstrap.css and you will see bootstrap.min.css

Angular 7 with Bootstrap

Open angular.json file and add the bootstrap.min.css in style section. 

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],

Bootstrap is now installed for your Angular 7 project. You can use it now.

Next TopicAngular 7 All CLI commands




Related Links:

.Net

.NET Array Dictionary List String 2D Async DataTable Dates DateTime Enum File For Foreach Format IEnumerable If IndexOf Lambda LINQ Parse Path Process Property Regex Replace Sort Split Static StringBuilder Substring Switch Tuple

Java

Core Array ArrayList HashMap String 2D Cast Character Console Deque Duplicates File For Format HashSet If IndexOf Lambda Math ParseInt Process Random Regex Replace Sort Split StringBuilder Substring Switch Vector While

Related Links

Adjectives Ado Ai Android Angular Antonyms Apache Articles Asp Autocad Automata Aws Azure Basic Binary Bitcoin Blockchain C Cassandra Change Coa Computer Control Cpp Create Creating C-Sharp Cyber Daa Data Dbms Deletion Devops Difference Discrete Es6 Ethical Examples Features Firebase Flutter Fs Git Go Hbase History Hive Hiveql How Html Idioms Insertion Installing Ios Java Joomla Js Kafka Kali Laravel Logical Machine Matlab Matrix Mongodb Mysql One Opencv Oracle Ordering Os Pandas Php Pig Pl Postgresql Powershell Prepositions Program Python React Ruby Scala Selecting Selenium Sentence Seo Sharepoint Software Spellings Spotting Spring Sql Sqlite Sqoop Svn Swift Synonyms Talend Testng Types Uml Unity Vbnet Verbal Webdriver What Wpf