Übungsaufgaben zu den Bootstrap-Grundlagen: Grid, Utility-Klassen, Cards und Formulare für Mitfahrgesuche

Übungsaufgaben zu den Bootstrap-Grundlagen: Grid, Utility-Klassen, Cards und Formulare für Mitfahrgesuche

https://bildung.social/@oerinformatik/

https://oer-informatik.de/bootstrap-grundlagen-uebungsaufgaben

Bootstrap, Grid-System, Breakpoints, Utility-Klassen, Card, Badge, Formularvalidierung, Barrierefreiheit, Übungsaufgaben, Prüfungsvorbereitung

tl/dr; (ca. 45 min Lese- und Bearbeitungszeit): Übungen zu den Bootstrap-Grundlagen rund um die Mitfahrgesuche des Mitfahrlabors: Du ordnest Bootstrap-Klassen ihrer Aufgabe zu, liest aus Grid-Klassen ab, wie viele Karten nebeneinander stehen, baust ein Layout nach Skizze, stellst Gesuche als Cards dar, ergänzt ein Formular um Validierungszustände und findest die Mängel einer fehlerhaften Bootstrap-Seite [AI-Assisted]. (Zuletzt geändert am 11.11.2026)

Dieser Artikel ist Teil einer Artikelreihe über die Grundlagen der Webentwicklung: HTML / CSS / Bootstrap / Übungsaufgaben zu Bootstrap

Diese Übungsaufgaben gehören zum Artikel Bootstrap-Grundlagen: Webseiten mit Grid, Utility-Klassen und Komponenten gestalten. Alle Aufgaben drehen sich um die Mitfahr-App „Mitfahrlabor“: Neben den Fahrtangeboten zeigt der Flurmonitor künftig auch Mitfahrgesuche, also Wünsche von Auszubildenden ohne Auto, die in einem bestimmten Zeitfenster an einem Haltepunkt abgeholt werden möchten. Die Seite gesuche.html aus den CSS-Übungen wird dafür auf Bootstrap 5.3 umgestellt.

Hinweise zur Bearbeitung: Bis zur Teil-1-Prüfung der IT-Berufe solltest Du die Basiskompetenz beherrschen, also Aufgabe 1.1 und Aufgabe 1.2. Als FIA, FIDP oder FIDV musst Du zur Teil-2-Prüfung Aufgaben auf Kernkompetenz-Ebene lösen können, das sind Aufgabe 2.1, Aufgabe 2.2 und Aufgabe 2.3. Von FIA wird zusätzlich erwartet, dass ihnen Aufgaben auf Profilkompetenz-Ebene (Aufgabe 3.1) keine Probleme bereiten. Notiere Deine Antworten zuerst vollständig, bevor Du die Beispiellösung aufklappst. In allen Aufgaben ist Bootstrap 5.3 im head eingebunden, sofern nicht anders angegeben. HTML-Code kannst Du im Browser, mit den Entwicklerwerkzeugen (F12) und mit dem Nu Html Checker ausprobieren; die Geräteansicht der Entwicklerwerkzeuge stellt beliebige Fensterbreiten ein. Andere fachlich richtige Lösungen sind ebenso richtig.

Du möchtest eigene Aufgaben zum Üben von einem KI-Sprachmodell generieren lassen? Prompt ein-/ausblenden

Erstelle neue Übungsaufgaben zum Thema „Bootstrap-Grundlagen: Grid,
Utility-Klassen, Cards und Formulare für Mitfahrgesuche“.

Bauplan: Halte Dich an Aufbau, Kompetenzstufen, Operatoren,
Anforderungsbereiche, Punkte und Zeitschätzung, die im Artikel
https://oer-informatik.de/aufgaben-aufbau beschrieben sind.

Fachliche Grundlage:
- https://oer-informatik.de/bootstrap-grundlagen
- https://oer-informatik.de/szenario-mitfahrlabor
- Stilbeispiel: https://oer-informatik.de/bootstrap-grundlagen-uebungsaufgaben

Die Aufgaben sollen Inhalte zu diesen Schlagwörtern abdecken:
- Bootstrap
- Grid-System
- Breakpoints
- Utility-Klassen
- Card
- Badge
- Formularvalidierung
- Barrierefreiheit

Kompetenzstufe: Kernkompetenz (alternativ: Basiskompetenz, Profilkompetenz, Expertise)
Anzahl: 1 Aufgabe mit Teilaufgaben
Bearbeitungszeit in Minuten ca.: <5 bis 30 min>
Szenario: eines der Szenarien aus dem Bauplan

