Bootstrap 4 Schnellstart – Sonstige Utilitys
Hier kommen noch ein paar sonstige Utilitys, die dir weiterhelfen können. Die Details aller Funktionen würden allerdings den Rahmen des Bootstrap-Schnellstarts sprengen.
Float
Um Inhalte auf einer bestimmten Ausrichtung "floaten" zu lassen, kannst du folgende drei Klassen verwenden:
| Ausrichtung | Klasse |
| Linksbündig | float-left |
| Rechtsbündig | float-right |
| Nicht "floaten" | float-none |
<div class="float-right">Ich floate rechts herum. </div>
Position
Auch wenn es etwas knifflig ist und Bootstrap mit seinem Layout eine Menge an Funktionen mit sich bringt, möchte man bestimmte Element speziell positionieren. Hier ist etwas Vorsicht geboten, denn man muss diese Klassen ordentlich durchtesten, denn nicht alle sind responsive.
| Position | Klasse |
| Position Statisch | position-static |
| Position Relativ | position-relative |
| Position Absolut | position-absolute |
| Position Fixiert | position-fixed |
| Position Sticky | position-sticky |
| Oben Fixiert | fixed-top |
| Unten Fixiert | fixed-bottom |
| Oben sticky | sticky-top |
<div class="fixed-bottom">...</div>
Schatten
Schattierungen sind manchmal ganz schön anzusehen und Bootstrap bringt dafür gleich 4 Klassen mit:
| Schatten | Klasse |
| Kein Schatten | shadow-none |
| Kleiner Schatten | shadow-sm |
| Normaler Schatten | shadow |
| Großer Schatten | shadow-lg |
<div class="shadow">Ich habe einen normalen Schatten</div>
Größe
Größenänderungen sind durch das Grid Layout zwar nicht notwendig aber manchmal muss man Feineinstellungen machen. Diese Größenänderungen sind immer relativ zum Elternelement zu beachten!
| Name/Bedeutung | Klasse |
| Breite 25% | w-25 |
| Breite 50% | w-50 |
| Breite 75% | w-75 |
| Breite 100% | w-100 |
| Breite auto | w-auto |
| Höhe 25% | h-25 |
| Höhe 50% | h-50 |
| Höhe 75% | h-75 |
| Höhe 100% | h-100 |
| Höhe auto | h-auto |
| Maximale Breite | mw-100 |
| Maximale Höhe | mh-100 |
| Minimum relative Viewport Breite | min-vw-100 |
| Minimum relative Viewport Höhe | min-vh-100 |
| Relative Viewport Breite | vw-100 |
| Relative Viewport Höhe | vh-100 |
Eigentlich schon fast überflüssig, aber hier noch ein Beispiel:
<img src="" class="mw-100">
Auch für diese letzte Lektion erhältst du noch eine kleine Übung zum Ausprobieren und selber machen: