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

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

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

Posted 2 Jahre 3 Monate 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!
von stephanlauble

Anhänge:

Dieses Thema wurde gesperrt.

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

Posted 2 Jahre 3 Monate her #2
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 2 Monate her von joomlaplates
Letzte Änderung: 2 Jahre 2 Monate her von WM-Loose.
Dieses Thema wurde gesperrt.
Powered by Kunena Forum