# Unit 2: Bootstrap (CA225) ## Introduction and Need - **Bootstrap** is a free, open-source front-end CSS/JavaScript framework for building responsive, mobile-first websites using prebuilt classes and components. - **Native CSS tools vs frameworks**: plain CSS gives full control but needs more code and cross-browser testing; frameworks (Bootstrap, Foundation, Bulma, Tailwind) speed development and give consistency. - **Need**: faster development, uniform design, responsive layouts, cross-browser compatibility, ready components. ## History - Created at **Twitter** (Mark Otto and Jacob Thornton) as "Twitter Blueprint"; released open source in **2011**; Bootstrap 3 (mobile first), 4 (Flexbox), 5 (no jQuery, 2021). ## Installation - **CDN**: `` and the bundle JS before ``. - **Local**: download compiled CSS/JS, or `npm install bootstrap`. - Add viewport meta tag. ## Advantages and Major Features - Responsive grid, ready components, JavaScript plugins, customisable with Sass, wide community, browser support, utility classes (spacing `m-3 p-2`, colours `text-primary`, `bg-dark`, display `d-flex`). ## Responsive Design - Layout adapts to screen size using fluid grids, flexible images and **media queries**. - Breakpoints: xs (<576px), **sm** (>=576), **md** (>=768), **lg** (>=992), **xl** (>=1200), **xxl** (>=1400). ## Bootstrap Components - **Buttons**: `