30. Dezember 2023

Bootstrap-Layout Text und Bild 50/50

Ein beliebtes Gestaltungselement auf Websites ist die Kombination aus Text und Bild, wobei das Bild die Hälfte der Bildschirmbreite einnehmen soll, der Text aber wiederum innerhalb des Containers bleiben soll. Demo: www.fbnfrtg.de/demo/text-und-bild-50-50.html Hier ist das perfekte Snippet für diesen Zweck: Mobil werden die Elemente gestapelt, wobei das Bild immer vor dem Text dargestellt wird, unabhängig […]

• Bootstrap
• CSS
• Design

7. März 2023

So kann man im Gutenberg-Editor Blöcken beliebige CSS-Klassen zuweisen

Die Funktion „register_block_style“ ermöglicht es benutzerdefinierte CSS-Klassen vorhandenen Gutenberg-Blöcken zuzuweisen. Das ermöglicht z.B. die Auswahl verschiedener Listen-Typen, Tabellen-Typen, Text-Styles u.v.m. – also alles, was mit CSS formatierbar ist direkt im Gutenberg-Editor. Folgender Code muss hierfür in der functions.php ergänzt werden: Jetzt kann die Klasse im Gutenberg-Editor rechts in den Block-Einstellungen ausgewählt werden. Vorausgesetzt, dass die […]

• Bootstrap
• CSS
• WordPress

18. Februar 2023

Bild mit 100% Breite im Bootstrap-Container

Jeder, der mit Bootstrap arbeitet stand bestimmt schon mal vor diesem Problem: Die Breite der Inhalte ist durch den Bootstrap-Container begrenzt, jetzt soll aber ein Bild über die ganze Breite des Bildschirms laufen. Das naheliegende „width: 100%“ bezieht sich auf die Breite des Containers und funktioniert somit natürlich nicht. Und wenn der Image-Container absolut positioniert […]

• Bootstrap
• CSS

12. Februar 2023

Masonry-Layout mit Bootstrap

Masonry-Layouts waren in der Vergangenheit nicht immer einfach umzusetzen. Mit Bootstrap 5 können einfach die gewohnten Col-Klassen benutzt werden und mit wenigen Zeichen Code in ein Masonry-Layout gewandelt werden. Hierfür muss natürlich das Masonry-Javascript geladen sein: https://masonry.desandro.com/

• Bootstrap
• JavaScript