# Unit 2: Introduction to Bootstrap5 (CA584) ## Responsive Web Design - Designing pages that adapt to the screen size of desktops, tablets and phones. Techniques: **fluid grids, flexible images, media queries** (`@media (max-width: 768px)`), and the viewport meta tag ``. Mobile-first approach. ## Fundamentals of UI Design for Websites - Principles: **consistency, simplicity, hierarchy, visibility, feedback, accessibility, whitespace, readable typography and colour contrast**, clear navigation, mobile friendliness, fast loading. ## Introduction and Installation of Bootstrap 5 - **Bootstrap**: popular open-source CSS and JavaScript front-end framework (Twitter) for responsive, mobile-first sites. Version 5 **removed jQuery dependency** and dropped IE support; adds utility API, RTL, improved grid. - **Installation**: CDN links ``` ``` or download compiled files, or use npm/Sass. ## Bootstrap Containers - `.container` (fixed max-width at each breakpoint), `.container-fluid` (full width), and `.container-{breakpoint}` (100% until breakpoint). ## Bootstrap Grid Layout System - Flexbox-based **12-column grid**: `.container > .row > .col-*`. - Breakpoints: **xs (<576px), sm (≥576), md (≥768), lg (≥992), xl (≥1200), xxl (≥1400)**. ```

Main

Side

``` - Columns stack vertically on small screens; classes `col-6`, `col-sm-4`, `offset-md-2`, `g-3` (gutters), `order-*`. **[Figure: 12-column grid]** A row divided into twelve equal units split into 8 and 4 column blocks. ## Bootstrap Components - Ready-made UI parts: **buttons** (`btn btn-primary`), **alerts**, **badges**, **cards**, **modals**, **dropdowns**, **accordion**, **tabs**, **pagination**, **list groups**, **forms**, **tables**, **progress bars**, **tooltips and popovers**, **toasts**. - Utilities: spacing (`m-3, p-2`), colours (`text-success, bg-dark`), display, flex. ## Adding Symbols - **Bootstrap Icons** (SVG icon library): include CSS link and use ``. Alternatives: Font Awesome, Glyphicons (removed from Bootstrap 4+). Control size with `font-size` and colour with `text-*`. ## Bootstrap Carousels - Slideshow of images or text: `.carousel .slide`, `.carousel-inner`, `.carousel-item` (one `active`), controls `.carousel-control-prev/next`, indicators and captions. Attributes: `data-bs-ride="carousel"`, `data-bs-interval`, `data-bs-target`, `data-bs-slide`. ## Bootstrap Navigation Bars - `.navbar` with `.navbar-expand-lg` (collapse breakpoint), `.navbar-brand`, `.navbar-nav`, `.nav-item`, `.nav-link`, toggler button `.navbar-toggler` with `data-bs-toggle="collapse"` for the mobile hamburger menu. - Colour schemes `.navbar-dark bg-dark`; positions `fixed-top`, `sticky-top`; dropdown menus and forms inside navbar. ## Likely Exam Questions 1. What is responsive web design? How is it achieved? (2 marks) 2. Explain the Bootstrap grid system with an example. 3. List the Bootstrap 5 breakpoints. (2 marks) 4. How do you create a carousel in Bootstrap? 5. Explain how to build a responsive navigation bar. 6. What changes did Bootstrap 5 introduce?