Bootstrap Module 5
If You want To Earn Certificate For My All Course Then Contact Me At My Contact Page then I Will Take A Test And Give You certificate . Go My Contant Page And Fill Your Details Then I Will Contact You Click Here And Go To My Contact Page
https://onlinecourses2024for.blogspot.com/p/contact-us.html/
Module 5 : Understanding Bootstrap File Structure (CSS, JS, Utilities).
1. Bootstrap CSS : concepts
1.1 Source vs compiled
Source (SCSS): The editable files using Sass variables, maps, and mixins. This is where theming and custom builds happen.
Compiled CSS: The bootstrap.css and bootstrap.min.css files consumed by browsers. Generated by running Sass compilation and autoprefixing.
1.2 Top-level organization (typical scss/ folder)
_variables.scss — global variables like colors, spacings, breakpoints, font-sizes.
_functions.scss — Sass helper functions (e.g., color manipulation, breakpoint math).
_mixins.scss — reusable mixins (e.g., media query helpers, clearfix, vendor prefixes).
_root.scss — :root CSS custom properties (if supported / enabled) or initial CSS variables mapping.
bootstrap.scss — master entry that @imports all pieces in the correct order.
utilities/ — utility mixins and generator logic; may include _utilities.scss that builds utility classes from maps.
components/ — component-specific files such as _buttons.scss, _navbar.scss, _cards.scss.
layout/ — grid system (_grid.scss, _containers.scss), helpers for flex and spacing.
vendor/ — optional vendor-specific overrides or polyfills.
1.3 Why this order matters
Variables first: Components rely on variables (colors, spacings). Variables must be defined before use.
Mixins & functions next: Components and utilities call mixins and functions.
Layout & components: These generate the core UI rules.
Utilities last: Utilities can safely override earlier rules and provide atomic helpers.
2. SCSS mechanisms used in Bootstrap
2.1 Variables & maps
Variables (e.g., $primary: #0d6efd;) provide single-source-of-truth for colors, breakpoints, etc.
Maps allow structured collections (e.g., $theme-colors: ("primary": $primary, "secondary": $secondary);).
Maps are used to programmatically generate classes for each key.
2.2 Mixins & functions
Mixins accept parameters and output reusable blocks of CSS (e.g., @mixin clearfix { ... }).
Functions return values used in CSS generation (lighten($color, 10%)).
2.3 Looping / generation
Sass @each, @for, and @if are used to loop over maps and dynamically emit classes (common for utilities like .m-1, .p-2, .text-primary).
2.4 Responsive utilities using breakpoints map
Breakpoints are stored as a map such as $grid-breakpoints. Mixins iterate over breakpoints to create responsive variants: .d-md-block, .m-lg-3, etc.
2.5 Custom properties (CSS variables)
Modern versions optionally expose CSS variables (e.g., --bs-primary) for runtime theming. SCSS can be configured to emit them in :root or component scopes.
3. Bootstrap JavaScript: architecture & usage
3.1 Plugins (ES vs UMD)
Bootstrap JS is written as ES6 classes and exported as individual (e.g., modal.js, dropdown.js).
Build artifacts typically include a combined bundle (bootstrap.bundle.js) that includes dependencies (like Popper), and a bundle (bootstrap.esm.js) for tree-shaking.
3.2 Popper dependency
Components like Tooltip and Popover rely on Popper.js for positioning. The bundle includes Popper; the ESM build expects you to import Popper separately.
3.3 Initialization patterns
Data-api (HTML attributes): Many plugins auto-initialize from markup attributes (e.g., data-bs-toggle="modal").
JavaScript instantiation: You can create instances in code: const myModal = new bootstrap.Modal(element, { keyboard: false });.
jQuery (legacy): Older Bootstrap versions provided jQuery plugins; modern versions incentivize native JS usage.
3.4 Events & methods
Each plugin exposes lifecycle events (e.g., show.bs.modal, hidden.bs.modal) and methods (e.g., .show(), .hide()).
Knowing event names and how to listen is critical for complex UI orchestration.
3.5 imports for performance
Import only what you need: import Modal from 'bootstrap/js/dist/modal' — reduces bundle size when using bundlers like Webpack/Rollup/Vite.
4. Utilities system
4.1 What are utilities?
(atomic helpers) such as .text-center, .d-flex, .m-3. They are designed for quick composition and overriding.
4.2 Utility generation flow
A Sass map ($utilities) describes the categories (display, text, spacing), what values each has.
A utility generator mixin loops over the map and emits the appropriate classes, including responsive variants.
Because utilities are emitted after components, they have higher specificity when used later in HTML.
4.3 Customizing utilities
Edit $utilities map in your _custom.scss or override variables before importing bootstrap.scss.
Use Sass @include to generate only the utility groups you want.
4.4 Utility-first tradeoffs
Pros: Rapid development, reduced need for custom CSS, consistency.
Cons: HTML becomes verbose; overuse can harm readability and make semantic styling harder.
5. methods & code examples
5.1 Simple example: customizing the primary color
// _custom-variables.scss
$primary: #1a73e8; // override default
@import "node_modules/bootstrap/scss/bootstrap";
Result: compiled Bootstrap CSS uses your color for .btn-primary, .text-primary, etc.
// custom-bootstrap.scss
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
// define a minimal utilities map
$utilities: (
"spacing": (
property: margin,
class: m,
values: (0, 1, 2, 3, 4, 5)
)
);
@include utilities($utilities);
This outputs only .m-* classes (and responsive variants if you include breakpoints) — reducing CSS size.
5.3 JavaScript: lazy-loading
// using ESM import (Vite/Rollup/Webpack)
import Modal from 'bootstrap/js/dist/modal';
const btn = document.querySelector('#openModal');
btn.addEventListener('click', async () => {
const modalEl = document.getElementById('myModal');
const modal = new Modal(modalEl, { backdrop: true });
modal.show();
});
This pattern supports code splitting: the rest of Bootstrap JS is not included unless required.
6. Build a
custom
Bootstrap
Goal: produce a custom-bootstrap.min.css that only includes grid, buttons, navbar, spacing utilities, and a minimal JS bundle with Modal only.
6.1 Prerequisites
Node.js + npm
Sass compiler (dart-sass recommended)
Bundler (Vite/Parcel/Rollup/webpack)
6.2 Steps
Initialize
mkdir bs-custom && cd bs-custom
npm init -y
npm install bootstrap sass --save
Create scss/custom-bootstrap.scss — import only the pieces you need (order: functions -> variables -> mixins -> required components -> utilities)
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// layout
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/utilities"; // optional, see customizing map
// components
@import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/navbar";
// minimal utilities (custom map or include default utilities last)
@include utilities($utilities); // or selectively include generator
Compile SCSS
npx sass scss/custom-bootstrap.scss dist/custom-bootstrap.css --style=compressed
npx postcss dist/custom-bootstrap.css --use autoprefixer -o dist/custom-bootstrap.min.css
Create minimal JS bundle — using ESM imports
// src/index.js
import Modal from 'bootstrap/js/dist/modal';
window.openModal = (selector) => {
const el = document.querySelector(selector);
const m = new Modal(el);
m.show();
}
Bundle with your bundler to dist/custom-bootstrap.bundle.js.
Test: create an index.html that includes your custom-bootstrap.min.css and script. Verify markup and functionality.
6.3 deliverables & evaluation
dist/custom-bootstrap.min.css size comparison with full bootstrap.min.css.
dist/custom-bootstrap.bundle.js size and absence of unused code.
A short report: what was included, what was excluded, and why.
7. Exercises
Exercise 1 — Identify order problems
Problem: You imported _buttons.scss before _variables.scss and observed compilation errors. Explain why.
Answer. Buttons use color and spacing variables defined in _variables.scss; importing them before variables means Sass encounters undefined variables. Variables must be defined first.
Exercise 2 — Create a .text-brand utility
Add a utility .text-brand th
Done created a detailed document titled "Bootstrap File Structure — CSS, JS, Utilities
Bootstrap Module 4
If You want To Earn Certificate For My All Course Then Contact Me At My Contact Page then I Will Take A Test And Give You certificate . Go My Contant Page And Fill Your Details Then I Will Contact You Click Here And Go To My Contact Page
https://onlinecourses2024for.blogspot.com/p/contact-us.html/
Module 4 : Setting Up Development Environment (vs Code + Live Server)
Part 1 — Introduction
What is VS Code and why use it? (lightweight, extension ecosystem, cross-platform)
What is Live Server and what problem does it solve? (automatic browser reload on save; quick local dev server)
Part 2 — Install & Setup
Walk through installing VS Code (Windows/macOS/Linux)
Install recommended extensions: Live Server, Prettier, ESLint, GitLens, Auto Rename Tag, IntelliSense where relevant
Show how to enable Settings Sync and choose a theme
Part 3 — Demo: Create First Project
Create folder, index.html, styles.css, script.js
Start Live Server and demonstrate live reload
Show workspace .vscode/settings.json (format on save, default formatter)
Part 4 — Dive: Live Server Settings & Troubleshooting
liveServer.settings.port and liveServer.settings.root
Demo changing the root to serve a subfolder
Common issues (Go Live missing, port conflict, open-file vs open-folder)
exercises, discuss grading rubric, provide resources for further research
1) Installing VS Code (short demo)
Windows (demo):
Visit the official VS Code download page and download the Windows User Installer.
Run the downloaded VSCodeUserSetup-<version>.exe and follow the installer prompts.
During install, recommend enabling: "Add to PATH" (optional) and "Open with Code" context menus.
macOS (demo):
Download the macOS .zip from the official page.
Extract and move Visual Studio Code.app to /Applications.
Optionally run Shell Command: Install 'code' command in PATH from the Command Palette (Cmd+Shift+P).
Linux (.deb / .rpm) (demo):
Download the .deb or .rpm package for your distro.
Install with package manager (sudo apt install ./<file>.deb or sudo rpm -i <file>.rpm).
tip: show the VS Code Getting Started page and point to platform-specific setup during the demo.
2) First-time
Open VS Code and enable Settings Sync (turns on sync for settings, extensions, keybindings
Install these recommended extensions during demo: Live Server, Prettier - Code formatter, ESLint, GitLens — Git supercharged, Auto Rename Tag.
Set common preferences (User Settings):
editor.formatOnSave: true
files.autoSave: "off" (or afterDelay depending on instructor preference)
Show how to open Settings UI and how to edit settings.json directly.
3) Install Live Server
Open Extensions view (Ctrl+Shift+X / Cmd+Shift+X).
Search for Live Server (by Ritwick Dey) and click Install.
After installation, open an index.html file and click Go Live in the status bar (bottom-right). The project will open at http://127.0.0.1:5500/ by default.
demo: edit index.html, save, and show the browser auto-refresh.
4) structure
Project tree:
my-first-website/
├─ index.html
├─ css/
│ └─ styles.css
├─ js/
│ └─ script.js
└─ .vscode/
└─ settings.json
index.html (minimal example):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Live Server Demo</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<h1 id="title">Hello, Live Server!</h1>
<button id="change">Change Text</button>
<script src="js/script.js"></script>
</body>
</html>
css/styles.css
body { font-family: system-ui, sans-serif; padding: 2rem; }
h1 { color: #2b6cb0; }
js/script.js
const btn = document.getElementById('change');
const h1 = document.getElementById('title');
btn.addEventListener('click', () => {
h1.textContent = 'Text changed — Live!';
});
Start Live Server (Go Live) and show that editing styles.css or index.html and saving triggers an automatic page reload.
5) Useful Live Server settings
Demonstrate adding these to .vscode/settings.json to ensure everyone on the team has the same dev-server behavior:
{
"liveServer.settings.port": 5500,
"liveServer.settings.root": "/",
"liveServer.settings.open": true,
"editor.formatOnSave": true
}
Explain each setting briefly:
liveServer.settings.port: port for the local server (default 5500). Useful if you need a fixed port or must change due to conflict.
liveServer.settings.root: choose a subfolder as the server root (useful for multi-project repos).
liveServer.settings.open: whether browser opens automatically.
tip: show how to edit these via the Settings UI (Extensions → Live Server → Configuration → Edit in settings.json).
6) Workflow
Open a folder, not a single file. Live Server uses the workspace root; opening a file outside a folder may prevent Go Live from appearing.
Use .vscode/settings.json for team defaults (port, root, format on save).
Combine Live Server with Prettier + ESLint to keep code clean while previewing quickly.
For larger projects (React, Vue, Angular), prefer their framework dev servers (npm start, vite, ng serve) instead of Live Server.
Exercise 1
Create a one-page site and use Live Server to preview changes live.
Create the project structure shown above.
Add the example index.html, styles.css, and script.js.
Start Live Server and demonstrate live reload by changing the H1 text and CSS color.
Deliverable: A working project with live reload.
criteria: Server starts, browser opens, changes reflecting on save.
Exercise 2 — Multi-page site & changing root
Build a multi-page demo, place pages under /website and configure Live Server to serve /website as root.
Create website/ folder with index.html, about.html and assets subfolders.
Add .vscode/settings.json with "liveServer.settings.root": "/website".
Start Live Server and verify that http://127.0.0.1:5500/ shows content from /website.
Deliverable: Multi-page site accessible via Live Server root.
Site served from correct root and navigation works.
Exercise 3 — Integrate SCSS & live-compile
Show how Live Server can preview compiled CSS while using a live Sass compiler extension.
Install Live Sass Compiler extension.
Create scss/styles.scss, compile to css/styles.css on save.
Start Live Server; edit scss/styles.scss and ensure changes are compiled and the browser reloads.
Deliverable: SCSS workflow with live compile + live reload.
Assessment: SCSS edits result in updated CSS and browser reload.
Exercise 4
Teams solve 3 common issues Scenarios:
Go Live button missing (solution: open folder, reinstall extension, check extension disabled)
Port conflict (solution: change liveServer.settings.port or kill process)
Browser caching prevents CSS update (solution: hard reload / disable cache in devtools)
Deliverable: Short describing the problem, steps taken, and final resolution.
Assessment: Correct diagnosis and reproducible fix steps.
Q: "Go Live" button doesn't appear.
Make sure you opened a folder/workspace (File → Open Folder). Live Server uses the workspace root. If only a single file is open, the status bar button might not appear.
Check Extensions view to verify Live Server is installed and enabled.
Q: Page doesn't reload on save.
Confirm you saved the file. If using autoSave, make sure the editor writes file changes to disk.
Check console for errors in the extension host.
Q: Port 5500 is already in use.
Edit .vscode/settings.json to change liveServer.settings.port to another available port (e.g., 5501) or set to 0 to pick a random free port.
Q: Browser fails CORS or API calls.
Live Server is a static file server. For backend API calls, run a proper backend server with CORS configured or use a proxy.
Q: I want to open Live Server on a specific browser (not default).
You can configure the liveServer.settings.CustomBrowser option in settings to point to a browser executable.
Setting Up Development Environment (VS Code + Live Server)”.
VS Code — download & platform installers (official).
VS Code — setup overview and recommended additional components (Git, Node.js, extensions).
Live Server — official extension page / install instructions (Ritwick Dey).
Live Server — detailed settings docs (port, root, etc.).
VS Code — extensions & marketplace docs (how to find/install/manage extensions).
Bootstrap Module 3
If You want To Earn Certificate For My All Course Then Contact Me At My Contact Page then I Will Take A Test And Give You certificate . Go My Contant Page And Fill Your Details Then I Will Contact You Click Here And Go To My Contact Page
https://onlinecourses2024for.blogspot.com/p/contact-us.html/
Module 3 : Installing Bootstrap via NPM & Package Managers.
installBootstrap
Using a package manager (like npm) brings several advantages:
Version control & reproducibility: the exact Bootstrap version is tracked in package.json/package-lock.json/pnpm-lock.yaml.
Customization: installing the source Sass files lets you override variables and rebuild only the parts you need.
Bundling: modern build tools can tree-shake and include only the JS you use, reducing final bundle size.
Ecosystem: easy access to related packages like bootstrap-icons, react-bootstrap, or Popper if needed.
Choose the compiled build (prebuilt CSS/JS) for speed and simplicity; choose the source (SCSS) when you want deep theming and outputs optimized for your design system.
2. Package choices
npm (recommended / most common)
npm init -y
npm install bootstrap@latest
# or pin a version
npm install bootstrap@5.3.8
yarn
yarn init -y
yarn add bootstrap
pnpm
pnpm init
pnpm add bootstrap
bun
bun init
bun add bootstrap
Note: package-managed installs typically add Bootstrap's CSS/JS source files to node_modules/bootstrap. Depending on your deployment workflow you should either copy the needed files into your public/ folder or import them into your bundler entry file.
3. installed — compiled vs source files
bootstrap/dist/css/bootstrap.min.css — compiled, production-ready CSS.
bootstrap/dist/js/bootstrap.bundle.min.js — compiled JavaScript including Popper (useful for tooltips/popovers). The bundle file contains Popper so you won’t need to install Popper separately when using the bundle.
bootstrap/scss/ — source Sass files for customization.
bootstrap/js/dist/ — per-plugin JS modules (e.g., alert.js, modal.js) for imports.
4. static site using npm-managed files (no bundler)
Goal: Install Bootstrap with npm and serve a static page that references the files in node_modules
(development/demo purpose).
npm init -y
npm install bootstrap
Create index.html and reference the dist files:
<!-- index.html -->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container py-5">
<h1 class="text-primary">Hello Bootstrap (npm)</h1>
<button class="btn btn-primary" data-bs-toggle="tooltip" title="Tooltip!">Hover me</button>
</div>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Serving node_modules directly in production is not recommended; instead copy these assets to your public/ directory in a build step or import them via a bundler.
The bootstrap.bundle file includes Popper, so tooltip/popover features work out of the box.
5. Modern workflow using Vite
Goal: Use Vite to bundle assets and import Bootstrap CSS and JS properly.
Commands:
npm create vite@latest my-bootstrap-vite --template vanilla
cd my-bootstrap-vite
npm install
npm install bootstrap
# optional: npm install sass if you plan to use SCSS
src/main.js
// import compiled CSS
import 'bootstrap/dist/css/bootstrap.min.css'
// import all Bootstrap JS (you can also import specific plugins)
import 'bootstrap'
console.log('Bootstrap loaded')
index.html should contain your markup. Vite will bundle CSS and JS into the final build.
Smarter option — JS imports (smaller bundles):
import 'bootstrap/dist/css/bootstrap.min.css'
import Tooltip from 'bootstrap/js/dist/tooltip'
import Modal from 'bootstrap/js/dist/modal'
// initialize tooltips manually
const t = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
.map(el => new Tooltip(el))
This approach avoids importing unused plugin code and helps tree-shaking.
6. Method C — Customize Bootstrap using SCSS
When: You want to change theme variables (colors, breakpoints, button radii) and produce a single custom stylesheet.
Steps:
npm install bootstrap sass
Create src/scss/custom.scss
// custom.scss
// 1) override any variables you need BEFORE importing the rest
$primary: #1f6feb; // custom primary color
$body-bg: #f6f8fb;
// 2) import Bootstrap
@import "bootstrap/scss/bootstrap";
Build the stylesheet with the dart-sass CLI:
// package.json: scripts
"scripts": {
"build:css": "sass src/scss/custom.scss dist/css/styles.css --style=compressed"
}
npm run build:css and reference dist/css/styles.css in your HTML.
Tips :
Place variable overrides before the main import so Bootstrap picks them up.
You can @import only the SCSS partials you need (e.g., utilities, buttons) for smaller CSS output — this requires understanding file dependencies in bootstrap/scss.
7. Integrating with frameworks (React / Vue / Angular)
For React + React-Bootstrap: npm install react-bootstrap bootstrap and import CSS (import 'bootstrap/dist/css/bootstrap.min.css') into your entry file. Using react-bootstrap gives you React components mirroring Bootstrap.
For a component library or design system, prefer SCSS source installs and compile into your global theme.
8. (expected outcome)
Exercise 1 — Quick install and verify
Create a new folder, npm init -y, npm install bootstrap, create index.html that loads bootstrap.min.css and bootstrap.bundle.min.js from node_modules. Add a button with btn btn-success.
Expected: Button styled green; JS features (dropdown/tooltip) working if used.
Why this helps: Verifies that package files are present and path references are correct.
Exercise 2 — SCSS override
Install bootstrap and sass. Create custom.scss, override $primary, build the CSS and confirm the new primary color is used by .btn-primary.
Expected: Buttons styled with your custom primary color.
Why: variable overrides and the SCSS build pipeline.
Exercise 3 — Modular JS import
Using a bundler (Vite/webpack), import only Tooltip from bootstrap/js/dist/tooltip and initialize tooltips on page elements.
Expected: Tooltip functionality works and the final JS bundle is smaller than importing the entire bootstrap package.
Why: Demonstrates tree-shaking and selective imports.
Exercise 4 — Use yarn & pnpm
Task: Repeat Exercise 1 using yarn and then pnpm. Note node_modules layout differences (pnpm uses a content-addressable store and symlinks).
Expected: Same runtime behavior; observe pnpm's symlink layout in node_modules.
Why: Shows differences between package managers.
9. "Custom Bootstrap"
Objective: Build a small demo app that uses a custom SCSS theme and a modal triggered by JavaScript. Measure bundle size and compare "full import" vs import".
Steps
npm init -y and npm install bootstrap sass vite.
Create src/scss/custom.scss and override 3 variables (primary, border-radius, body-bg).
npm run build:css to produce dist/css/styles.css.
Create index.html and src/main.js that imports dist/css/styles.css and uses modular JS import for only modal (e.g., import Modal from 'bootstrap/js/dist/modal').
Build with vite build and inspect the dist/ bundle — record file sizes.
Repeat step 4 but instead import 'bootstrap' (full import) and compare final JS size.
Measurements & Acceptance Criteria:
SCSS build produces styles.css with custom variables applied.
Modal opens and closes correctly when triggered.
import build is measurably smaller (document % difference).
write-up : Document commands run, key files, and a short analysis of why imports reduced size (unused plugin code excluded).
10. common issues
Tooltips/popovers not working: Did you load Popper? Use the bootstrap.bundle or ensure Popper is included/imported.
SCSS build errors: Check order of imports; variable overrides must come before importing bootstrap main file. If using the new Sass module system (@use), be aware of namespacing differences.
Large bundle: Import only the JS plugins you need from bootstrap/js/dist/ instead of importing entire package.
Assets not found in production: Don’t rely on node_modules paths in production — copy or bundle assets into public/ or let your bundler include them.
11. Research
Suggested:
Internals of Bootstrap’s JS modularization and how tree-shaking works with modern bundlers.
Best for theming large apps with Bootstrap and variable scope management.
Accessibility implications of Bootstrap components (modals, alerts, accordions).
Comparison of build outputs across bundlers (Webpack vs Vite vs Rollup) when using Bootstrap.
Migration notes and history (removal of jQuery in v5, Popper integration).
research
Profile bundle size with and without JS imports (use source-map-explorer or rollup-plugin-visualizer).
Explore the bootstrap/scss partials to create a minimal CSS build that contains only utilities and components you need.
