Layout justering
Layout justerings klasserna används för att justera innehållet horisontellt eller vertikalt. Alla orienteirngsklasserna har sina egna responsiva klasser. T.ex. md:l-align-center för surfplattor och lg:l-align-top för stationära och större skärmar.
Vertikal justering
Top
Middle
Bottom
Baseline
Stretch
A
A
A
A
A
Vertikal justering för enstaka element
Top
Bottom
Middle
Baseline
Stretch
A
A
A
A
A
Horisontell justering
Left
Right
Center
Space-between
Space-around
Space-evenly
A
A
A
A
B
A
B
A
B
Horisontell justering för enstaka element
Left
Right
Center
Stretch
A
A
A
A
Översikt
| Klass | Beskrivning |
|---|---|
| l-align-top | Anpassa innehållet vertikalt till behållarens start |
| l-align-middle | Centrerar innehållet vertikalt |
| l-align-bottom | Anpassa innehållet vertikalt till behållarens ände |
| l-align-stretch | Justera innehållet vertikalt för att sträcka sig över allt tillgängligt utrymme |
| l-align-baseline | Anpassa innehållet vertikalt till behållarens baseline |
| l-align-self-top | Anpassa själva innehållet vertikalt till behållarens start |
| l-align-self-bottom | Anpassa själva innehållet vertikalt till behållarens ände |
| l-align-self-middle | Centrerar själva innehållet vertikalt |
| l-align-self-stretch | Justera själva innehållet vertikalt för att sträcka sig över allt tillgängligt utrymme |
| l-align-left | Anpassa innehållet horisontellt till behållarens start |
| l-align-right | Anpassa innehållet horisontellt till behållarens ände |
| l-align-center | Centrerar själva innehållet horisontellt |
| l-align-space-between | Justera innehållet horisontellt så att utrymmet fördelas mellan innehållet |
| l-align-space-around | Justera innehållet horisontellt så att utrymmet fördelas runt innehållet |
| l-align-space-evenly | Anpassa innehållet horisontellt så att utrymmet fördelas jämnt innehåll |
| l-align-self-left | Anpassa själva innehållet horisontellt till behållarens vänstersida |
| l-align-self-right | Anpassa själva innehållet horisontellt till behållarens högersida |
| l-align-self-center | Ccentrerar själva innehållet horisontellt |
| l-align-self-stretch | Justera själva innehållet horisontellt för att sträcka sig över allt tillgängligt utrymme. Endast flexbox. |
| l-max-width-080 | Sätter max bredd på alla underordande element till 80ch. |