Vorgehen:
1. Lies zuerst die verlinkten Artikel. Kannst Du keine Webseiten
   abrufen, sag mir das, statt zu raten.
2. Steht bei einer Angabe noch ein Platzhalter in <…>, frag mich
   zuerst danach. Richte Punkte und Zahl der Teilaufgaben nach der
   Bearbeitungszeit (ca. 0,9 min je Punkt).
3. Gib je Aufgabe Titel mit Kompetenzstufe, Ausgangssituation und
   Teilaufgaben mit Operator und Punktzahl aus, dazu die geschätzte
   Bearbeitungszeit.
4. Gib die Beispiellösungen mit Punkteverteilung erst aus, wenn ich
   danach frage.

Aufgabe 1.1: Bootstrap-Klassen zuordnen (Basiskompetenz)

Im HTML der neuen Gesuche-Seite kommen diese Klassen vor. Gib für jede Klasse an, ob sie zum Grid, zu den Utility-Klassen oder zu einer Komponente gehört, und beschreibe ihre Wirkung in wenigen Worten. (8 Punkte)

Aufgabe 1.2: Breakpoints lesen (Basiskompetenz)

Auf der Gesuche-Seite steht jedes Gesuch in einem eigenen Element. Alle acht Elemente stecken in derselben Zeile:

<main class="container-fluid">
  <p class="d-none d-md-block">Tipp: Gesuche mit gelbem Etikett beginnen in weniger als einer Stunde.</p>
  <div class="row g-3">
    <div class="col-12 col-sm-6 col-lg-4 col-xxl-3">…Gesuch 1…</div>
    <div class="col-12 col-sm-6 col-lg-4 col-xxl-3">…Gesuch 2…</div>
    <!-- … insgesamt acht gleich aufgebaute Elemente … -->
  </div>
</main>

1. Ergänze die Tabelle: Wie viele Gesuche stehen bei der jeweiligen Fensterbreite nebeneinander? (5 Punkte)

2. Gib an, ab welcher Fensterbreite der Tipp über der Liste zu sehen ist. (1 Punkt)

3. Eine Mitschülerin meint, col-12 könne in jedem Element entfallen, ohne dass sich etwas ändert. Beurteile ihre Aussage und begründe mit dem Prinzip, nach dem Bootstrap seine Breakpoints anwendet. (2 Punkte)

Aufgabe 2.1: Ein Layout nach Skizze bauen (Kernkompetenz)

Für die Gesuche-Seite hat das Team auf dem Whiteboard dieses Layout skizziert:

ab 992 px (lg)                                 unter 992 px
+-----------+-------------------------------+  +-------------------------+
| Filter    | Offene Gesuche  [Gesuch aufg.]|  | Filter                  |
|           +---------------+---------------+  +-------------------------+
| (3 von 12)| Zur Schule    | Nach Hause    |  | Offene Gesuche [Gesuch.]|
|           | (Hälfte)      | (Hälfte)      |  +-------------------------+
|           |               |               |  | Zur Schule              |
+-----------+---------------+---------------+  +-------------------------+
                                               | Nach Hause              |
                                               +-------------------------+

Die beiden Bereiche „Zur Schule“ und „Nach Hause“ sollen schon ab 768 px (md) nebeneinander stehen, also auch dann, wenn der Filter noch über der Liste steht. Die Überschrift „Offene Gesuche“ steht links, der Knopf „Gesuch aufgeben“ (ein Link auf gesuch-aufgeben.html) rechts in derselben Zeile, senkrecht mittig ausgerichtet.

Schreibe das HTML für das main-Element mit den nötigen Bootstrap-Klassen. Inhalte der Bereiche darfst Du durch einen kurzen Platzhaltertext ersetzen. Eigenes CSS ist nicht erlaubt. (7 Punkte)

<main class="container-fluid py-3">
  <div class="row g-4">
    <aside class="col-12 col-lg-3">
      <h2>Filter</h2>
      <p>Haltepunkt, Richtung, Tag</p>
    </aside>
    <section class="col-12 col-lg-9" aria-labelledby="titel-gesuche">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <h1 id="titel-gesuche" class="h2 mb-0">Offene Gesuche</h1>
        <a class="btn btn-primary" href="gesuch-aufgeben.html">Gesuch aufgeben</a>
      </div>
      <div class="row g-3">
        <div class="col-12 col-md-6">
          <h2 class="h4">Zur Schule</h2>
          <p>Gesuche zur Schule</p>
        </div>
        <div class="col-12 col-md-6">
          <h2 class="h4">Nach Hause</h2>
          <p>Gesuche nach Hause</p>
        </div>
      </div>
    </section>
  </div>
