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

  • Beiträge: 49
  • Dank erhalten: 1

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

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:
<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!
3 Monate 2 Wochen her #1
Anhänge:
Dieses Thema wurde gesperrt.
  • Beiträge: 1999
  • Dank erhalten: 304

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

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/
<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>
Letzte Änderung: 3 Monate 1 Woche her von WM-Loose.
3 Monate 2 Wochen her #2
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

Kaufen - 59€

Copyright © 2022 Joomlaplates | Joomla 4 Templates mit Uikit 3

Impressum & Datenschutz | AGB