[GELÖST] Grid mit Bild links und Schrift rechts (und umgekehrt)
- stephanlauble
-
Autor
- Senior Mitglied
-
- Beiträge: 52
- Dank erhalten: 2
Grid mit Bild links und Schrift rechts (und umgekehrt) wurde erstellt von stephanlauble
Posted 1 Jahr 2 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:
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!
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
Dieses Thema wurde gesperrt.
- joomlaplates
-
- Moderator
-
- Beiträge: 2367
- Dank erhalten: 349
joomlaplates antwortete auf [GELÖST] Grid mit Bild links und Schrift rechts (und umgekehrt)
Posted 1 Jahr 2 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/
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:1 Jahr 2 Monate her
von joomlaplates
Letzte Änderung: 1 Jahr 2 Monate her von WM-Loose.
Dieses Thema wurde gesperrt.