Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Listicle

Mit diesen Websites wirst du zum Bootstrap-Profi

(Screenshot: Bootstrap)

Es gibt viele nützliche Websites zum beliebten Frontend-Framework Bootstrap. Hier findest du eine Liste aller spannenden Quellen rund um Themes, UI-Kits, Tutorials und Blogs.

Im Internet lassen sich jede Menge Websites finden, die das Thema Bootstrap behandeln. Da kann man schnell den Überblick verlieren. Um dem entgegenzuwirken, haben wir die wichtigsten Seiten hier sauber aufgelistet.

Code-Schnipsel für Bootstrap

Warum selbst etwas machen, wenn sich andere bereits die Mühe gemacht haben? Durchstöbert die Code-Schnipsel der folgenden Seiten inklusive einer Vorschau. Als Inspiration, Hilfestellung oder einfach zum Copy-&-Paste.

Bootsnipp

Bootsnipp ist ein Portal, bei dem Web-Entwickler und -Designer Code-Schnipsel für Bootstrap hochladen können. Diese lassen sich dann inklusive einer kleinen Vorschau einsehen.

Die Vorschau-Ansicht eines Code-Schnipsels auf Bootsnipp. (Screenshot: Bootsnipp/t3n.de)
Die Vorschau-Ansicht eines Code-Schnipsels auf Bootsnipp. (Screenshot: Bootsnipp/t3n.de)

Bootdey

Auf Bootdey findest du ein Komplettpaket aus Code-Schnipseln, Templates und Plugins für Bootstrap, HTML, CSS und Javascript. Auch bei Bootdey ist eine Vorschau-Funktion mit an Bord.

Die Vorschau-Funktion eines Code-Schnipsels auf Bootdey. (Screenshot: Bootdey/t3n.de)
Die Vorschau-Funktion eines Code-Schnipsels auf Bootdey. (Screenshot: Bootdey/t3n.de)

Gestalte dein eigenes Bootstrap

Deine Bootstrap-Elemente kannst du kompliziert in einer CSS-Datei anpassen oder du schaust auf folgenden Seiten vorbei und nutzt einen komfortablen Editor mit einer Live-Vorschau.

Bootstrap-Magic

Bootstrap-Magic gibt dir die Möglichkeit, alle Bootstrap-Elemente mit Farben, Textgrößen, Abständen und vielem mehr anzupassen. Die Einstellungen werden in einer Vorschau auch direkt angezeigt. Neben dem gut aufbereiteten Editor kannst du auch direkt per HTML Elemente anpassen. Dein Design kann als CSS- und SCSS-Datei gespeichert werden.

Der Editor von Bootstrap-Magic. (Screenshot: Bootstrap-Magic/t3n.de)
Der Editor von Bootstrap-Magic. (Screenshot: Bootstrap-Magic/t3n.de)

Bootstrap-Build

Wer eine Alternative zu Bootstrap-Magic sucht, sollte sich Bootstrap-Build näher anschauen. Hier kannst du direkt die HTML-Elemente sowie die Styles in einem passenden Editor inklusive einer Vorschau anpassen. Deine Einstellungen können direkt als CSS- und SCSS-Dateien exportiert werden.

Der Bootstrap 4 Theme-Builder. (Screenshot: Bootstrap-Build/t3n.de)
Der Bootstrap-4-Theme-Builder. (Screenshot: Bootstrap-Build/t3n.de)

Die besten Quellen für Bootstrap-Themes und Toolkits

Designrevision

Designrevision hat zwei spannende UI-Toolkits für Bootstrap 4. Darunter das kostenlose Frontend-Kit Shards sowie ein kostenpflichtiges Dashboard-Template. Beide fallen durch einfaches und modernes Design auf. Bei beiden Kits stehen die Sketch- und SCSS-Dateien zur Verfügung, wodurch du einfach Layouts verändern und ergänzen kannst.

Die Cards im Shards-Kit von Designrevision. (Screenshot: Designrevision/t3n.de)
Die Cards im Shards-Kit von Designrevision. (Screenshot: Designrevision/t3n.de)

Bootswatch

Eine gute Quelle für kostenlose Bootstrap-Themes findest du bei Bootswatch. Dort kannst du über 20 verschiedene Themes durchstöbern, die alle Open-Source und frei zugänglich sind.

Auf Bootswatch findest du über 20 kostenlose Bootstrap-Themes. (Screenshot: Bootswatch/t3n.de)
Auf Bootswatch findest du über 20 kostenlose Bootstrap-Themes. (Screenshot: Bootswatch/t3n.de)

Bitte beachte unsere Community-Richtlinien

2 Reaktionen
JK

Noch 2 free Themes:
https://github.com/DevExpress/bootstrap-themes
Purple ist nicht so mein Geschmack, OfficeWhite schaut aber schön aus.

Antworten
JK

https://wrapbootstrap.com/
habt ihr vergessen.

Viele kostenpflichtige Templates.
Die Preis sind aber recht human.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.