layout demos

display

This is d-block. This is d-block.
This is d-inline. This is d-inline.
This is d-inline-block. This is d-inline-block.
This is d-none. This is d-none.

display (sm)

This is d-block-sm. This is d-block-sm.
This is d-inline-sm. This is d-inline-sm.
This is d-inline-block-sm. This is d-inline-block-sm.
This is d-none-sm. This is d-none-sm.

display (md)

This is d-block-md. This is d-block-md.
This is d-inline-md. This is d-inline-md.
This is d-inline-block-md. This is d-inline-block-md.
This is d-none-md. This is d-none-md.

display (lg)

This is d-block-lg. This is d-block-lg.
This is d-inline-lg. This is d-inline-lg.
This is d-inline-block-lg. This is d-inline-block-lg.
This is d-none-lg. This is d-none-lg.

visibility

This is v-visible.

This is v-collapse.

This is v-hidden.

flex-wrap

  1. This is fw-nowrap
  2. This is fw-nowrap
  3. This is fw-nowrap
  4. This is fw-nowrap
  5. This is fw-nowrap
  6. This is fw-nowrap
  7. This is fw-nowrap
  8. This is fw-nowrap
  1. This is fw-wrap
  2. This is fw-wrap
  3. This is fw-wrap
  4. This is fw-wrap
  5. This is fw-wrap
  6. This is fw-wrap
  7. This is fw-wrap
  8. This is fw-wrap
  1. This is fw-wrap-reverse
  2. This is fw-wrap-reverse
  3. This is fw-wrap-reverse
  4. This is fw-wrap-reverse
  5. This is fw-wrap-reverse
  6. This is fw-wrap-reverse
  7. This is fw-wrap-reverse
  8. This is fw-wrap-reverse

flex-wrap (sm)

  1. This is fw-nowrap-sm
  2. This is fw-nowrap-sm
  3. This is fw-nowrap-sm
  4. This is fw-nowrap-sm
  5. This is fw-nowrap-sm
  6. This is fw-nowrap-sm
  7. This is fw-nowrap-sm
  8. This is fw-nowrap-sm
  1. This is fw-wrap-sm
  2. This is fw-wrap-sm
  3. This is fw-wrap-sm
  4. This is fw-wrap-sm
  5. This is fw-wrap-sm
  6. This is fw-wrap-sm
  7. This is fw-wrap-sm
  8. This is fw-wrap-sm
  1. This is fw-wrap-reverse-sm
  2. This is fw-wrap-reverse-sm
  3. This is fw-wrap-reverse-sm
  4. This is fw-wrap-reverse-sm
  5. This is fw-wrap-reverse-sm
  6. This is fw-wrap-reverse-sm
  7. This is fw-wrap-reverse-sm
  8. This is fw-wrap-reverse-sm

flex-wrap (md)

  1. This is fw-nowrap-md
  2. This is fw-nowrap-md
  3. This is fw-nowrap-md
  4. This is fw-nowrap-md
  5. This is fw-nowrap-md
  6. This is fw-nowrap-md
  7. This is fw-nowrap-md
  8. This is fw-nowrap-md
  1. This is fw-wrap-md
  2. This is fw-wrap-md
  3. This is fw-wrap-md
  4. This is fw-wrap-md
  5. This is fw-wrap-md
  6. This is fw-wrap-md
  7. This is fw-wrap-md
  8. This is fw-wrap-md
  1. This is fw-wrap-reverse-md
  2. This is fw-wrap-reverse-md
  3. This is fw-wrap-reverse-md
  4. This is fw-wrap-reverse-md
  5. This is fw-wrap-reverse-md
  6. This is fw-wrap-reverse-md
  7. This is fw-wrap-reverse-md
  8. This is fw-wrap-reverse-md

flex-wrap (lg)

  1. This is fw-nowrap-lg
  2. This is fw-nowrap-lg
  3. This is fw-nowrap-lg
  4. This is fw-nowrap-lg
  5. This is fw-nowrap-lg
  6. This is fw-nowrap-lg
  7. This is fw-nowrap-lg
  8. This is fw-nowrap-lg
  1. This is fw-wrap-lg
  2. This is fw-wrap-lg
  3. This is fw-wrap-lg
  4. This is fw-wrap-lg
  5. This is fw-wrap-lg
  6. This is fw-wrap-lg
  7. This is fw-wrap-lg
  8. This is fw-wrap-lg
  1. This is fw-wrap-reverse-lg
  2. This is fw-wrap-reverse-lg
  3. This is fw-wrap-reverse-lg
  4. This is fw-wrap-reverse-lg
  5. This is fw-wrap-reverse-lg
  6. This is fw-wrap-reverse-lg
  7. This is fw-wrap-reverse-lg
  8. This is fw-wrap-reverse-lg

flex-direction

1 This is fd-row. 2 This is fd-row.
1 This is fd-row-reverse. 2 This is fd-row-reverse.
1 This is fd-column. 2 This is fd-column.
1 This is fd-column-reverse. 2 This is fd-column-reverse.

flex-direction (sm)

1 This is fd-row-sm. 2 This is fd-row-sm.
1 This is fd-row-reverse-sm. 2 This is fd-row-reverse-sm.
1 This is fd-column-sm. 2 This is fd-column-sm.
1 This is fd-column-reverse-sm. 2 This is fd-column-reverse-sm.

flex-direction (md)

