How to Install Bootstrap in an Angular 6 Application

Integrating Bootstrap into your Angular application is a straightforward process that enhances the design and functionality of your web application. Bootstrap is a robust front-end framework that provides a wide range of pre-designed components and responsive design solutions. This guide will walk you through the steps to install Bootstrap in your Angular 6 application, from installation to adding it to your application files.

1. Installing Bootstrap via npm

To integrate Bootstrap into your Angular application, you first need to install it using Node Package Manager (npm). This is similar to downloading any other Node.js package. Here’s how you can do it:

Using the Terminal

Open your terminal or command prompt and navigate to your project directory. Once there, run the following command:

npm install bootstrap --save

This command installs the latest version of Bootstrap in your project. You can verify that Bootstrap has been installed by checking the following places:

The node_modules folder where you will find the Bootstrap files. The package.json file which shows the added dependency.

2. Adding Bootstrap to Your Angular Application

Once Bootstrap is installed, the next step is to add it to your Angular project. There are two main ways to do this:

2.1 Using the angular.json file

If you are working with older versions of Angular CLI, you might be using the angular-cli.json file. However, for the latest version, you should use the angular.json file. Here’s how you add Bootstrap:

Navigate to src/styles.css. Add the following line:

@import url(~bootstrap/dist/css/bootstrap.min.css);

2.2 Using the Angular CLI Command

Alternatively, you can also use the Angular CLI to add Bootstrap by running the following command:

ng add bootstrap

This command will configure Bootstrap and add the necessary styles to your project.

3. Verifying the Installation

After completing these steps, you need to verify that Bootstrap is correctly added to your application. Here’s what to check:

Ensure that the styles are being loaded by opening your browser and checking the developer console. Use Bootstrap classes in your components to ensure everything is working correctly.

4. Using Bootstrap Classes in Your Components

Now that Bootstrap is integrated, you can use its classes directly in your component templates. Here’s an example of how you can use a Bootstrap class in your component:

div classcontainer
  h1Hello, Bootstrap!/h1
/div

This simple example uses the .container class provided by Bootstrap to center content inside the page. You can now start adding more Bootstrap classes to enhance the look and functionality of your Angular application.

Conclusion

Integrating Bootstrap into your Angular 6 application is a simple process that can greatly enhance the user experience of your web application. By following these steps, you can easily add Bootstrap to your project and start leveraging its powerful features to create a responsive and visually appealing website.