Multi-Spalten Elemente

Beim Grid wird auf Bootstrap v4.1 gesetzt. Weitere Code Beispiele und alle Features des Grids gibt es in der offiziellen Bootstrap Dokumentation.

Verfügbare Container

Container (Standard)

Container Erweitert

Container ohne Breitenbegrenzung

<div class="container mb-3">
    <div class="bg-white p-3">
        <h3>Container (Standard)</h3>
    </div>
</div>
<div class="container-extended mb-3">
    <div class="bg-white p-3">
        <h3>Container Erweitert</h3>
    </div>
</div>
<div class="container-fluid mb-3">
    <div class="bg-white p-3">
        <h3>Container ohne Breitenbegrenzung</h3>
    </div>
</div>

Zweispaltiges Element (Text mit Bild)

Kicker

Überschrift

Unterüberschrift

Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

<div class="container">
    <div class="row align-items-center">
        <div class="col-md-5 d-flex flex-column justify-content-center">
            <figure class="figure media-item type-2 text-center">
                <img class="figure-img img-fluid img-shadow" src="https://picsum.photos/600/400" width="600" height="400" alt="" >
            </figure>
        </div>
        <div class="col-md-7">
            <div class="text-container">
                <header>
                    <div class="kicker kicker-lead">Kicker</div>
                    <h2 class="headline">Überschrift</h2>
                    <h3 class="subheader">Unterüberschrift</h3>
                </header>
                <p>
                    Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
                </p>
            </div>
        </div>
    </div>
</div>