1 This is fd-row-md. 2 This is fd-row-md.
1 This is fd-row-reverse-md. 2 This is fd-row-reverse-md.
1 This is fd-column-md. 2 This is fd-column-md.
1 This is fd-column-reverse-md. 2 This is fd-column-reverse-md.

flex-direction (lg)

1 This is fd-row-lg. 2 This is fd-row-lg.
1 This is fd-row-reverse-lg. 2 This is fd-row-reverse-lg.
1 This is fd-column-lg. 2 This is fd-column-lg.
1 This is fd-column-reverse-lg. 2 This is fd-column-reverse-lg.

gap

This is g-0. This is g-0.
This is g-1. This is g-1.
This is g-2. This is g-2.
This is g-3. This is g-3.
This is g-4. This is g-4.
This is g-5. This is g-5.

gap (sm)

This is g-0. This is g-0.
This is g-1. This is g-1.
This is g-2. This is g-2.
This is g-3. This is g-3.
This is g-4. This is g-4.
This is g-5. This is g-5.

gap (md)

This is g-0. This is g-0.
This is g-1. This is g-1.
This is g-2. This is g-2.
This is g-3. This is g-3.
This is g-4. This is g-4.
This is g-5. This is g-5.

gap (lg)

This is g-0. This is g-0.
This is g-1. This is g-1.
This is g-2. This is g-2.
This is g-3. This is g-3.
This is g-4. This is g-4.
This is g-5. This is g-5.

justify-content

This is jc-center. This is jc-center.
This is jc-flex-end. This is jc-flex-end.
This is jc-flex-start. This is jc-flex-start.
This is jc-normal. This is jc-normal.
This is jc-space-around. This is jc-space-around.
This is jc-space-between. This is jc-space-between.
This is jc-space-evenly. This is jc-space-evenly.
This is jc-stretch. This is jc-stretch.

justify-content (sm)

This is jc-center-sm. This is jc-center-sm.
This is jc-flex-end-sm. This is jc-flex-end-sm.
This is jc-flex-start-sm. This is jc-flex-start-sm.
This is jc-normal-sm. This is jc-normal-sm.
This is jc-space-around-sm. This is jc-space-around-sm.
This is jc-space-between-sm. This is jc-space-between-sm.
This is jc-space-evenly-sm. This is jc-space-evenly-sm.
This is jc-stretch-sm. This is jc-stretch-sm.

justify-content (md)

This is jc-center-md. This is jc-center-md.
This is jc-flex-end-md. This is jc-flex-end-md.
This is jc-flex-start-md. This is jc-flex-start-md.
This is jc-normal-md. This is jc-normal-md.
This is jc-space-around-md. This is jc-space-around-md.
This is jc-space-between-md. This is jc-space-between-md.
This is jc-space-evenly-md. This is jc-space-evenly-md.
This is jc-stretch-md. This is jc-stretch-md.

justify-content (lg)

This is jc-center-lg. This is jc-center-lg.
This is jc-flex-end-lg. This is jc-flex-end-lg.
This is jc-flex-start-lg. This is jc-flex-start-lg.
This is jc-normal-lg. This is jc-normal-lg.
This is jc-space-around-lg. This is jc-space-around-lg.
This is jc-space-between-lg. This is jc-space-between-lg.
This is jc-space-evenly-lg. This is jc-space-evenly-lg.
This is jc-stretch-lg. This is jc-stretch-lg.

align-items

This is ai-center. This is ai-center.
This is ai-baseline. This is ai-baseline.
This is ai-flex-start. This is ai-flex-start.
This is ai-flex-end. This is ai-flex-end.
This is ai-stretch. This is ai-stretch.

align-items (sm)

This is ai-center-sm. This is ai-center-sm.
This is ai-baseline-sm. This is ai-baseline-sm.
This is ai-flex-start-sm. This is ai-flex-start-sm.
This is ai-flex-end-sm. This is ai-flex-end-sm.
This is ai-stretch-sm. This is ai-stretch-sm.

align-items (md)

This is ai-center-md. This is ai-center-md.
This is ai-baseline-md. This is ai-baseline-md.
This is ai-flex-start-md. This is ai-flex-start-md.
This is ai-flex-end-md. This is ai-flex-end-md.
This is ai-stretch-md. This is ai-stretch-md.

align-items (lg)

This is ai-center-lg. This is ai-center-lg.
This is ai-baseline-lg. This is ai-baseline-lg.
This is ai-flex-start-lg. This is ai-flex-start-lg.
This is ai-flex-end-lg. This is ai-flex-end-lg.
This is ai-stretch-lg. This is ai-stretch-lg.

align-self

This has no class. This is as-auto.
This has no class. This is as-baseline.
This has no class. This is as-center.
This has no class. This is as-flex-end.
This has no class. This is as-flex-start.
This has no class. This is as-stretch.

align-self (sm)

This has no class. This is as-auto-sm.
This has no class. This is as-baseline-sm.
This has no class. This is as-center-sm.
This has no class. This is as-flex-end-sm.
This has no class. This is as-flex-start-sm.
This has no class. This is as-stretch-sm.

align-self (md)

This has no class. This is as-auto-md.
This has no class. This is as-baseline-md.
This has no class. This is as-center-md.
This has no class. This is as-flex-end-md.
This has no class. This is as-flex-start-md.
This has no class. This is as-stretch-md.

align-self (lg)

This has no class. This is as-auto-lg.
This has no class. This is as-baseline-lg.
This has no class. This is as-center-lg.
This has no class. This is as-flex-end-lg.
This has no class. This is as-flex-start-lg.
This has no class. This is as-stretch-lg.