Bootstrap 5 Kompaktkurs

Bootstrap 5 einbinden und strukturieren

• CDN und lokale Einbindung
• Paketverwaltung mit npm
• CSS- und JavaScript-Bundles
• Bootstrap Icons als separates Paket
• Projektstruktur für wartbare Frontends

Responsive Layouts aufbauen

• Container und responsive Breakpoints
• Rows und Columns kombinieren
• Gutters und Offsets steuern
• Flexbox-basiertes Grid für Standardlayouts
• Optionales CSS-Grid-System aktivieren

Utilities und Accessibility einsetzen

• Margin und Padding per Utilities
• Display und responsive Sichtbarkeit
• Position und Overflow steuern
• Typografie, Borders und Schatten
• Fokuszustände und Farbkontraste prüfen

UI-Komponenten kombinieren

• Buttons und Button Groups
• Badges und Alerts
• Cards, Navs und Tabs
• Accordion und Offcanvas
• Dropdowns, Modals und Tooltips
• Carousel und Fortschrittsanzeigen

Formulare und Validierung gestalten

• HTML5-Felder und Form Controls
• Responsive Formularlayouts
• Input Groups und Selects
• Checks, Radios und Ranges
• Validierungszustände und Fehlermeldungen

Corporate Design und Build anpassen

• Sass-Variablen und Maps überschreiben
• CSS Custom Properties einsetzen
• Color Modes per Datenattribut
• Designwerte projektbezogen anpassen
• Benötigte Sass-Module auswählen
• CSS- und JavaScript-Größe reduzieren

• Grundkenntnisse in HTML5 und CSS3
• Sicherer Umgang mit Klassen, Selektoren und Seitenstrukturen
• JavaScript-Grundkenntnisse für interaktive Komponenten hilfreich
• npm-Kenntnisse nur für Paketverwaltung und Sass-Builds nötig
• Zur Vertiefung: HTML5-Aufbaukurs oder CSS-Aufbaukurs

• Webentwickler mit HTML- und CSS-Grundkenntnissen
• Frontend-Fachkräfte für responsive Websites und Web-Anwendungen
• Webmaster und Content-Manager mit Template-Verantwortung
• UX- und UI-Verantwortliche mit Corporate-Design-Vorgaben
• Webentwickler für die Migration bestehender Bootstrap-Oberflächen auf Version 5