How to use bootstrap in angular framework? How may ways to use css in angular?

 How to use bootstrap in angular framework? 

In Angular, there are 5 main ways to write CSS, from component-level styling to global styling.
I’ll explain each one clearly with examples 👇

---

✅ 1. Component CSS File (Most Common & Recommended)

Each component has its own CSS file.

📁 app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

📁 app.component.css

h1 {
  color: blue;
}

✔ Scoped to that component only
✔ Best practice for large apps

---

✅ 2. Inline Styles in Component Template

CSS written directly inside HTML.

<h1 style="color: red; font-size: 30px;">Hello Angular</h1>

✔ Quick styling
❌ Not reusable
❌ Avoid in production

---

✅ 3. Styles Inside Component (styles property)

Write CSS directly inside the component file.

@Component({
  selector: 'app-demo',
  template: `<h2>Angular Styles</h2>`,
  styles: [`
    h2 {
      color: green;
    }
  `]
})

✔ Component-scoped
✔ Useful for small components

---

✅ 4. Global Styles (styles.css )

Applied to the entire application.

📁 src/styles.css

body {
  margin: 0;
  font-family: Arial;
}

✔ Best for:

• Bootstrap overrides

• Theme styles

• Common classes

---

✅ 5. External CSS Library (Bootstrap, Tailwind, etc.)

Example: Bootstrap

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]

✔ Used for UI frameworks
✔ Global effect

✅ Method 1: Install Bootstrap via npm (Recommended)

🔹 Step 1: Install Bootstrap

Open your Angular project folder and run:

npm install bootstrap

---

🔹 Step 2: Add Bootstrap CSS to angular.json

Open angular.json and find the styles array:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]

✅ Save the file.

---

🔹 Step 3: Restart Angular Server

ng serve

Bootstrap is now available globally 🎉

---

🔹 Step 4: Use Bootstrap Classes in Component HTML

<div class="container mt-4">
  <h2 class="text-primary">Bootstrap in Angular</h2>

  <button class="btn btn-success">Click Me</button>
</div>

---

✅ Method 2: Using Bootstrap CDN

Add CDN in src/index.html

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>

<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
</script>


✅ Method 3: Bootstrap with JavaScript Components 
(Modal, Tooltip)
If you want modals, dropdowns, tooltips, install Bootstrap JS:
npm install bootstrap @popperjs/core

Add JS in angular.json:
"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]


✅ Example: Bootstrap Modal in Angular
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Open Modal
</button>

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title">Bootstrap Modal</h5>
      </div>

      <div class="modal-body">
        Hello from Angular + Bootstrap
      </div>

    </div>
  </div>
</div>