[GELÖST] Grid mit Bild links und Schrift rechts (und umgekehrt)

  • stephanlauble
  • stephanlaubles Avatar Autor
  • Senior Mitglied
  • Senior Mitglied
  • Beiträge: 55
  • Dank erhalten: 2

Grid mit Bild links und Schrift rechts (und umgekehrt) wurde erstellt von stephanlauble

Posted 2 Jahre 3 Wochen her #1
Hallo,

ich stehe auf dem Schlauch und versuche mein Bootstrap-Grid vgl. der Bosch Professionell Website zu bauen: Bilder abwechselnd links und rechts bis zum Desktop Rand und jeweils daneben Text (der aber nicht bis zum Rand gehen soll):


Meine Astroid Section beinhaltet ein Container Fluid und im Modul folgendes HTML:
Code:
<div class="row"> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> <div class="container"> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> <h2>Hier ein Text</h2> <p>Hier ein Text</p> </div> </div> </div> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> <figure class="zoom-in"><img src="images/bild.jpg" width="900" height="600" alt="Text"><div class="inside-image"><a class="btn btn-style" href="index.php?Itemid=141"> Link Text <em class="fas fa-arrow-right-long"> </em></a></div></figure> </div> </div>

Dann geht der Text aber auch bis ganz raus. Hat jemand ne Idee oder Link (in der Bootstrap Dokumentation finde ich kein vglb. Beispiel), wie ich das Grid bauen muss, damit es dem Bosch-Beispiel gleicht? Sorry, vielleicht hier nicht ganz das richtige Forum. Ich danke dennoch für eine Idee (die mir und vielleicht auch anderen hilft vom Schlauch zu springen und tolle Layouts mit Astroid zu bauen... ;-))

Vielen Dank!

Anhänge:

Dieses Thema wurde gesperrt.
Hallo, bei der Column des Texes der rechts stehen soll, muss natürlich dann ein float-end rein, also floatet der text dann rechts
getbootstrap.com/docs/5.1/utilities/float/
Code:
<div class="row"> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> <div class="container"> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 float-end"> <h2>Hier ein Text</h2> <p>Hier ein Text</p> </div> </div> </div> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> <figure class="zoom-in"><img src="images/bild.jpg" width="900" height="600" alt="Text"><div class="inside-image"><a class="btn btn-style" href="index.php?Itemid=141"> Link Text <em class="fas fa-arrow-right-long"> </em></a></div></figure> </div> </div>
Last Edit:2 Jahre 1 Woche her von joomlaplates
Letzte Änderung: 2 Jahre 1 Woche her von WM-Loose.
Dieses Thema wurde gesperrt.

Installations-Service

Sparen Sie Zeit, wir installieren ihr gekauftes Joomla Template
mit all den dazugehörigen Extensions und dem "Demo Inhalt" innerhalb der nächsten 24 Stunden
auf einem Server/Webhost ihrer Wahl

JoomlaPlates

Professionelle Joomla Templates mit deutscher Dokumentation und Support seit 2008. Über 70 Templates für Joomla 5 & 6.

Joomla 4 Joomla 5 Joomla 6
Kontakt & Rechtliches
  • support@joomlaplates.de
  • Deutsches Support-Team
  • Mo-Fr: 9:00-18:00 Uhr

© JoomlaPlates. Alle Rechte vorbehalten. 2008 - 2026

JoomlaPlates ist nicht mit dem Joomla! Project verbunden. Joomla! ist eine eingetragene Marke von Open Source Matters, Inc.