</main>

Aufgabe 2.2: Mitfahrgesuche als Cards darstellen (Kernkompetenz)

Aus den CSS-Übungen gibt es schon eine Liste der offenen Gesuche. Ein Gesuch, dessen Zeitfenster in weniger als einer Stunde beginnt, trägt die Klasse bald. Der Ausschnitt mit den ersten beiden Gesuchen:

<section id="gesuche">
  <h2>Gesucht am <time datetime="2026-11-16">Montag, 16. November</time></h2>
  <ul class="gesuche">
    <li class="gesuch bald">
      <p class="ort">Gütersloh</p>
      <p>Hauptbahnhof, ZOB Steig 3</p>
      <p>zur Schule, <time datetime="06:30">06:30</time> bis <time datetime="07:00">07:00</time> Uhr</p>
    </li>
    <li class="gesuch">
      <p class="ort">Werther (Westf.)</p>
      <p>Kirchplatz</p>
      <p>zur Schule, <time datetime="06:45">06:45</time> bis <time datetime="07:15">07:15</time> Uhr</p>
    </li>
    <!-- es folgen Halle (Westf.), Marktplatz, nach Hause, 15:15 bis 16:00 Uhr
         und Bad Salzuflen, Busbahnhof, nach Hause, 16:00 bis 16:45 Uhr -->
  </ul>
</section>

Stelle die Gesuche ohne eigenes CSS als Bootstrap-Cards dar. Anforderungen:

• auf Smartphones eine Karte je Zeile, ab 768 px zwei, ab 1200 px vier Karten nebeneinander, Karten einer Zeile gleich hoch,

• die Liste bleibt eine Liste (ul/li), aber ohne Aufzählungszeichen,

• Kopfzeile der Karte mit der Richtung, Kartentitel mit dem Ort, darunter Treffpunkt und Zeitfenster,

• Gesuche, die bald beginnen, sind auch ohne Farbwahrnehmung zu erkennen.

1. Schreibe das HTML für die Liste mit den ersten beiden Gesuchen. (6 Punkte)

2. Begründe, warum Du für die Kennzeichnung „bald“ nicht allein eine Rahmenfarbe wie border-warning verwenden darfst. (2 Punkte)

<section id="gesuche">
  <h2 class="mb-3">Gesucht am <time datetime="2026-11-16">Montag, 16. November</time></h2>
  <ul class="gesuche list-unstyled row row-cols-1 row-cols-md-2 row-cols-xl-4 g-3">
    <li class="col">
      <article class="card h-100 border-warning border-2">
        <div class="card-header d-flex justify-content-between align-items-center">
          zur Schule <span class="badge text-bg-warning">bald</span>
        </div>
        <div class="card-body">
          <h3 class="card-title h5">Gütersloh</h3>
          <p class="card-text mb-1">Hauptbahnhof, ZOB Steig 3</p>
          <p class="card-text"><time datetime="06:30">06:30</time> bis <time datetime="07:00">07:00</time> Uhr</p>
        </div>
      </article>
    </li>
    <li class="col">
      <article class="card h-100">
        <div class="card-header">zur Schule</div>
        <div class="card-body">
          <h3 class="card-title h5">Werther (Westf.)</h3>
          <p class="card-text mb-1">Kirchplatz</p>
          <p class="card-text"><time datetime="06:45">06:45</time> bis <time datetime="07:15">07:15</time> Uhr</p>
        </div>
      </article>
    </li>
  </ul>
</section>

Aufgabe 2.3: Ein Formular mit Validierungszuständen (Kernkompetenz)

Auf der Seite gesuch-aufgeben.html geben Auszubildende ein neues Gesuch auf. Das Formular ist bisher reines HTML:

<form action="/gesuche/neu" method="post">
  <label for="haltepunkt">Haltepunkt</label>
  <select id="haltepunkt" name="haltepunkt" required>
    <option value="" selected>bitte wählen</option>
    <option value="1">Gütersloh, Hauptbahnhof, ZOB Steig 3</option>
    <option value="5">Werther (Westf.), Kirchplatz</option>
    <option value="3">Halle (Westf.), Marktplatz</option>
  </select>
  <fieldset>
    <legend>Richtung</legend>
    <input type="radio" id="zur-schule" name="richtung" value="zur-schule" required>
    <label for="zur-schule">zur Schule</label>
    <input type="radio" id="nach-hause" name="richtung" value="nach-hause" required>
    <label for="nach-hause">nach Hause</label>
  </fieldset>
  <label for="von">frühestens</label>
  <input type="time" id="von" name="von" required>
  <label for="bis">spätestens</label>
  <input type="time" id="bis" name="bis" required>
  <button type="submit">Gesuch speichern</button>
