Web Computing Essentials — TNT 2026

The Whole Team

HTML gives structure. CSS gives style. JavaScript gives behavior. Bootstrap 5 makes it responsive, professional, and ready for any screen on earth. Mr. Fantastic has entered the building.

Meet the Team What Is Bootstrap?
4
TECHNOLOGIES
1
STACK
12
GRID COLUMNS
∞
PAGES
The 5-Phase Series: ① HTML only → ② + CSS → ③ + JavaScript → ④ + Bootstrap 5 → ⑤ Capstone ← you are here

The Roster

Click a Hero to Learn Their Power

Each hero is a web technology. Together they form the complete toolkit every web developer uses every single day.

The Thing - HTML

The Thing

HTML

The skeleton. The structure. Rock-solid and essential.

Invisible Girl - CSS

Invisible Girl

CSS

Controls what you see and what you don’t.

Human Torch - JavaScript
Human Torch
JavaScript

Blazing fast. Interactive. Brings everything to life.

Mr. Fantastic - Bootstrap 5
Mr. Fantastic
Bootstrap 5

Stretches to fit any screen. Flexible, responsive, brilliant.

H.E.R.B.I.E. - p5.js and Copilot
H.E.R.B.I.E.
p5.js & Copilot

Creative coding and AI amplified.

Mr. Fantastic

Why Reed Richards Is Bootstrap 5

Reed Richards can stretch his body to fit any situation. Bootstrap 5 stretches to fit any screen. Mobile phone, tablet, laptop, widescreen monitor — one page, zero extra work.

Bootstrap is a CSS framework: a massive external stylesheet (and JavaScript bundle) that gives you professional layout tools, pre-built components, and responsive behavior in exchange for learning its class name system.

The core is the 12-column grid. Every layout is built by dividing horizontal space into 12 equal units and assigning elements a number of those units at each screen breakpoint.

Wrap columns in a .row, wrap rows in a .container. Assign each column a width: col-md-6 = half-width on medium screens and above. Bootstrap is mobile-first — the smallest breakpoint is the default.

mt-3, p-4, fw-bold, text-center, d-flex — these single-purpose classes apply one CSS rule each. Before writing a CSS rule, ask: “Does Bootstrap already have a class for this?” Usually yes.

Navbars, cards, modals, accordions, toasts, tooltips — Bootstrap provides complete, styled, accessible components. Many behaviors require zero JavaScript: data-bs-toggle and data-bs-target wire them up automatically. The modal on this page is one example.

The Grid: Live Demo

Resize your browser. Watch the columns reflow at each breakpoint.

col-12 (full width)
col-6
col-6
col-4
col-4
col-4
col-sm-6
col-lg-3
col-sm-6
col-lg-3
col-sm-6
col-lg-3
col-sm-6
col-lg-3

4+4+4 = 12. 6+6 = 12. 3+3+3+3 = 12. Columns must always add up to 12 (or fewer).

Quick Facts — The Whole Team

Hero Technology Superpower Without them…
The Thing HTML Rock-solid structure No page exists at all
Invisible Girl CSS Controls what you see Phase 1: functional but ugly
Human Torch JavaScript Dynamic behavior Pages are static — no interaction
Mr. Fantastic Bootstrap 5 Responsive at any size Layouts break on mobile
H.E.R.B.I.E. p5.js + Copilot Creative coding + AI No animations, no AI assistance

[YOUR SECTION HEADING]

[STUDENT: Replace this with your own content using Bootstrap classes. Delete this placeholder before submitting!]