Lesson 6 — Implementing responsive design with Bootstrap in TYPO3

Prerequisites and goals

Prerequisites

Theoretical prerequisites

This lesson assumes that you already know the following:

  • Understand frontend development with Bootstrap
  • Learn template structure and organization
  • Master frontend component integration
  • Study responsive design principles

Practical prerequisites

Before you start this lesson, please have the following things ready:

  • Build complete Bootstrap-based frontend
  • Implement consistent design system
  • Create responsive page layouts
  • Test frontend across different devices

Goals

Theoretical goals

By the end of this lesson, you should know the following:

  • Understand Bootstrap's responsive grid system
  • Learn mobile-first design principles
  • Master responsive breakpoint configuration
  • Study responsive component behavior

Practical goals

By the end of this lesson, you should have completed the following:

  • Implement responsive layouts using Bootstrap grid
  • Configure breakpoints for different devices
  • Create mobile-friendly navigation systems
  • Test responsiveness across screen sizes

Learning resources

Teacher's instructions

Student's instructions