</form>

Das Skript js/formular.js aus dem Lehrartikel ist am Ende der Seite eingebunden. Es setzt beim Absenden die Klasse was-validated an jedes Formular mit der Klasse needs-validation.

1. Gestalte das Formular mit Bootstrap: Beschriftungen und Felder untereinander mit Abstand, die Optionsfelder als form-check, „frühestens“ und „spätestens“ nebeneinander je in einer halben Zeile, ein Knopf in der Hauptfarbe. Schreibe das vollständige HTML. (4 Punkte)

2. Ergänze Fehlermeldungen für Haltepunkt, Richtung und die beiden Uhrzeiten so, dass sie nach einem Absenden mit leeren Feldern erscheinen und ein Screenreader sie zusammen mit dem jeweiligen Feld vorliest. Ergänze außerdem, was nötig ist, damit statt der Meldungen des Browsers die Bootstrap-Darstellung erscheint. (4 Punkte)

3. Der Server stellt beim Speichern fest, dass „spätestens“ (06:15) vor „frühestens“ (06:30) liegt, und zeigt das Formular erneut an. Gib das HTML für das Feld „spätestens“ in dieser Antwort an und erkläre, warum der Server dafür nicht was-validated verwenden kann. (2 Punkte)

<form class="needs-validation" action="/gesuche/neu" method="post" novalidate>
  <div class="mb-3">
    <label for="haltepunkt" class="form-label">Haltepunkt</label>
    <select class="form-select" id="haltepunkt" name="haltepunkt" required aria-describedby="haltepunkt-fehler">
      <option value="" selected>bitte wählen</option>
      <option value="1">Gütersloh, Hauptbahnhof, ZOB Steig 3</option>
      <option value="5">Werther (Westf.), Kirchplatz</option>
      <option value="3">Halle (Westf.), Marktplatz</option>
    </select>
    <div id="haltepunkt-fehler" class="invalid-feedback">Bitte wähle einen Haltepunkt.</div>
  </div>
  <fieldset class="mb-3">
    <legend class="form-label fs-6">Richtung</legend>
    <div class="form-check">
      <input class="form-check-input" type="radio" id="zur-schule" name="richtung" value="zur-schule" required aria-describedby="richtung-fehler">
      <label class="form-check-label" for="zur-schule">zur Schule</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" id="nach-hause" name="richtung" value="nach-hause" required aria-describedby="richtung-fehler">
      <label class="form-check-label" for="nach-hause">nach Hause</label>
      <div id="richtung-fehler" class="invalid-feedback">Bitte wähle eine Richtung.</div>
    </div>
  </fieldset>
  <div class="row g-3 mb-3">
    <div class="col-6">
      <label for="von" class="form-label">frühestens</label>
      <input type="time" class="form-control" id="von" name="von" required aria-describedby="von-fehler">
      <div id="von-fehler" class="invalid-feedback">Bitte gib eine Uhrzeit ein.</div>
    </div>
    <div class="col-6">
      <label for="bis" class="form-label">spätestens</label>
      <input type="time" class="form-control" id="bis" name="bis" required aria-describedby="bis-fehler">
      <div id="bis-fehler" class="invalid-feedback">Bitte gib eine Uhrzeit ein.</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Gesuch speichern</button>
</form>

<input type="time" class="form-control is-invalid" id="bis" name="bis" value="06:15" required aria-describedby="bis-fehler">
<div id="bis-fehler" class="invalid-feedback">Das Ende muss nach dem Beginn liegen.</div>

Aufgabe 3.1: Mängel einer Bootstrap-Seite finden (Profilkompetenz)

Ein Teammitglied hat eine erste Fassung der Gesuche-Seite gebaut. Der Code ist absichtlich fehlerhaft:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mitfahrlabor – Mitfahrgesuche</title>
  <link rel="stylesheet" href="css/gesuche.css">
  <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
        integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
        crossorigin="anonymous">
