📌 Objective: Learn how to install and set up Bootstrap using both CDN and local installation methods.
🔹 1. Introduction to Setting Up Bootstrap
Before building responsive websites with Bootstrap, we need to set up the framework correctly. There are two main ways to use Bootstrap:
1️⃣ CDN (Content Delivery Network) Installation – Quick and easy setup with no downloads required.
2️⃣ Local Installation (NPM/Yarn) – Allows customization using SCSS and local assets.
💡 Which method should you use?
- ✅ Use the CDN if you want quick implementation with minimal setup.
- ✅ Use the Local Installation if you want custom styling, SCSS support, and offline development.
🔹 2. Method 1: Using Bootstrap via CDN
CDN (Content Delivery Network) allows you to load Bootstrap files directly from the internet without downloading anything.
Step 1: Add Bootstrap CDN Links
Simply add these lines inside the <head> of your HTML file:
Step 2: Verify Bootstrap is Working
✅ Create a simple Bootstrap button to test the setup:
💡 If the button displays with Bootstrap’s styling, the setup is successful! 🚀
✅ Advantages of CDN Installation:
✔️ Faster setup – No need to download files.
✔️ Automatic updates – Always gets the latest version.
✔️ Improved performance – CDN servers are globally distributed.
❌ Disadvantages of CDN Installation:
- Cannot modify Bootstrap’s SCSS or source code.
- Requires an internet connection to load Bootstrap.
🔹 3. Method 2: Local Installation Using NPM
For advanced customization, you should install Bootstrap locally via NPM (Node Package Manager).
Step 1: Install Node.js & NPM
Ensure Node.js is installed on your system.
🔗 Download from: https://nodejs.org/
Verify the installation using:
Step 2: Install Bootstrap Locally
In your project folder, run the command:
✅ This downloads Bootstrap CSS, JavaScript, and SCSS files.
Step 3: Import Bootstrap into Your Project
After installation, link Bootstrap in your main CSS/JS files.
✅ For CSS:
✅ For JavaScript:
Step 4: Compile Bootstrap SCSS (Optional)
If you want custom themes and styles, modify Bootstrap’s SCSS:
✅ Open node_modules/bootstrap/scss/_variables.scss
✅ Change Bootstrap’s primary color:
✅ Recompile SCSS using:
💡 Now your custom Bootstrap theme is ready! 🎨
✅ Advantages of Local Installation:
✔️ Full customization – Modify Bootstrap SCSS.
✔️ Works offline – No internet required.
✔️ Faster load times – Local files reduce dependency on external CDNs.
❌ Disadvantages of Local Installation:
- Requires Node.js and NPM setup.
- You need to update Bootstrap manually when a new version is released.
🔹 4. Bonus: Using Bootstrap with a Package Manager (Yarn)
If you prefer Yarn over NPM, install Bootstrap using:
Then, import it into your project the same way as with NPM.
🔹 5. Comparing Bootstrap Installation Methods
| Method | Pros | Cons |
|---|---|---|
| CDN Installation | Easy setup, no downloads needed. | Requires an internet connection. |
| Local (NPM/Yarn) | Customizable SCSS, offline use. | More setup steps required. |
💡 Which method should you choose?
- ✅ Use CDN for quick projects, prototypes, or small websites.
- ✅ Use Local (NPM/Yarn) for custom themes, SCSS support, and larger projects.
📝 Lesson Recap Quiz
🎯 Test your knowledge with this quick quiz.
📌 Multiple-Choice Questions (MCQs)
1️⃣ What does CDN stand for?
a) Central Data Network
b) Content Distribution Network
c) Cloud Deployment Node
d) Cached Data Network
✅ Correct Answer: b) Content Distribution Network
2️⃣ Which method allows customization of Bootstrap SCSS?
a) CDN Installation
b) Local Installation (NPM/Yarn)
c) Both CDN and Local
d) None of the above
✅ Correct Answer: b) Local Installation (NPM/Yarn)
3️⃣ Which command installs Bootstrap via NPM?
a) npm add bootstrap
b) npm install bootstrap
c) install bootstrap
d) bootstrap npm
✅ Correct Answer: b) npm install bootstrap
4️⃣ What is one advantage of using Bootstrap via CDN?
a) You can modify Bootstrap SCSS files easily.
b) It works without an internet connection.
c) It ensures you are using the latest version automatically.
d) It requires Node.js.
✅ Correct Answer: c) It ensures you are using the latest version automatically.
🎯 Practical Challenge
✅ Set up Bootstrap both via CDN and NPM in two separate HTML files.
✅ Modify Bootstrap’s primary color using SCSS in the NPM version.
✅ Share your code snippet in the discussion forum!
🎓 Lesson Summary
✅ Bootstrap can be set up via CDN (quick & easy) or installed locally (for customization & SCSS support).
✅ CDN Installation is faster but requires an internet connection.
✅ Local Installation (NPM/Yarn) allows full control and customization.
✅ Bootstrap SCSS files can be modified in local installations only.
Leave a Reply