2. Bootstrap Typography, Utilities & Flexbox

Chapters 7-12: Typography, Display, Spacing (m/p), Sizing (w/h), Borders, Shadows, Flexbox & Responsive Images

Module 1: Typography, Spacing & Sizing Utilities

Controlling text alignment, margins, padding, width, and height using utility classes.

🇬🇧 English Definition

Bootstrap utility classes provide single-purpose styling shorthands for spacing (m-*, p-*), text alignment, sizing (w-50, w-100), and display behaviors.

🇮🇳 Hinglish Definition

Spacing utilities m-3 margin aur p-4 padding apply karti hain. Sizing utilities w-50 half width aur w-100 full width ke liye hoti hain.

Core Concepts & Rules

  • Spacing Shorthands: m=margin, p=padding, t=top, b=bottom, x=left/right, y=top/bottom.
  • Sizing: w-25, w-50, w-75, w-100, h-100 for percentage width and height.
  • Typography: display-1 to display-6 for large headings; lead for introductory text.

🔍 Line-by-Line Code Breakdown

  1. Line 1:

    aligns text center, bold, and uppercase.

  2. Line 2:
    adds padding 4, margin-bottom 3, and 100% width.

🎯 Interview Focus & Questions

  • Q: What are utility classes?
    A: Small single-purpose classes for spacing, display, typography, flexbox, and colors.
💻 Practical Bootstrap Code Example - Typography, Spacing & Sizing Utilities 
<div class="p-4 mb-3 w-100 bg-light border rounded-3 shadow-sm">
  <h2 class="display-6 fw-bold">Utility Box</h2>
  <p class="lead text-muted">Spaced content with rounded borders and shadow.</p>
</div>
📤 Expected Rendered Result:
Clean padded card-like box with display heading, muted lead paragraph, light background, and shadow.

Module 2: Flexbox Utilities & Responsive Images

Aligning flex items and constraining images responsively.

🇬🇧 English Definition

Flexbox utilities (d-flex, justify-content-*, align-items-*) manage alignment and distribution. img-fluid makes images responsive by constraining max-width to 100%.

🇮🇳 Hinglish Definition

d-flex Flexbox enable karta hai. img-fluid image ko parent width ke according automatically resize (responsive) karta hai.

Core Concepts & Rules

  • d-flex: Turns container into flex item wrapper.
  • Flex Alignment: justify-content-between distributes items; align-items-center vertically aligns.
  • img-fluid: Sets max-width: 100% and height: auto.

🔍 Line-by-Line Code Breakdown

  1. Line 1:
    aligns logo left and navigation right.
  2. Line 2: scales image responsively with circular border.

🎯 Interview Focus & Questions

  • Q: What does img-fluid do?
    A: Applies max-width: 100% and height: auto so images scale down with parent container width.
💻 Practical Bootstrap Code Example - Flexbox Utilities & Responsive Images 
<div class="d-flex justify-content-between align-items-center p-3 border">
  <span class="fw-bold">Brand Logo</span>
  <button class="btn btn-sm btn-outline-primary">Profile</button>
</div>
📤 Expected Rendered Result:
Flexbox container with Brand Logo on left and Profile button aligned on right.