Inhalte in Mobirise mit Bootstrap zentrieren

CSS und andere hilfreiche Anweisungen
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Inhalte in Mobirise mit Bootstrap zentrieren

Ungelesener Beitrag von Tommy Herrmann »

Mobirise verwendet zum Zentrieren von Inhalten in einem Bereich die Bootstrap-Klassen:

class="d-flex justify-content-center"


Hier ein Beispiel:

Ich verwende z.B. einen einfachen Textblock aus der Kategorie "Article"


Block Article.JPG


... und möchte z.B. ein Iframe (Inline Frame) zentriert darstellen.

Dazu ersetze ich in diesem Beispiel den Beispiel-Text von Mobirise innerhalb des <p> Tags </p> (Paragraph / Absatz) mit dem Iframe-Code.

Anschließend schreibt man noch einen <div> Bereich </div> mit dieser Bootstrap-Class außen drum herum um den Inhalt innerhalb dieser Class zentriert darzustellen:

Code: Alles auswählen

<div class="d-flex justify-content-center">
    
    <p class="mbr-text mbr-fonts-style" data-app-selector=".mbr-text" mbr-theme-style="display-7">
    
        <iframe src="https://www.domain.de" width="100%" height="300" scrolling="yes" frameborder="0" name="Mein Iframe"></iframe>
        
    </p>
    
</div>

Siehe zur Justierung von Bereichen auch diese Bootstrap-Seite:

https://getbootstrap.com/docs/5.0/utili ... fy-content
Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 3 Gäste