</head>
<body>
  <header class="bg-primary text-white p-3">
    <h1>Mitfahrgesuche</h1>
  </header>
  <main class="container py-3">
    <form class="mb-3" action="/gesuche" method="get">
      <input type="search" class="form-control" name="ort" placeholder="Ort suchen">
    </form>
    <div class="col-md-6">
      <article class="card">
        <div class="card-body border border-danger">
          <h2 class="card-title h5">Gütersloh</h2>
          <p class="card-text">zur Schule, 06:30 bis 07:00 Uhr</p>
        </div>
      </article>
    </div>
    <div class="col-md-6">
      <article class="card">
        <div class="card-body">
          <h2 class="card-title h5">Werther (Westf.)</h2>
          <p class="card-text">zur Schule, 06:45 bis 07:15 Uhr</p>
        </div>
      </article>
    </div>
    <p class="mt-3"><a class="btn btn-primary" href="gesuch-aufgeben.html">Gesuch aufgeben</a></p>
  </main>
</body>
</html>

Die Datei css/gesuche.css enthält:

:root {
  --bs-primary: #1d4f91;
  --bs-primary-rgb: 29, 79, 145;
}

.btn-primary {
  --bs-btn-bg: #1d4f91;
  --bs-btn-border-color: #1d4f91;
}

Beim Testen auf einem Monitor mit 1200 px Breite fallen diese Symptome auf:

1. Kopfbereich und Knopf erscheinen im hellen Standard-Blau von Bootstrap statt im Blau des Mitfahrlabors.

2. Die beiden Gesuche sind nur halb so breit wie der Inhaltsbereich, stehen aber untereinander statt nebeneinander.

3. Ein Screenreader kündigt das Suchfeld nur als „Suchfeld“ an, ohne zu sagen, was gesucht wird; nach dem ersten Tastendruck ist auch der graue Text im Feld verschwunden.

4. Eine Testerin mit Rot-Grün-Sehschwäche fragt, warum das erste Gesuch hervorgehoben sein soll. Sie sieht keinen Unterschied zum zweiten.

1. Ermittle zu jedem Symptom die Ursache im Code und erkläre, wie sie das Symptom auslöst. (6 Punkte)

2. Gib die korrigierten Stellen des HTML-Codes an. (4 Punkte)

3. Beschreibe, wie Du Symptom 1 mit den Entwicklerwerkzeugen des Browsers hättest eingrenzen können. (1 Punkt)

<head>
  ...
  <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
        integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
        crossorigin="anonymous">
  <link rel="stylesheet" href="css/gesuche.css">
</head>
...
<form class="mb-3" action="/gesuche" method="get">
  <label for="ort" class="form-label">Gesuche nach Ort filtern</label>
  <input type="search" class="form-control" id="ort" name="ort" placeholder="z. B. Herford">
</form>
<div class="row g-3">
  <div class="col-md-6">
    <article class="card h-100 border-warning border-2">
      <div class="card-body">
        <h2 class="card-title h5">Gütersloh <span class="badge text-bg-warning">bald</span></h2>
        <p class="card-text">zur Schule, 06:30 bis 07:00 Uhr</p>
      </div>
    </article>
  </div>
  <div class="col-md-6">
    ...
  </div>
</div>

Links und weitere Informationen

• zum Nachlesen: Bootstrap-Grundlagen: Webseiten mit Grid, Utility-Klassen und Komponenten gestalten

• als Nachschlagewerk: Bootstrap 5.3: Dokumentation

• zu Formularen: Bootstrap 5.3: Validation

• zum Prüfen: W3C: Nu Html Checker

Hinweis zur Nachnutzung als Open Educational Resource (OER)

Dieser Artikel und seine Texte, Bilder, Grafiken, Code und sonstiger Inhalt sind - sofern nicht anders angegeben - lizenziert unter CC BY 4.0. Nennung gemäß TULLU-Regel bitte wie folgt: “Übungsaufgaben zu den Bootstrap-Grundlagen: Grid, Utility-Klassen, Cards und Formulare für Mitfahrgesuche” von oer-informatik.de (H. Stein), Lizenz: CC BY 4.0. Der Artikel wurde unter https://oer-informatik.de/bootstrap-grundlagen-uebungsaufgaben veröffentlicht, die Quelltexte sind in weiterverarbeitbarer Form verfügbar im Repository unter https://gitlab.com/oer-informatik/programmierung/web-grundlagen. Erstellt mit KI-Assistenz; von mir umfassend redaktionell überarbeitet, geprüft und freigegeben. Stand: 11.11.2026.

[Kommentare zum Artikel lesen, schreiben] / [Artikel teilen] / [gitlab-Issue zum Artikel schreiben]