1. Bootstrap Fundamentals, Setup, Containers & Grid

Chapters 1-6: What is Bootstrap, CDN setup, Viewport meta tag, Containers, Breakpoints & 12-Column Grid System

Module 1: Introduction to Bootstrap & CDN Setup

Bootstrap is a popular front-end CSS framework providing responsive utilities and pre-styled UI components.

🇬🇧 English Definition

Bootstrap is an open-source front-end framework providing responsive layout tools, CSS utilities, and pre-built UI components for building modern web applications quickly.

🇮🇳 Hinglish Definition

Bootstrap ready-made CSS classes aur components deta hai. Isse button, navbar, cards, grid, forms aur responsive layouts jaldi se bana sakte ho.

Core Concepts & Rules

  • CDN Integration: Include Bootstrap CSS in and JS bundle before .
  • Viewport Meta Tag: Mandatory for mobile responsiveness ().
  • Bootstrap vs Plain CSS: Bootstrap accelerates UI development using a standardized design system.

🔍 Line-by-Line Code Breakdown

  1. Line 1: imports compiled Bootstrap CSS stylesheet from CDN.
  2. Line 2:

🎯 Interview Focus & Questions

  • Q: What is Bootstrap?
    A: A front-end framework providing responsive layout utilities and reusable UI components.
  • Q: Why is the viewport meta tag important?
    A: It configures the browser rendering viewport width and scale for mobile devices.
💻 Practical Bootstrap Code Example - Introduction to Bootstrap & CDN Setup 
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<button class="btn btn-primary">Click Me</button>
📤 Expected Rendered Result:
Blue primary styled button rendered with rounded corners and clean typography.

Module 2: Containers, Breakpoints & 12-Column Grid System

Building mobile-first layouts using containers, rows, and responsive column grids.

🇬🇧 English Definition

Bootstrap's grid is a responsive 12-column layout system based on containers, rows, and breakpoint columns (sm, md, lg, xl, xxl).

🇮🇳 Hinglish Definition

Grid formula hai: container -> row -> columns. 12 parts me width divide karke responsive layout bana sakte ho.

Core Concepts & Rules

  • .container: Fixed-width responsive container that centers content.
  • .container-fluid: Full-width container spanning 100% of viewport width.
  • 12-Column Grid: col-md-4 takes 4 units (1/3 width); col-md-8 takes 8 units (2/3 width).

🔍 Line-by-Line Code Breakdown

  1. Line 1:
    creates centered layout wrapper.
  2. Line 2:
    creates flex row context with gutter spacing.
  3. Line 3-4: col-12 col-md-6 creates 2 equal columns on medium screens and stacked on mobile.

🎯 Interview Focus & Questions

  • Q: container vs container-fluid?
    A: container has responsive max-widths; container-fluid spans 100% width across all viewports.
  • Q: What is a gutter?
    A: Gutters are the horizontal and vertical padding between grid columns controlled via g-, gx-, gy- classes.
💻 Practical Bootstrap Code Example - Containers, Breakpoints & 12-Column Grid System 
<div class="container">
  <div class="row g-3">
    <div class="col-12 col-md-4"><div class="p-3 border">Sidebar</div></div>
    <div class="col-12 col-md-8"><div class="p-3 border">Main Content</div></div>
  </div>
</div>
📤 Expected Rendered Result:
Responsive 1/3 Sidebar + 2/3 Content grid on desktop, stacking full-width on mobile screens.