Bootstrap in Malibu

Hallo zusammen,

ich verwende ein abgewandeltes Malibu-Theme. Die Shop-Version ist aktuell.
Meine sämtlichen Texte versuche ich ansprechend mit Bootstrap zu gestalten, aber irgendwie funktioniert da fast gar nicht.
Jetzt bin ich kein Programmierer, aber die Dokumentationen von Bootstrap verstehe ich.

Bootstrap ist doch in Gambio integriert, oder?
Das ein oder andere wurde von Gambio überschrieben, habe ich auch schon erfahren dürfen. Aber doch nicht alles, oder?

Ich will Grid-Spalten anlegen die als Card dargestellt werden sollen. Natürlich je nach Größe des Bildschirm die Anzahl der Spalten oder ob überhaupt was angezeigt wird. Langsam verzweifle ich an den "class="------"".

 

Vielen Dank für deine Antwort Dominik.

Jetzt bin ich leider kein Profi, was diese Dinge betrifft.
Ich habe mir das Malibu-Theme nur angepasst... über den StyleEditor dupliziert und dann halt bisher nur angepasst.

Kann ich das trotzdem machen, ohne das mir mein Layout zerschossen wird und ist das dann wenn Gambio eine Update macht auch Updatesicher?

Wenn es machbar ist, würde ich mir gerne das gesamte Bootstrap installieren...?

 

Dafür bin ich dann doch zu sehr Laie glaube ich.
Ich erstelle erst im Ordner MeinTheme>Style>system eine Datei wie bootstrap.scss und dann im Ordner MeinTheme>Style>custom eine weitere bootstrap.scss in der ich dann die Datei aus system importiere?
was muss in die bootstrap.scss alles rein?

 

ich bin hier am verzweifeln.

Wie ich kann ich von Bootstrap in der Kategoriebeschreibung die Grid-Komponente benutzen?
Auch wenn ich über Style (System und custom) den Css-Code von Bootstrap implementiere funktioniert es nicht. Im Gegenteil, es zerschmeißt mir mein ganzes Layout.

 

Ich bin jetzt mal mit Bordmitteln dem näher gekommen, wie ich es gerne hätte. Siehe Bild 1.
Was muss ich noch ändern, damit alle drei Spalten die gleiche Höhe haben?

Mein html sieht gerade so aus:

Code:

<div class="container-fluid row" style="padding-left: 0; padding-right: 0;">
    <div class="col-sm-12 col-md-4" style="margin-bottom: 15px;">
        <div style="background-color: rgba(65, 89, 103, 0.067); padding: 15px; text-align: justify;">
            ...
        </div>
    </div>

    <div class="col-sm-12 col-md-4" style="margin-bottom: 15px;">
        <div style="background-color: rgba(65, 89, 103, 0.067); padding: 15px; text-align: justify;">
            ...
        </div>
    </div>

    <div class="col-sm-12 col-md-4" style="margin-bottom: 15px;">
        <div style="background-color: rgba(65, 89, 103, 0.067); padding: 15px; text-align: justify;">
            ...
        </div>
    </div>
</div>

 

Für alle die es gebrauchen können, ich habe das folgender Maßen gelößt.

Code:

<div class="container-fluid row d-md-flex align-items-stretch" style="padding-left: 0; padding-right: 0;">
<div class="d-md-flex col-sm-12 col-md-4" style="margin-bottom: 15px;">
        <div class="align-self-stretch" style="background-color: rgba(65, 89, 103, 0.067); padding: 15px; text-align: justify;">
           Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At v
        </div>
    </div>

    <div class="d-md-flex col-sm-12 col-md-4" style="margin-bottom: 15px;">
        <div class="align-self-stretch" style="background-color: rgba(65, 89, 103, 0.067); padding: 15px; text-align: justify;">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </div>
    </div>

    <div class="d-md-flex col-sm-12 col-md-4" style="margin-bottom: 15px;">
        <div class="align-self-stretch" style="background-color: rgba(65, 89, 103, 0.067); padding: 15px; text-align: justify;">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
    </div>
</div>