Veröffentlicht am
8.5.2026
Framework-Freitag: Tailwind vs. Bootstrap
CSS wird zur Gestaltung der Website eingesetzt
CSS - das steht für Cascading Style Sheets - wird zur Gestaltung der Website verwendet und macht sie erst so richtig bunt und lebendig. Früher war die richtige und vor allem pixelgenaue Gestaltung der Website mit sehr viel Aufwand verbunden, da es Flexbox oder gar ein Grid noch gar nicht gab - von Mobile First brauchen wir erst gar nicht reden. Aber auch CSS wurde wie HTML stets weiterentwickelt und ist mittlerweile so mächtig geworden, dass selbst JavaScript für einige Gestaltungsaufgaben nicht mehr unbedingt notwendig ist. So kann man in CSS mittlerweile Variablen für Farben anlegen, es stehen Funktionen wie min(), max() oder calc() zur Verfügung und man kann CSS-Anweisungen wie im Beispiel unten miteinander verschachteln, was vorher nur in Präprozessoren wie Sass möglich war:
input {
border: tomato 2px solid;
}
label {
font-family: system-ui;
font-size: 1.25rem;
& input {
border: blue 2px dashed;
}
}Aber auch in CSS gibt es Frameworks und als Web- oder Frontend-Entwickler wird man früher oder später auf die beiden großen Platzhirsche Twitter Bootstrap oder Tailwind CSS stoßen. Hier möchte ich den Unterschied zwischen den beiden Frameworks erläutern und zeigen, wann man welches Framework am besten verwenden sollte.
Twitter Bootstrap
Bootstrap wurde ursprünglich von einem Entwicklerteam bei Twitter entwickelt, da man intern sehr viele unterschiedliche Bibliotheken für die damaligen Nutzeroberflächen einsetzte und der Wartungsaufwand ziemlich hoch war. Schnell wurde das Framework im Unternehmen erfolgreich und man nutzte es, um Prototypen deutlich schneller zu entwickeln und diese dann vorzustellen. Im Jahre 2011 entscheid man sich bei Twitter, das Framework als Open-Source-Projekt zur Verfügung zu stellen und es wurde rasch sehr populär.
Bootstrap besitzt eine Reihe von Komponenten, die man bequem in seine Website einbinden und auch verwenden kann. Es benötigte bis einschließlich Version 4 auch noch jQuery, bis man es in Version 5 auf natives JavaScript umstellte. Lediglich Popper.js ist noch in dem Framework enthalten, um einige Teile von Komponenten wie Dropdowns richtig zu positionieren. Der größte Vorteil von Bootstrap liegt jedoch in dem mitgelieferten Grid-System, die es dem Entwickler sehr leicht machen, Websites für verschiedene Geräte wie Desktop, Tablet und Mobile schnell zu erstellen. Das folgende Beispiel soll dies einmal verdeutlichen:
<div class="container mt-5">
<h2 class="mb-4">Bootstrap Grid System Veranschaulichung</h2>
<p class="text-muted">
Das Grid basiert auf insgesamt <strong>12 Spalten</strong>.
</p>
<hr />
<h4 class="mt-4">1. Drei gleich große Spalten</h4>
<p><code>.col-4</code> (3 x 4 = 12)</p>
<div class="row">
<div class="col-4">Drittel (4 Spalten)</div>
<div class="col-4 highlight">Drittel (4 Spalten)</div>
<div class="col-4">Drittel (4 Spalten)</div>
</div>
<h4 class="mt-4">2. Ungleiche Verteilung</h4>
<p><code>.col-8</code> und <code>.col-4</code></p>
<div class="row">
<div class="col-8">Hauptinhalt (8 Spalten)</div>
<div class="col-4 highlight">Sidebar (4 Spalten)</div>
</div>
<h4 class="mt-4">3. Automatische Spalten (Gleichmäßig)</h4>
<p>Nur <code>.col</code> ohne Zahl teilt den Platz automatisch auf.</p>
<div class="row">
<div class="col">1 / 5</div>
<div class="col">1 / 5</div>
<div class="col highlight">1 / 5</div>
<div class="col">1 / 5</div>
<div class="col">1 / 5</div>
</div>
<h4 class="mt-4">4. Responsive Spalten (Mobil vs. Desktop)</h4>
<p>
<code>.col-md-3</code> (Nebeneinander auf Desktop, untereinander auf dem
Handy)
</p>
<div class="row">
<div class="col-md-3 col-sm-6">Box 1</div>
<div class="col-md-3 col-sm-6 highlight">Box 2</div>
<div class="col-md-3 col-sm-6">Box 3</div>
<div class="col-md-3 col-sm-6 highlight">Box 4</div>
</div>
<div class="alert alert-info mt-5">
<strong>Tipp:</strong> Verkleinere dein Browserfenster, um zu sehen, wie
sich die "Responsive Spalten" verhalten!
</div>
</div>Du kannst dir die Website wie eine Art “Tabelle” mit Spalten und Reihen vorstellen, wobei diese Einteilung mithilfe von Bootstrap mit den beiden Klassen row und col vorgenommen wird. Auch das native Grid von CSS (display: grid) verfügt über einen ähnlichen Ansatz, wobei man hier die volle Kontrolle über das Layout hat. Bootstrap ermöglicht dem Entwickler jedoch, solche responsive Websites, d.h. das Layout der Seite passt sich mit dem Gerät an, schnell zu erstellen. Die mitgelieferten Komponenten wie die Card oder die Navbar unterstützen das auch noch. Entwickelt man eine Webanwendung z.B. mit Vue, kann man die Komponenten mithilfe von JavaScript zum Leben erwecken und für die Darstellung von Daten nutzen. Daher ist Bootstrap auch nicht nur bei statischen Seiten so beliebt. Gleichzeitig lassen sich die vorgefertigten Klassen schnell erweitern und anpassen. So wurde die neue Website von meinem Tennisverein ebenfalls mit Bootstrap entwickelt. Auf der Homepage von Bootstrap gibt es auch eine Übersicht aller Komponenten.
Tailwind CSS
Während Bootstrap seinen Schwerpunkt auf seine zahlreichen fertigen Komponenten bzw. Widgets gelegt hat, gibt es diese bei Tailwind gar nicht. Tailwind ist nämlich eine sehr große Sammlung von einzelnen CSS-Klassen, womit man sich seine Komponenten selber zusammenbauen muss. Um sich das ganze einmal mit bildlich vorzustellen: Bootstrap entspricht einem vorgefertigten Set aus Klemmbausteinen, während Tailwind aus den Klemmbausteinen selber besteht, mit denen man sich solche Sets zusammenbauen kann. Das folgende Beispiel zeigt das obige Beispiel aus Bootstrap - nur in Tailwind überführt:
<body class="bg-white p-8 text-gray-800">
<div class="container mx-auto mt-10">
<h2 class="text-3xl font-bold mb-4">
Tailwind Grid System Veranschaulichung
</h2>
<p class="text-gray-500 mb-6">
Auch in Tailwind nutzen wir oft das klassische
<strong>12-Spalten-Layout</strong>.
</p>
<hr class="border-gray-300 my-6" />
<h4 class="text-xl font-semibold mt-8 mb-2">
1. Drei gleich große Spalten
</h4>
<p class="font-mono text-sm bg-gray-100 p-1 inline-block mb-4">
grid-cols-3
</p>
<div class="grid grid-cols-3 gap-4">
<div class="p-4 bg-gray-100 border border-gray-300 text-center">
Drittel
</div>
<div
class="p-4 bg-blue-600 text-white border border-blue-700 text-center font-bold"
>
Drittel
</div>
<div class="p-4 bg-gray-100 border border-gray-300 text-center">
Drittel
</div>
</div>
<h4 class="text-xl font-semibold mt-8 mb-2">2. Ungleiche Verteilung</h4>
<p class="font-mono text-sm bg-gray-100 p-1 inline-block mb-4">
col-span-8 & col-span-4
</p>
<div class="grid grid-cols-12 gap-4">
<div
class="col-span-8 p-4 bg-gray-100 border border-gray-300 text-center"
>
Hauptinhalt (8 Spalten)
</div>
<div
class="col-span-4 p-4 bg-blue-600 text-white border border-blue-700 text-center font-bold"
>
Sidebar (4 Spalten)
</div>
</div>
<h4 class="text-xl font-semibold mt-8 mb-2">
3. Automatische Spalten (Flexbox-Stil)
</h4>
<p class="font-mono text-sm bg-gray-100 p-1 inline-block mb-4">flex-1</p>
<div class="flex gap-4">
<div class="flex-1 p-4 bg-gray-100 border border-gray-300 text-center">
1 / 5
</div>
<div class="flex-1 p-4 bg-gray-100 border border-gray-300 text-center">
1 / 5
</div>
<div
class="flex-1 p-4 bg-blue-600 text-white border border-blue-700 text-center font-bold"
>
1 / 5
</div>
<div class="flex-1 p-4 bg-gray-100 border border-gray-300 text-center">
1 / 5
</div>
<div class="flex-1 p-4 bg-gray-100 border border-gray-300 text-center">
1 / 5
</div>
</div>
<h4 class="text-xl font-semibold mt-8 mb-2">
4. Responsive Spalten (Mobil vs. Desktop)
</h4>
<p class="font-mono text-sm bg-gray-100 p-1 inline-block mb-4">
grid-cols-1 md:grid-cols-4
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
<div class="p-4 bg-gray-100 border border-gray-300 text-center">
Box 1
</div>
<div
class="p-4 bg-blue-600 text-white border border-blue-700 text-center font-bold"
>
Box 2
</div>
<div class="p-4 bg-gray-100 border border-gray-300 text-center">
Box 3
</div>
<div
class="p-4 bg-blue-600 text-white border border-blue-700 text-center font-bold"
>
Box 4
</div>
</div>
<div class="mt-12 p-4 bg-blue-50 border-l-4 border-blue-400 text-blue-700">
<strong>Tipp:</strong> Tailwind nutzt Prefixe wie <code>md:</code> für
Responsiveness. Das ist viel intuitiver als die Bootstrap-Klassen, da du
direkt am Element siehst, was bei welcher Größe passiert.
</div>
</div>
</body>Wie man an dem Beispiel sieht, ist es bei Tailwind umfangreicher und etwas aufwendiger als bei Bootstrap. Die div-Container haben deutlich mehr Klassen und auf den ersten Blick wirkt das nicht ganz so selbsterklärend, wie es bei Bootstrap der Fall ist. Wenn man allerdings die Grundlagen von CSS (dazu gehört in erster Linie das Flex- und Gridlayout) einmal verstanden hat, liest sich das ganze schon fast wie der Code eines Programms.
Tailwind erhielt in der Version 4 eine gründliche Generalüberholung und setzt nun intern auf eine Rust basierende Engine, wodurch sich die Performance immens erhöht hat. Außerdem werden die Einstellungen nicht mehr in einer separaten tailwind.config.js vorgenommen, sondern direkt in der CSS-Datei. Damit verfolgt man den Ansatz von CSS-First. Schaue am besten auf der Homepage von Tailwind vorbei, um dir das Framework genauer anzusehen.
Wann sollte ich was verwenden?
Bootstrap lohnt sich dann, wenn die Funktionalität und die Geschwindigkeit deutlich wichtiger sind als Design. Das ist beispielsweise bei schnellen Prototypen oder internenen Admintools der Fall, für das Bootstrap ja auch ursprünglich entwickelt wurde. Ich persönlich zähle UI-Design als ein ziemlich anspruchsvolles Handwerk und wenn man zurzeit keinen UI-Designer an Bord hat, kann sich der Einsatz von Bootstrap ebenfalls lohnen, da die Komponenten alle einheitlich aussehen. Willst du hingegen ein einzigartiges und voll zugeschnittes Design verwenden, dann ist Tailwind das Mittel zur Wahl. Bei modernen Frameworks wie Vue können eigene Komponenten mit Tailwind deutlich leichter und angenehmer entwickelt werden, da man nicht “gegen das Framework kämpft”. Wenn man sich ein wenig mit CSS auskennt, kann man Tailwind auch für statische Seiten wie diese hier verwenden.
Achtung: Verwende die beiden Frameworks nicht gleichzeitig, da viele Klassennamen identisch sind und es so zu Konflikten kommt!
Vorsicht bei großen Versionsupgrades
Egal, ob du dich nun für Tailwind oder für Bootstrap entscheidst und damit deine Website oder Webanwendung entwickelst. Irgendwann erscheint Bootstrap 6 oder Tailwind 5. Die Upgrades auf eine neue Version sind bei beiden Frameworks mit einem kleinen Aufwand verbunden und wenn man blind einfach drauf los die Version ändert, kann dies das gesamte Layout zerschießen. Schaut daher unbedingt in die Doku des jeweiligen Frameworks hinein, um solche bösen Überraschungen zu vermeiden und das Projekt langsam auf die neuere Version zu migrieren.
Fazit
Die Grundlagen von CSS lernt man mit praktischen Beispielen ziemlich schnell, wenn man seine eigenen Websites baut. Hat man diese erst einmal gelernt und kann diese erfolgreich anwenden, kann man zu einem der beiden Frameworks greifen. Der schnellen und einfachen Gestaltung der Website sind dann keine Grenzen mehr gesetzt und mancher wagt sich vielleicht sogar an außergewöhnliche Designs, wie hier bei Windows 93. Wer CSS spielerisch lernen will, kann es auch mit Flexbox Froggy oder Grid Garden versuchen.