IN-CLASS PRACTICAL – BOOTSTRAP GRID Duration: 45–60 Minutes Beginner Friendly

Construct Bootstrap Grid System & Responsive Layout

Students will build and observe responsive grid behaviours step-by-step: container → row/col → fixed widths → nested grid → breakpoints → offset/order → wrapping & gutters.

Back to Topic Start Practical

Class Flow

Complete one task → save → refresh → verify output using responsive view.
1) Setup 2) Grid Basics 3) Responsive Control 4) Advanced Grid

Outcomes

Target
  • Explain container, row, col
  • Build equal/unequal columns and nested grid
  • Apply breakpoints, offset, order, wrapping, gutters
  • Predict behaviour across screen sizes

Setup

Tools
  • VS Code / Notepad++
  • Chrome (Responsive view)
  • Bootstrap already loaded via header-lab.php

Testing Method

Must
  • Open DevTools → Toggle device toolbar
  • Test 3 sizes: mobile / tablet / desktop
  • Take screenshots for selected tasks

IN-CLASS PRACTICAL – BOOTSTRAP GRID

From Core Grid → Responsive → Advanced Control

Follow tasks in order. Save and refresh after each task.
Pair / Small Group Allowed
Task 1 Setup

Create Folder & File

Goal: Prepare a clean workspace.

Student steps:
  1. Create a folder: RegNo_BootstrapGrid
  2. Create a file inside: index.html
  3. Open the folder in VS Code
Example folder name:
10DDT23F1705_BootstrapGrid
Task 2 Setup

Create Basic HTML Skeleton

Goal: Valid HTML page (Bootstrap will be tested later).

Student steps:
  1. Open index.html
  2. Type ! then press Tab
  3. Set the title to Bootstrap Grid Practical
  4. Save file
Expected HTML skeleton 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Grid Practical</title>
</head>
<body>

</body>
</html>
Task 3 Baseline

Baseline Content (Plain Blocks)

Goal: See default stacking behaviour before using grid classes.

Student steps:
  1. Inside <body>, paste the blocks below
  2. Save → refresh in browser
  3. Confirm: everything stacks vertically
Paste inside <body> 
<h1>Grid Practical</h1>

<div>Block A</div>
<div>Block B</div>
<div>Block C</div>
✅ Expected observation:
  • Each block is full-width
  • Everything stacks vertically
Task 4 Grid Basics

Wrap Content with Container

Goal: Understand how .container controls page width and
horizontal padding.
Update body content 
<div class="container">
  <h1>Grid Practical</h1>

  <div>Block A</div>
  <div>Block B</div>
  <div>Block C</div>
</div>
Task 5 Grid Basics

Create Row + Auto Columns

Goal: Activate the grid using .row and .col.
Student steps:
  1. Inside the container, replace Block A/B/C with a <div class="row">.
  2. Add three columns using: col, col, col.
  3. Save the file and refresh the browser.
  4. Confirm: all three columns appear side-by-side with equal width.
Grid activation 
<div class="container">
  <h1>Grid Practical</h1>

  <div class="row">
    <div class="col">Column A</div>
    <div class="col">Column B</div>
    <div class="col">Column C</div>
  </div>
</div>
✅ Expected observation:
  • Three equal-width columns appear in one row.
  • Without .col, the grid will not activate.
Task 6 Three Equal Columns

Build 3 Equal Columns (Desktop/Tablets)

Goal: Make 3 equal columns using a 12-column grid concept.
Student steps:
  1. Inside the container, create a new row
  2. Add 3 columns using: col-md-4 each
  3. Save → refresh
  4. Test responsive view: mobile should stack, md+ should align
Task 6 code 
<div class="row mt-3">
  <div class="col-md-4">col-md-4</div>
  <div class="col-md-4">col-md-4</div>
  <div class="col-md-4">col-md-4</div>
</div>
Task 7 Three Unequal Columns

Build 3 Unequal Columns (3–6–3)

Goal: Observe width differences clearly.
Student steps:
  1. Create a new row under Task 6
  2. Use: col-md-3, col-md-6, col-md-3
  3. Save → refresh
  4. Verify: centre is wider than left and right
