Horizontale und vertikale Anordnung von Zeilen und Spalten - Bootstrap Snippet

<div class="container"> <div class="row"> <div class="col"> <h1>Vertikale Ausrichtung (Zeile)</h1> </div> </div> <div class="row align-items-center test"> <div class="col">Sidebar 1 (.col)</div> <div class="col-7">Inhalt (.col-3)</div> <div class="col">Sidebar 2 (.col)</div> </div> <div class="row"> <div class="col"> <h1>Vertikale Ausrichtung (Spalte)</h1> </div> </div> <div class="row test"> <div class="col align-self-start">.col (oben)</div> <div class="col align-self-center">.col (mittig)</div> <div class="col align-self-end">.col (unten)</div> </div> <div class="row"> <div class="col"> <h1>Horizontale Ausrichtung (Zeile)</h1> </div> </div> <div class="row justify-content-start"> <div class="col-2">.col-2 (links)</div> </div> <div class="row justify-content-center"> <div class="col-2">.col-2 (mittig)</div> </div> <div class="row justify-content-end"> <div class="col-2">.col-2 (rechts)</div> </div> <div class="row justify-content-around"> <div class="col-2">.col-2 (ringsherum)</div> <div class="col-2">.col-2 (ringsherum)</div> </div> <div class="row justify-content-between"> <div class="col-2">.col-2 (dazwischen)</div> <div class="col-2">.col-2 (dazwischen)</div> </div> </div>

/*nur fuer Beispiel, um Hoehe des Containers zu simulieren*/ .test { height:10em; } .col, .col-7, .col-2 { border: 1px solid #000; }