Bootstrap is a CSS framework that supplies reusable classes for consistent element styling, reducing the need for custom CSS. It also includes JavaScript enhancements, but Angular supplies the interactive behavior here. section 3.3
Apply Bootstrap by assigning its classes to HTML elements:
- Use bg-primary to set a background color, text-white to set text color, and p-3 to add padding. section 3.3
- Install Bootstrap 5.2.3 with npm, then add its CSS stylesheet to the Angular build styles configuration. section 3.1 section 20.1.1
- Account for shell differences when running the configuration command; PowerShell requires a different quoting and escaping form. section 3.1
Styling a heading
Assigning class="bg-primary text-white p-3" to a heading applies Bootstrap’s background, text-color, and padding styles without defining custom rules. section 3.3
Listing 3.2. Installing the Bootstrap CSS package
npm install bootstrap@5.2.3
Install the Bootstrap CSS package with npm before adding its stylesheet to the Angular build configuration. section 3.1
Listing 3.3. Changing the application configuration
ng config projects.Primer.architect.build.options.styles '["src/styles.css", "node_modules/bootstrap/dist/css/bootstrap.min.css"]'
Add node_modules/bootstrap/dist/css/bootstrap.min.css beside the application stylesheet in the Angular styles configuration. section 3.1
