LAB ACTIVITY 2C Duration: 3 Hours Bootstrap Grid & Responsive

Apply Bootstrap grid techniques to produce responsive web interfaces.

Students will transform a basic HTML profile into a responsive, professional portfolio using Bootstrap 5 (mobile-first). Focus utama: .container → .row → .col-*, typography, images, tables, cards, badges dan buttons.

Back to Topic Jump to Steps

Sample Output (View First)

Tengok output siap dulu supaya jelas target layout (desktop vs mobile).
View Completed Output Start Steps
Optional: Letak screenshot output siap dalam folder sample/ (contoh: sample/lab2c-output.png) untuk student rujuk visual.
Lab 2C Completed Output (Sample)

Important Notes

Read First
Reminder:
Ini lab Bootstrap Grid & Responsive. Fokus pada layout behaviour (breakpoints) dan hierarchy container → row → columns. Custom CSS hanya minor (untuk polish), bukan gantikan Bootstrap.
  • Bootstrap guna konsep mobile-first: mula dari skrin kecil, kemudian enhance untuk skrin besar.
  • Kalau layout “tak jadi”: semak CDN link, semak class row/col, semak nesting.
  • Testing wajib guna Chrome DevTools (F12) → responsive view.

Learning Outcomes (CLO)

By the end of this lab session, students should be able to:

  • Integrate Bootstrap 5 via CDN (CSS & JS Bundle) correctly.
  • Build responsive layout using .container, .row, .col-* hierarchy.
  • Construct content using Bootstrap Typography, Images and Tables.
  • Implement components: Cards, Badges and Buttons.
  • Demonstrate breakpoint behaviour by testing on different screen sizes.

Hardware / Software

  • Text Editor: Visual Studio Code / Notepad++
  • Browser: Chrome / Edge / Firefox (DevTools required)
  • Framework: Bootstrap 5.3.x (CDN)

Steps (Complete Step-by-Step)

Buat ikut turutan. Setiap step ada Hint button (reference only).
Step 1

Create Project Folder

Create folder named:

RegNo_LAB2C
Example: 10DDT24F1001_LAB2C
What to do: Folder dulu, baru files.
Step 2

Create Files + Assets

  1. Create index.html
  2. Create folder assets/
  3. Put image inside: assets/profile.jpg (any suitable profile image)
Checkpoint: Extension mesti betul (bukan .txt) dan image path betul.
Step 3

Bootstrap CDN (CSS + JS Bundle)

Task: In index.html, add Bootstrap CSS CDN inside <head>, then add Bootstrap JS Bundle before </body>.
Checkpoint: Bila Bootstrap ok, class macam container, btn, badge nampak styling.
Step 4

Add Minor Custom CSS (Polish Only)

Task: Add <style> in <head> untuk:
  • background body lembut
  • fixed profile image size (180×180) + object-fit: cover
  • section padding (optional)
Rule: Custom CSS jangan overload—Bootstrap sepatutnya buat major styling.
Step 5

Responsive Container Wrapper

Task: Wrap all content inside:
container bg-white shadow-sm my-5 p-4 rounded
Checkpoint: Page nampak macam “card besar” tengah page, kemas dan ada shadow.
Step 6

Header (Typography + Image + Navigation)

Task: Create header section:
  • Nama: display-5 fw-bold text-primary
  • Profile image: img-fluid rounded-circle border + custom class profile-img
  • Nav menu: nav justify-content-center with nav-link
Checkpoint: Header centre, nav kemas, gambar bulat dan responsive.
Step 7

Grid System: row + responsive columns

Task: Create:
  • <div class="row mt-4">
  • Left/Main: col-lg-8 col-md-7
  • Right/Sidebar: col-lg-4 col-md-5
Checkpoint: Desktop → 2 columns side-by-side, mobile → stack (main dulu, sidebar bawah).
Step 8

Main Column Content: About + Badge

Task: In main column, create section #about:
  • Heading style: h3 border-start border-4 border-primary ps-3
  • About paragraph: use .lead
  • Programme badge: <span class="badge bg-info text-dark">
Checkpoint: Ada badge kecil yang menonjol (Diploma in IT) dalam ayat About.
Step 9

Education Table (Responsive)

Task: Create section #education:
  • Wrap table with <div class="table-responsive">
  • Table classes: table table-hover table-striped
  • Use thead class: table-primary
Checkpoint: Mobile view table boleh scroll sideways tanpa pecah layout.
Step 10

Sidebar: Cards (Skills + Goals)

Task: In sidebar, create 2 cards:
  • Card 1: Technical Skills (use card-header bg-dark text-white)
  • Card 2: Career Goals (same style)
  • Skills boleh guna list-group list-group-flush
Checkpoint: Sidebar nampak structured, tiap block ada header gelap.
Step 11

Footer + Contact Buttons

Task: Create footer section #contact:
  • Left: email (link without underline)
  • Right: buttons → GitHub: btn btn-outline-dark btn-sm, LinkedIn: btn btn-outline-primary btn-sm
  • Add bottom copyright bar: bg-light p-3 mt-4 rounded
Checkpoint: Desktop footer 2 kolum, mobile auto stack (Bootstrap default).
Step 12

Verification (Breakpoint Testing + Evidence)

Do these checks + screenshots:
  • Desktop: layout 2 columns side-by-side (row + col working)
  • Mobile (<768px): columns stack (main top, sidebar below)
  • Screenshot code snippet showing row and col-lg-8 col-md-7 etc.
  • Screenshot table responsive + cards visible
Final Step

Submission

  • Ensure Bootstrap CDN included (CSS + JS Bundle).
  • Ensure responsive grid behaviour works (desktop vs mobile).
  • Ensure screenshots complete.
  • Zip your folder RegNo_LAB2C.
Upload the .zip file to CIDOS (submit to your respective lecturer).
Submit before the deadline set by your lecturer.