Module 23 : Creating Responsive Layouts (Header, Content, Footer) in Bootscript. self-contained for Creating Responsive Layouts (Header, Content, Footer) in Bootstrap (I’m assuming “Bootscript” = Bootstrap). Where it matters I’ll cite official Bootstrap docs and CDN info.
note: uses Bootstrap 5.x (mobile-first, utility-heavy). You can load via the official CDN or your build tool.
concepts
1. Mobile-first and breakpoints
Bootstrap uses a mobile-first approach: styles apply to small screens by default and expand at breakpoints (sm, md, lg, xl, xxl). Use breakpoint prefixes to change behavior at larger widths.
2. Containers
.container — responsive fixed max width that changes by breakpoint.
.container-fluid — full width (always 100%).
.container-{breakpoint} — fixed max width from that breakpoint upward.
Containers constrain horizontal width and provide consistent gutters.
3. Grid & Flex
Grid: .row + .col gives responsive columns (auto, fraction, or breakpoint-specific).
Flex utilities: .d-flex, .justify-content-*, .align-items-* provide fine-grained alignment without writing new CSS.
Use grid for major page structure and flex for inline alignment (nav items, header controls, etc).
4. Utilities & spacing
Bootstrap’s utility classes (.p-, .m-, .gap-, .text-*, .bg-*) let you rapidly adjust spacing, alignment, and color without writing CSS.
5. Accessibility
Navigation should use semantic <nav> and <ul> lists.
Use aria-current="page" and aria-label for landmarks.
Make sure interactive elements are focusable and keyboard operable.
Starter: Boilerplate (HTML + CDN)
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>Responsive Shell — Bootstrap</title> <!-- Bootstrap CSS (CDN recommended for quick test) --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <!-- content goes here --> <!-- Bootstrap JS bundle (Popper included) --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
(Use the official CDN for production with version pinning; docs and CDN links: official Bootstrap resources.)
Example 1 — Basic responsive header, content, footer
Complete example
<header class="bg-light border-bottom"> <nav class="container d-flex flex-wrap align-items-center py-2"> <a href="#" class="d-flex align-items-center mb-2 mb-lg-0 text-dark text-decoration-none"> <svg width="32" height="32" class="me-2" role="img" aria-label="Logo"><rect width="100%" height="100%" fill="#6c757d"/></svg> <span class="fs-5">Brand</span> </a> <ul class="nav ms-auto"> <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="#">Features</a></li> <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li> <li class="nav-item"><a class="nav-link" href="#">Contact</a></li> </ul> </nav> </header> <main class="container py-5"> <div class="row"> <aside class="col-12 col-md-4 mb-4"> <div class="p-3 bg-white border rounded">Sidebar / Filters</div> </aside> <section class="col-12 col-md-8"> <article class="mb-4"> <h1 class="h3">Responsive layout with Bootstrap</h1> <p>Introductory paragraph — works across screen sizes.</p> </article> <div class="row g-3"> <div class="col-12 col-sm-6"> <div class="p-3 bg-light border rounded">Card 1</div> </div> <div class="col-12 col-sm-6"> <div class="p-3 bg-light border rounded">Card 2</div> </div> </div> </section> </div> </main> <footer class="bg-dark text-white mt-auto"> <div class="container py-4"> <div class="row"> <div class="col-12 col-md-6"> <p class="mb-0">© <span id="year"></span> Your Company</p> </div> <div class="col-12 col-md-6 text-md-end"> <a class="text-white-50 me-3" href="#">Privacy</a> <a class="text-white-50" href="#">Terms</a> </div> </div> </div> </footer> <script>document.getElementById('year').textContent = new Date().getFullYear();</script>
Explanation (walkthrough)
Header uses .container for constrained width and d-flex + ms-auto on .nav to push nav items to the right.
.mb-2 mb-lg-0 provides different vertical spacing on mobile vs large screens.
Main uses .row and .col- classes. The sidebar becomes full width on small screens (col-12) and 4/12 on medium (col-md-4).
.g-3 provides a grid gap between content cards.
Footer uses .mt-auto (works inside flex container if you use full-height flex layout) — here we rely on normal stacking; in advanced layout we’ll show a sticky-footer pattern.
Variant A — Sticky header (sticky top)
If you want the header to stick to the top on scroll:
<header class="sticky-top bg-white border-bottom"> <!-- same nav content --> </header>
sticky-top uses position: sticky; top: 0; — works well for simple sticky header needs without JS. Be mindful of z-index and overlapping. Use z-index: 1020 or higher if necessary via a small custom style.
Variant B — two-column responsive content
<section class="bg-primary text-white py-5"> <div class="container"> <div class="row align-items-center"> <div class="col-12 col-lg-6"> <h1 class="display-6">Hero headline</h1> <p class="lead">Short description and CTA buttons.</p> <a class="btn btn-light me-2" href="#">Get started</a> </div> <div class="col-12 col-lg-6"> <img src="..." alt="illustration" class="img-fluid"> </div> </div> </div> </section>
Use col-12 to stack on small screens; col-lg-6 to split on large screens.
align-items-center vertically centers the hero content at large sizes.
Flexible footer patterns
Simple stacked footer — good for blogs.
Multi-column — use .row and .col inside footer for links and contact details.
Sticky footer (page bottom even when content short) — technique:
/* small CSS: make body a column flex container */ html, body { height: 100%; } body { display: flex; flex-direction: column; } main { flex: 1; }
Then header at top, main will expand, footer naturally sits at bottom. This ensures footer at bottom on short pages.
Accessibility
Header <nav aria-label="Main navigation"> with logical list items.
Visible focus state for links/buttons (don’t remove outline).
Use aria-expanded and aria-controls for collapsible menus (Bootstrap Navbar handles this).
Provide meaningful link text (avoid “click here”).
Use landmarks (<header>, <main>, <footer>, <nav>) — improves screen reader navigation.
exercises
Exercise A — Convert an existing site header:
Given a plain header (logo + links), re-create it with a responsive collapse using Bootstrap’s Navbar component so it becomes a hamburger on small screens. Ensure aria-* attributes present.
Exercise B — Sidebar -> Offcanvas:
Replace the sidebar from Example 1 with an off canvas that appears on small screens and is visible on medium+.
Exercise C — Sticky header with shadow:
Implement sticky-top and add a small CSS transition for box-shadow on scroll (use JS to toggle class when window.scrollY > 10).
build a landing page shell
Build a responsive landing page shell with a sticky header, features grid, responsive sidebar, and sticky footer. Test across three viewport sizes: 360×640 (mobile), 768×1024 (tablet), 1440×900 (desktop).
Files
index.html
styles.css (small custom CSS)
optional images inside img/
Steps
Boilerplate: create index.html with Bootstrap CDN (see starter).
Header:
Use <header class="sticky-top bg-white shadow-sm">
Use Bootstrap Navbar component: .navbar, .navbar-expand-lg, a toggler button, and accessible attributes. Put the brand left, nav right.
Hl:
.py-5 bg-light inside .container
Left column: title, description, CTA. Right column: illustrative image (img-fluid).
Features grid:
Use .container > .row > .col-12 col-sm-6 col-lg-4 three feature cards.
Use .h-100 on cards to equalize heights.
Sidebar:
On the desktop show a .col-md-4 with filter widgets.
On small screens, hide the sidebar and add a button that shows an Offcanvas (Bootstrap component).
Footer:
Use a multi-column layout using .row. Add small print and quick links.
Include contact and social links.
Responsive test:
In browser dev tools test the three viewports. Verify:
Navbar collapses at small widths.
stacks on mobile.
Feature cards stack properly.
Offcanvas opens on mobile for the sidebar.
Accessibility test:
Tab through header links and toggler; ensure focus visible.
Use a screen reader (or Chrome Accessibility tools) to confirm landmarks.
starter code snippet (navbar + offcanvas)
<nav class="navbar navbar-expand-lg navbar-light bg-white" aria-label="Main navigation"> <div class="container"> <a class="navbar-brand" href="#">Brand</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="mainNav"> <ul class="navbar-nav ms-auto mb-2 mb-lg-0"> <li class="nav-item"><a class="nav-link" href="#">Features</a></li> <li class="nav-item"><a class="nav-link" href="#">About</a></li> </ul> </div> <!-- offcanvas trigger (mobile only) --> <button class="btn btn-outline-secondary d-lg-none ms-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#sideCanvas" aria-controls="sideCanvas"> Filters </button> </div> </nav> <div class="offcanvas offcanvas-end" tabindex="-1" id="sideCanvas" aria-labelledby="sideCanvasLabel"> <div class="offcanvas-header"> <h5 id="sideCanvasLabel">Filters</h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body"> <!-- filter controls --> </div> </div>
Recreate the header using Bootstrap Navbar and make it keyboard accessible. Provide a short video or GIF showing keyboard navigation.
Create a two-column layout that collapses to a single column under md and justify text differently at each breakpoint.
Implement a sticky footer using the flex technique — demonstrate with a page that has small content and with long content.
Submit code with comments and explain why you chose .container vs .container-fluid in your design.
Research
Bootstrap docs: Grid system, Containers, Utilities, Navbar, Offcanvas — read the official docs for exact classes and behavior.
Performance: research critical CSS and above-the-fold styles — consider inlining minimal CSS for header & faster first paint.
Accessibility: WCAG quick reference for navigation and focus management.
Design patterns: read articles on mobile-first design and responsive patterns (patterns, sticky UI tradeoffs).
Advanced
Custom breakpoints & Sass
If you maintain a design system, customize Bootstrap’s Sass variables to set nonstandard breakpoints and container widths rather than fighting utility classes.
CSS variables & theming
Use CSS variables (:root { --brand: #123456; }) for theme colors; reference these in your custom CSS for runtime theming without rebuilding Sass.
Critical CSS & performance
Extract critical header/hero CSS to inline <style> for first paint. Defer nonessential CSS.
Server-rendered markup
If server renders nav, ensure aria-current set server-side to avoid flicker.
Progressive enhancement
Use HTML semantic markup first; let Bootstrap add enhancement. If JS fails, nav remains usable (e.g., collapse is progressive enhancement).
Testing
Visual regression tests for header/footer across breakpoints.
Lighthouse checks for performance and accessibility.
checklist
Navbar toggler keyboard accessible and labeled.
Landmarks (header, main, footer) present.
Images have alt.
Footer remains reachable on short pages.
No horizontal scroll at smallest breakpoint.
Lighthouse accessibility score acceptable (> 90 target).
utility classes used
Layout: .container, .container-fluid, .row, .col-, .d-flex, .flex-wrap
Alignment: .justify-content-between, .justify-content-center, .align-items-center
Spacing: .p-, .py-, .px-, .m-, .mb-, .ms-auto
Visibility: .d-none, .d-lg-block, .d-lg-none
Position: .sticky-top
Components: .navbar, .collapse, .offcanvas, .btn, .card
(Official docs for exact classes & behavior).
No comments:
Post a Comment