Scribd
Upload
4 views

Setting up Bootstrap

This document outlines the steps to integrate Bootstrap into an Angular application using either npm or cdnjs. It details the required Bootstrap files, how to add them to the index.html, and the necessary commands to run the Angular app with Bootstrap styles. Additionally, it provides troubleshooting tips for common issues like port conflicts and verification methods for successful integration.

Uploaded by

liyo12m3
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Setting up Bootstrap

This document outlines the steps to integrate Bootstrap into an Angular application using either npm or cdnjs. It details the required Bootstrap files, how to add them to the index.html, and the necessary commands to run the Angular app with Bootstrap styles. Additionally, it provides troubleshooting tips for common issues like port conflicts and verification methods for successful integration.

Uploaded by

liyo12m3
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

6.

Bootstrap Setup in Angular


In this section, we will integrate Bootstrap into an Angular application. Bootstrap will be used for styling and layout across
all pages and components in the app.

6.1. Setting Up Bootstrap

Methods to Integrate Bootstrap.

Using npm:

Bootstrap can be installed as a dependency for the Angular project using npm (Node Package Manager).

This method is preferred for managing dependencies directly within the project.

Using cdnjs:

Bootstrap can be linked via URLs from cdnjs, a free and open-source CDN service.

This method avoids installation but requires an internet connection during development.

6.2. Obtaining Bootstrap via cdnjs

To integrate Bootstrap using cdnjs, you need to add the necessary JavaScript and CSS files to your index.html file.

Required Bootstrap Files (Version 5.2.3 example):

JavaScript:

bootstrap.min.js : Essential for enabling Bootstrap's JavaScript functionality.

bootstrap.bundle.min.js : Includes additional dependencies.

bootstrap.esm.min.js : ES module version of Bootstrap JavaScript.

CSS Files:

bootstrap.min.css : Main stylesheet for Bootstrap.

bootstrap-grid.min.css : Grid system styles.

bootstrap-reboot.min.css : Reboot styles for cross-browser normalization.

bootstrap-utilities.min.css : Utility classes for spacing, text alignment, etc.

File URLs (cdnjs links)

Add these files to your project for proper Bootstrap integration:

File cdnjs URL

bootstrap.min.js https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js

bootstrap.bundle.min.js https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.bundle.min.js

bootstrap.min.css https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css

bootstrap-grid.min.css https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap-grid.min.css

bootstrap- https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap-
reboot.min.css
reboot.min.css

bootstrap- https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap-
utilities.min.css utilities.min.css

6.3. Implementing Bootstrap in Angular

Adding Bootstrap JavaScript

To include Bootstrap's JavaScript functionality:

1. Open the index.html file (located in the src folder).

2. Add the following <script> tag within the <head> section:

<script vbscript-html
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js"
integrity="sha512-1/RvTCDvEU"
crossorigin="anonymous">
</script>

Adding Bootstrap CSS

To include Bootstrap's CSS styles:

1. Add the following <link> tags in the <head> section of index.html :

<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css"
integrity="sha512-..."
crossorigin="anonymous">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap-grid.min.cs
s"
integrity="sha512-..."
crossorigin="anonymous">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap-reboot.min.c
ss"
integrity="sha512-..."
crossorigin="anonymous">

6.4. Running the Angular App with Bootstrap

Steps to Run the Application

1. Open the Integrated Terminal in your Angular project folder.

Right-click the project folder → Select "Open in Integrated Terminal".

2. Type the following command in the terminal to start the development server:
ng serve bash

3. Open the browser and navigate to: http://localhost:4200.

4. Verify that Bootstrap styles are applied to the app.

Handling "Port 4200 in Use" Error

If the error message "Port 4200 is already in use" appears:

Angular will prompt:

Would you like to use a different port? (y/N)

Type y (yes), and Angular will assign a different port (e.g., localhost:55375 ).

Open the provided URL in your browser to view the app.

6.5. Verifying Bootstrap Integration

To confirm that Bootstrap has been successfully integrated:

1. Using Browser Developer Tools

Open Developer Tools (Press F12 or right-click → "Inspect").

Navigate to the "Network" tab.

Refresh the page and look for Bootstrap .js and .css files in the Network log.

2. Checking Styles

Apply a Bootstrap class (e.g., btn btn-primary ) to an element in app.component.html :

<button class="btn btn-primary">Click Me</button> vbscript-html

Refresh the browser. The button should have Bootstrap's primary button styling (blue background, white text).

6.6. Obtaining Bootstrap via npm

1. Run the following command in the terminal:

npm install bootstrap bash

2. Open the angular.json file.

3. Add the Bootstrap CSS and JavaScript paths under the "styles" and "scripts" arrays:

"styles": [ json
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

4. Save the file and restart the development server:

ng serve bash

6.7. Verification of npm Integration

Run the app in the browser.

Test Bootstrap styles (e.g., btn btn-success ) in the app.component.html file:

<button class="btn btn-success">Success</button> vbscript-html

You might also like