#11 Using Bootstrap for Styling | Angular Components & Directives| A Complete Angular Course

How to Use Bootstrap in Angular Projects

Introduction to Bootstrap

• Bootstrap is a responsive, mobile-first CSS framework designed for building web applications. It is open-source and includes features like SASS variables, mixins, a responsive grid system, pre-built components, and powerful JavaScript plugins.

• The framework consists of several CSS files that define styles and JavaScript files necessary for certain components (e.g., dropdown menus, auto-suggestions), which require bootstrap.js and have dependencies on jQuery.

Installing Bootstrap in an Angular Project

• There are multiple methods to include Bootstrap in an Angular application; however, the preferred method discussed involves installing it via npm rather than using a CDN link directly in index.html.

• To install Bootstrap, open the terminal within your project directory. You can use either the command prompt or VS Code's built-in terminal.

Installation Steps

• Use the command npm install bootstrap --save to install the latest version of Bootstrap. If you need a specific version (e.g., 3), you can specify it after the package name.

• After installation, verify by checking the node_modules folder where all installed packages are stored. Look for a folder named "bootstrap" inside this directory.

Accessing Bootstrap Files

• Inside the "bootstrap" folder located in node_modules, you'll find all related files including CSS and JS folders containing necessary stylesheets and scripts.

• The main CSS file needed for integration is bootstrap.min.css, found under node_modules/bootstrap/dist/css/.

Integrating Bootstrap into Angular

• To use this CSS file in your Angular project, you can add its path to the styles array within the angular.json file before any other stylesheets listed there.

• Ensure that you type the path correctly; any misspelling will prevent bootstrap classes from functioning properly.

Alternative Import Method

• An alternative way to include Bootstrap is by adding an import statement directly into your project's main stylesheet (style.css). This requires specifying a relative path correctly.

Testing Integration with HTML Components

• Once integrated successfully through one of these methods, test if bootstrap classes work by editing your component's HTML file (e.g., app.component.html) to include some sample code from Bootstrap documentation.

• For example, copying button elements from documentation allows you to check if they render correctly within your Angular application.

Conclusion

How to Apply Bootstrap Styles in Angular

Rebuilding the Angular Application

• The CSS style is not applied because after installing Bootstrap, it is necessary to rebuild the Angular application. This involves stopping the current process in the command prompt.

• Running the ng serve command recompiles the Angular project, generates bundles, injects them into index.html, and starts a live development server for the application.

Verifying Bootstrap Integration

• After recompilation, users can see that Bootstrap styles are applied correctly to elements like buttons. Removing Bootstrap classes reverts them to default styling.

• Users are encouraged to explore Bootstrap documentation for component usage. However, in this specific project context, there is no intention to use Bootstrap further.

Uninstalling Bootstrap