Bootstrap Layout Rendszer

Konténerek, Sorok és Oszlopok részletes bemutatása

Konténer Típusok

.container

Fix szélességű konténer

.container-fluid

Teljes szélességű konténer

.container-sm

100% < 576px

.container-md

100% < 768px

.container-lg

100% < 992px

Grid Rendszer

Alap Grid Rendszer

.col-4
.col-4
.col-4

Reszponzív Grid

.col-12 .col-md-6 .col-lg-3
.col-12 .col-md-6 .col-lg-3
.col-12 .col-md-6 .col-lg-3
.col-12 .col-md-6 .col-lg-3

Auto-layout Grid

.col
.col
.col

Változó szélesség

Változó szélesség
Tartalom alapján

Grid Elrendezések

Oszlop sortörés

.col-6
.col-6
.col-6
.col-6

Oszlop rendezés

Első, de .order-3
Második, de .order-1
Harmadik, de .order-2

Offset használata

.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3

Beágyazott sorok

.col-sm-9
.col-8 .col-sm-6
.col-4 .col-sm-6

Flex Grid Viselkedés

Vízszintes igazítás

.justify-content-start
.justify-content-center
.justify-content-end

Függőleges igazítás

.align-items-start
.align-items-start
.align-items-start
.align-items-center
.align-items-center
.align-items-center
.align-items-end
.align-items-end
.align-items-end