HTML & CSS Bootstrap Layout Exercise

This is a student exercise for practicing Bootstrap 5 responsive grid layouts. The goal was to reproduce a multi-column layout that adapts to different screen sizes using Bootstrap's grid system and utility classes.

The exercise also includes a bonus part to practice centralization of both text color and column layout.

🌐 Check it out!

Features Implemented

1. Responsive Grid Layout

   • Used Bootstrap 5 row and col classes to create different layouts for small (sm), medium (md), and large (lg) devices.
   • Three main layout areas, each with a different column structure:
     • First area: 2 columns, width adjusts per screen size.
     • Second area: 3 columns, width adjusts per screen size.
     • Third area: 4 columns, width adjusts per screen size.

2. Text & Column Centralization (Bonus)

   • Centralized headings and texts using text-center.
   • Centered columns for specific rows using Bootstrap's row-cols-* classes.

3. Styling & Colors

   • Applied different background colors to distinguish columns.
   • Used text-white or text-dark to ensure readable text on colored backgrounds.

Technologies Used

• HTML5
• CSS3
• Bootstrap 5 (via CDN)