Module 6 : First Bootstrap Page – Hello, World!
1. What is Bootstrap? Bootstrap is a front‑end toolkit (CSS + JS) for building responsive, accessible UIs quickly. It provides a consistent design system of CSS classes and JavaScript widgets. Emphasize that Bootstrap is a set of styles and components — not a separate programming language.
When to use: prototypes, internal admin UIs, starting layout scaffolds; caution for production design-heavy projects where custom design is needed.
2. Including Bootstrap
Two main approaches:
CDN (fast and simple; excellent for learning / prototypes)
Local files / package manager (npm, yarn) (best for production; allows customization and offline work)
Show pros/cons and give exact <link> and <script> tags.
3. Page Scaffolding and Core Concepts
.container vs .container-fluid — difference and use cases.
The grid: .row and .col-*-* (basic idea: 12-column system) and breakpoints (sm, md, lg, xl, xxl). how columns stack on small screens.
Utilities: spacing (.mt-3, .p-2), text alignment (.text-center), display (.d-flex).
4. Coding: Hello, World!
Build the page.each line as you type.
Use devtools to inspect how Bootstrap rules apply and show Box Model overlays.
5. Styling Safely
Use a separate styles.css for overrides loaded after Bootstrap. Use utility classes when possible.
6. Wrap-up
Quick recap and show next steps (buttons, navbars, forms).
("Hello, World!")
Goal: Create a page that includes Bootstrap via CDN, uses a centered container, responsive heading, a short paragraph, a primary button, and a dismissible alert.
Files
index.html
css/styles.css (optional for small overrides)
index.html (full code)
<!doctype html>
</head>
<body>
<header class="bg-light py-3 mb-4">
<div class="container text-center">
<h1 class="display-5">Hello, World!</h1>
<p class="lead mb-0">Your first Bootstrap page</p>
</div>
</header>
<main class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-8">
<div class="alert alert-info alert-dismissible fade show" role="alert">
<strong>Welcome!</strong> This is a Bootstrap "Hello, World!" example.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<p class="mb-4">
Bootstrap helps you build responsive layouts quickly using a grid and ready-made components.
</p>
<a href="#" class="btn btn-primary">Get started</a>
</div>
</div>
</main>
<!-- Bootstrap JS bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.4.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Note: The CDN URLs above show a version. In production you should pin a specific version, and you may use the latest stable version — but always check the version number for compatibility when following examples.
<!doctype html> and meta viewport: essential for responsive behavior.
link href="...bootstrap.min.css" rel="stylesheet" — brings Bootstrap CSS into the page.
.container centers content with responsive horizontal padding.
.row creates a horizontal group for columns; gutters between columns.
.col-12 col-md-8 — full width on xs, 8 of 12 columns on md and larger. responsive stacking.
.alert + .alert-dismissible + .btn-close — built-in alert markup; .fade.show controls the animated visibility.
btn btn-primary — predesigned button styles.
bootstrap.bundle.min.js includes JavaScript behavior (eg. dismissible alerts, modals). If you don't include JS, components that require JavaScript will not function.
Exercises (graded & ungraded)
Exercise 1 — Inspect
Open the page in the browser devtools. Inspect the .container element and find the Bootstrap CSS rule that sets its max-width at the current breakpoint.
Purpose: trace styles back to their source and understand responsive breakpoints.
Exercise 2 — Modify the Grid
Duplicate the col-12 col-md-8 div and make two columns side-by-side on md and larger using col-12 col-md-6 for each. Add images (use placeholders) or text blocks.
Observe how they stack on small screens.
Deliverable: A screenshot or deployed HTML file showing the two-column layout behaving responsively.
Exercise 3 — Build a Small section
Create a section using .container-fluid with centered content, a background utility (bg-primary), and white text (text-white). Add a call-to-action button that uses btn-lg.
Scoring rubrics: responsiveness (50%), semantic markup & accessibility attributes (25%), visual presentation (25%).
Exercise 4 — Safe CSS Overrides
Add a css/styles.css file to change the primary button's border radius and the header background slightly. your CSS must be loaded after Bootstrap and using specific selectors can help avoid unintentional overrides.
Personal Welcome Page
Create a one-page personal welcome site that uses Bootstrap to show: header, short bio, two-column skills/experience section, and a contact button. Encourage to use utilities instead of heavy custom CSS. Provide optional stretch goals: add a navbar and make it sticky; include a responsive image gallery grid.
Assessment
(multiple choice / short answer):
What does .container do differently from .container-fluid?
Explain col-12 col-md-6 behavior across breakpoints.
Which Bootstrap file controls component styles vs utilities?
assignment: Submit index.html and css/styles.css with at least one responsive layout and component usage.
Tips
Page not responsive? Ensure <meta name="viewport" content="width=device-width, initial-scale=1"> is present.
Styles not applying? Confirm Bootstrap CSS link is correct and is loaded before your custom CSS (or after if you intentionally want to override).
JS components not working? Confirm the Bootstrap JS bundle is included and no console errors (like missing Popper) appear.
Gutters too wide/narrow? Use gx-* classes to control gutter widths in Bootstrap 5 (e.g., gx-2).
Accessibility (important)
Use semantic elements (header, main, nav) and ARIA attributes when needed.
Ensure color contrast for text on backgrounds (.text-white on bg-primary is usually fine but check with a contrast tool).
For interactive elements (buttons/links), ensure keyboard focus styles are visible and preserved.
Coding Counselor
Live-code slowly; narrate why each class is chosen, not just what it does.
Encourage experiment with breakpoints and open devtools frequently.
Use pair programming during one drives, the other inspects with devtools.
slower internet, demonstrate local Bootstrap files or provide a ZIP containing Bootstrap assets.
Research
Read the official Bootstrap docs for Grid and Layout to see the full list of breakpoint behaviors.
Research the reasoning behind the 12-column grid system and responsive design patterns.
Compare Bootstrap with other CSS frameworks (Tailwind, Bulma) to discuss design tradeoffs.
Resources and Examples
Official Bootstrap documentation (grid, utilities, components).
Example template galleries (to show how templates structure pages).
reference
CDN CSS: <link href="https://cdn.jsdelivr.net/npm/bootstrap@x.y.z/dist/css/bootstrap.min.css" rel="stylesheet">
CDN JS: <script src="https://cdn.jsdelivr.net/npm/bootstrap@x.y.z/dist/js/bootstrap.bundle.min.js"></script>
Grid: .row -> children .col-*-*
Spacing utilities: .m- (margi
No comments:
Post a Comment