Breakpoints

"xs"

Extra Small

576px

"sm"

Small

768px

"md"

Medium

992px

"lg"

Large

1200px

"xl"

Extra Large

1440px



Beispiel 1

Responsive Columns

col-6

col-md-8

col-6

col-md-4

col-12

col-md-4

col-12

col-md-4

col-12

col-md-4

col-12

col-sm-6

col-lg-4

col-12

col-sm-6

col-lg-4

col-12

col-lg-4

Beispiel 2

Horizontal and vertical positioning

col-12

col-md-4

col-start-md-5

col-12

col-md-4

col-12

col-md-4

col-12

col-md-4

col-start-md-9

col-12

col-md-4

col-12

col-md-8

pull-left-md

col-12

col-md-4

row-start-lg-2

col-start-xl-9

col-12

col-md-4

col-12

col-md-4

col-12

col-md-4

row-start-lg-1

col-12

col-md-8

col-start-xl-1

Beispiel 3

Vertical spans

col-12

col-md-4

row-span-md-3

col-12

col-md-8

col-12

col-md-4

col-12

col-md-4

row-span-md-2

col-12

col-md-4

col-start-md-5

Beispiel 4

Nested Grids

col-12

col-md-4

row-span-md-3

col-12

col-md-6

col-xl-4

col-12

col-md-6

col-xl-4

col-12

col-xl-4

col-12

col-md-4

col-12

col-sm-6

col-lg-3

col-12

col-sm-6

col-lg-3

col-12

col-sm-6

col-lg-3

col-12

col-sm-6

col-lg-3

Beispiel 5

Horizontal and vertical alignment

col-12

col-md-6

justify-md-center

col-12

col-md-6

justify-md-start

col-12

col-md-6

justify-md-end

col-12

col-md-6

justify-md-stretch

col-12

col-md-4

align-md-center

col-12

col-md-4

align-md-end

col-12

col-md-4

align-md-stretch

Beispiel 6

Horizontal gutter

col-6

col-6

col-6

col-md-4

col-6

col-md-4

col-6

col-md-4

col-6

col-md-4

col-6

col-md-4

col-6

col-md-4

col-6

col-md-4

col-6

col-md-4

col-6

col-md-4

col-4

col-4

col-4