Jan 21, 2026

Lecture Notes

Slides: CSS II

Flexbox Review

• Elements occupy space based on "box size" which can be manipulated
• display: flex allows flexible layout customization of child elements
• Key properties: flex-wrap, justify-content
• Child properties: flex-grow for space allocation
• Flexbox containers control children layout only, not grandchildren

When to Use Flexbox

• Good for: Centering elements, creating page columns, filling larger spaces
• Not ideal for: Stacking blocks (use default behavior) or specific spacing (use margins/padding)

Responsive Design

• Must include viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1">
• Media queries apply conditional styling based on screen size
• Syntax: @media (min-width: 768px) { ... }
• Mobile-first design: Start with mobile styles, add complexity for larger screens

Bootstrap Framework

• Collection of pre-written CSS rules for rapid development
• Link via CDN before custom stylesheets
• Provides utility classes for styling without custom CSS
• Responsive versions use infixes indicating breakpoints (sm, md, lg, xl)

Bootstrap Grid System

• 12-column layout system
• Adaptable by screen size using responsive classes
• Example: col-md-6 = 6 columns on medium+ screens

Bootstrap Widgets

• Interactive components (collapsibles, navbars, modals)
• Use data attributes for functionality
• Requires Bootstrap JavaScript inclusion