You often use a CSS framework like Bootstrap or Material. In this video, learn how to correctly add a CSS framework to your Angular CLI project.
- [Instructor] A common need often involves the usage … of a CSS framework like Bootstrap. … Using the CLI to add a CSS framework as a global style … is actually quite simple. … Let's first install Bootstrap. … npm install boostrap … and we'll be using version 4.5.2. … Once that is installed, head over to angular.json … and add in the path for the bootstrap CSS file … in the styles array. … This will be a node.modules/bootstrap/dist/css … and the file will be bootstrap.min.css. … Now, when you run a build of your application … the bootstrap CSS file will be added … as a global style sheet to your application. … You won't see this injected … as a link tag in the index.html file, … but they will indeed be added to your application. … These styles will be loaded … when the Angular app first loads. … Let's run a build to make sure everything builds correctly, … ng build dash dash configuration equals production. … …
Author
Released
1/8/2021Skill Level Intermediate
Duration
Views
Related Courses
-
Learning Angular
with Ray Villalobos1h 40m Beginner -
Angular: API Communication and Authentication
with Victor Mejia1h 41m Intermediate -
Angular Essential Training
with Justin Schwartzenberger3h 30m Intermediate -
Angular Testing and Debugging
with Derek Peruo1h 16m Intermediate
-
Introduction
-
Using the exercise files1m 16s
-
1. Exploring the Angular CLI
-
Installing the CLI1m 30s
-
2. Updating Angular Versions
-
Using ng update: Part 13m 36s
-
Using ng update: Part 23m 52s
-
3. Creating New Angular Projects
-
The ng new command3m 49s
-
Adding application assets3m 55s
-
Adding a CSS framework1m 8s
-
-
4. Serving Angular Applications for Development
-
The ng serve command1m 27s
-
-
5. Generating Angular Application Code
-
Generating pipes45s
-
Generating route guards1m 39s
-
Generating custom library1m 27s
-
6. Building Angular Applications
-
The ng build command1m 3s
-
7. Running Tests
-
Test run options1m 26s
-
Testing workflow2m 59s
-
Conclusion
-
Next steps32s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Adding a CSS framework