Student starter code (30% baseline)
index.html- Main HTML pagescript.js- JavaScript logicstyles.css- Styling and layoutpackage.json- Dependenciessetup.sh- Setup scriptREADME.md- Instructions (below)💡 Download the ZIP, extract it, and follow the instructions below to get started!
# Just open index.html in your browser
open index.html
# OR double-click index.html in your file explorer
No installation needed! Bootstrap loads from CDN. Pro Tip: Resize your browser window to see the responsive grid in action!
Location: index.html - After Example 2, inside the container
Success Criteria:
class="section-title"col-md-6 classbg-primary, bg-success, etc.)<768px)Hints:
col-md-4 to col-md-6 (since you only have 2 columns)demo-col class for consistent stylingExpected Result: Two equal-width columns side-by-side on desktop (>=768px), stacked vertically on mobile (<768px)
Location: index.html - After TODO 1 section
Success Criteria:
col-md-3 (25% width)col-md-9 (75% width)bg-dark)<ul> with <li> items)Hints:
bg-dark text-white for sidebar, bg-light text-dark for main contentstyle="text-align: left;" to override the centered demo-col styling<a href="#">Link Name</a> inside list itemsOther Unequal Combinations (for reference):
Expected Result: Narrow sidebar on left (25%), wide content area on right (75%)
Location: index.html - After TODO 2 section
Success Criteria:
col-12)col-md-4 each)col-md-8 + col-md-4)col-12)Layout Structure (Reference):
┌─────────────────────────────────────────┐
│ HEADER (col-12) │ Row 1
├─────────────┬─────────────┬─────────────┤
│ Card 1 │ Card 2 │ Card 3 │ Row 2
│ (col-md-4) │ (col-md-4) │ (col-md-4) │
├─────────────────────────────┬───────────┤
│ Main Content │ Widget │ Row 3
│ (col-md-8) │(col-md-4) │
├─────────────────────────────────────────┤
│ FOOTER (col-12) │ Row 4
└─────────────────────────────────────────┘
Hints:
<div class="row"> is a separate row in the dashboardcol-12 takes full width (12/12 = 100%)demo-col class for consistent padding and bordersbg-primary, bg-success, bg-warning, bg-danger, bg-info, bg-darkBootstrap Math Breakdown:
Expected Result: Professional dashboard layout with header, stat cards, content area, sidebar widget, and footer
col-md-3 x 4)col-md-4 each)offset-md-2)order-md-1)class="row" and columns add up to 12<meta name="viewport"> tag in <head>d-flex and align-items-stretch to rowh-100 on inner divs<div class="container"> or container-fluidcontainer = fixed width, container-fluid = full widthBootstrap divides each row into 12 equal columns. You combine these to create layouts:
12 columns = 100% width
6 columns = 50% width
4 columns = 33.33% width
3 columns = 25% width
2 columns = 16.67% width
1 column = 8.33% width
<div class="container"> <!-- Centers and adds padding -->
<div class="row"> <!-- Creates horizontal row -->
<div class="col-md-4"> <!-- Column (4/12 = 33.33%) -->
Content here
</div>
</div>
</div>
col- : Extra small (<576px) - Always horizontal
col-sm- : Small (≥576px) - Phones landscape
col-md- : Medium (≥768px) - Tablets
col-lg- : Large (≥992px) - Desktops
col-xl- : Extra large (≥1200px) - Large desktops
<!-- 4 columns on large, 6 on medium, 12 on small -->
<div class="col-lg-3 col-md-6 col-sm-12">
Content
</div>
Equal Columns:
- 2 columns: col-md-6 + col-md-6 = 12
- 3 columns: col-md-4 + col-md-4 + col-md-4 = 12
- 4 columns: col-md-3 + col-md-3 + col-md-3 + col-md-3 = 12
Unequal Columns:
- Sidebar: col-md-3 + col-md-9 = 12 (25% + 75%)
- Featured: col-md-8 + col-md-4 = 12 (66% + 33%)
- Thirds: col-md-4 + col-md-4 + col-md-4 = 12
Before submitting:
Total: 35-45 minutes
After completing this activity:
Activity 10: Bootstrap Grid System W1: Front-end Design & User Experience Telebort Engineering Time: 35-45 minutes