Ausrichten
1 (text-left)
2 (text-center)
3 (text-right)
Dieser Text ist neben dem Bild. Zwei Bilder, eines mit 100% eines mit 25%, je nach Breakpoint jeweils eins ausgeblendet. Wenn nicht umfließend, dann besser mit separater Spalte. Float und Margine je nach Breakpoint
Dieser Text ist unter dem Bild.
Dieser Text ist unter dem Bild.
Dieser Text ist neben dem Bild. Zwei Bilder, eines mit 100% eines mit 25%, je nach Breakpoint jeweils eins ausgeblendet. Wenn nicht umfließend, dann besser mit separater Spalte. Float und Margine je nach Breakpoint
Wenn 100% dann das Bild nicht am Ende, sondern nach vorn.
Dieser Text ist unter dem Bild.
Bild 100% (img-responsive)
Rand Radius
Grid
Verschahteln (Es stehen jedes mal 12 zur verfügung)
Abstand dahinter und davor einfügen je nach Breite
1 (mr-auto)
2
3 (ml-auto)
Leerspalten davor einfügen je nach Breite
1
2 (offset-1)
3 (offset-1)
Reihenfolge je nach Breite
1 (order-3)
2 (order-2)
3 (order-1)
1 (order-last)
2
3 (order-first)
Inneren Abstand entfernen (Wird schmäler !!!)
Spalten horrizontal ausrichten
justify-content-around
justify-content-around
justify-content-between
justify-content-between
justify-content-between
Spalten vertikal ausrichten (Oben: align-self-start Mitte: align-self-center Unten: align-self-end)
align-self-start
align-self-center
align-self-end
Ganze Zeile vertikal ausrichten (Oben: align-items-start Mitte: align-items-center Unten: align-items-end)
Ausblenden je nach Breite (d-none)
Spaltenbreite nach Inhalt auto, rest ohne angabe von Breite
Manueller Umbruch w-100 (Um das zu erreichen muss ein Element mit width 100% eingefügt, also w-100)
Achtung: In kombination mit d-none kann der Umbruch je nach Breite sein
Automatische Breite, je nachdem wie viele Elemente
Alles bleibt unabhängig von der Breite des Bildschirms immer in einer Zeile
1 Spalten / 2 Spalten / 3 Spalte
container
container
container-fluid
container-fluid