Task 7 code 
<div class="row mt-3">
  <div class="col-md-3">col-md-3</div>
  <div class="col-md-6">col-md-6</div>
  <div class="col-md-3">col-md-3</div>
</div>
Task 8 Two Unequal Columns

Build Two Columns (4–8)

Goal: Typical sidebar + content layout.
Student steps:
  1. Create a new row under Task 7
  2. Use: col-md-4 and col-md-8
  3. Save → refresh
  4. Verify: one narrow column + one wide column
Task 8 code 
<div class="row mt-3">
  <div class="col-md-4">Sidebar (col-md-4)</div>
  <div class="col-md-8">Main Content (col-md-8)</div>
</div>
Task 9 Nested Grid

Two Columns + Nested Two Columns

Goal: Build grid inside a column (nesting).
Student steps:
  1. Create a new row with 2 columns: col-md-8 and col-md-4
  2. Inside the col-md-8, add another row
  3. Add 2 nested columns: col-6 and col-6
  4. Save → refresh and verify nesting works
Task 9 code 
<div class="row mt-3">
  <div class="col-md-8">
    Parent col-md-8
    <div class="row mt-2">
      <div class="col-6">Nested col-6</div>
      <div class="col-6">Nested col-6</div>
    </div>
  </div>

  <div class="col-md-4">col-md-4</div>
</div>
Task 10 Responsive Breakpoints

Mobile Stack → Desktop Columns

Goal: Use col-12 + col-md-* for responsive behaviour.
Student steps:
  1. Create a new row
  2. Use: col-12 col-md-8 and col-12 col-md-4
  3. Save → refresh
  4. Test: mobile stacks, desktop becomes 2 columns
Task 10 code 
<div class="row mt-3">
  <div class="col-12 col-md-8">Main Content</div>
  <div class="col-12 col-md-4">Sidebar</div>
</div>
Task 11 Offset

Offset Column (Move to the Right)

Goal: Create space before a column using offset-*.
Student steps:
  1. Create a new row
  2. Add one column: col-md-4 offset-md-4
  3. Save → refresh
  4. Verify: the column appears centred-ish (pushed right)
Task 11 code 
<div class="row mt-3">
  <div class="col-md-4 offset-md-4">Centered Column</div>
</div>
Task 12 Order

Change Visual Order (Without Changing HTML)

Goal: Use order-* to rearrange columns.
Student steps:
  1. Create a new row with 3 columns
  2. Apply order-* as shown
  3. Save → refresh
  4. Verify: visual order is different from HTML order
Task 12 code 
<div class="row mt-3">
  <div class="col order-2">First (HTML 1)</div>
  <div class="col order-3">Second (HTML 2)</div>
  <div class="col order-1">Third (HTML 3)</div>
</div>
Task 13 Wrapping Rule

Columns Wrap When Total > 12

Goal: Observe automatic wrapping.
Student steps:
  1. Create a new row
  2. Add col-9 + col-4 (total 13)
  3. Save → refresh
  4. Verify: wrapping occurs (second column drops)
Task 13 code 
<div class="row mt-3">
  <div class="col-9">col-9</div>
  <div class="col-4">col-4 (wrap)</div>
</div>
Task 14 Gutters

No Gutters (Bootstrap Only)

Goal: Remove spacing between columns using g-0.
Student steps:
  1. Create a new row and add g-0
  2. Add 3 columns (any sizes)
  3. Save → refresh
  4. Verify: columns touch each other (no gaps)
Task 14 code 
<div class="row g-0 mt-3">
  <div class="col-md-3">A</div>
  <div class="col-md-6">B</div>
  <div class="col-md-3">C</div>
</div>
Task 15 Submission

Final Checkpoint + Submission

Goal: Verify all behaviours and prepare evidence.
Student steps:
  1. Open responsive view (mobile, tablet, desktop)
  2. Verify Task 6–14 outputs behave correctly
  3. Take screenshots:
    • Task 6 (desktop)
    • Task 10 (mobile)
    • Task 9 (nested grid)
    • Task 12 (order changed)
  4. Submit: HTML file + screenshots
Teacher marking tip:
You can grade quickly by checking only Task 6, 9, 10, 12, and 14 outputs.
↑ Back to Top