Stack Description
Stack using fixed height and put the content in middle vertical position. With responsive features to break in certain windows width, stack divided into 3 positions:
- Left
- Center
- Right
Main Stack Left
Stacking at left side, content will break at window width < 768px
Stack Item 1
Stack Item 2
Stack Item 3
Main Stack Right
Stacking at right side, content will break at window width < 768px
Stack Item 1
Stack Item 2
Stack Item 3
Main Stack Center
Stacking at center, content will break at window width < 768px
Stack Item 1
Stack Item 2
Stack Item 3
Main Stack Left & Stack Right
Stacking at left (as main) and right side, content will break at window width < 768px
Stack Item 1
Stack Item 2
Stack Item 3
Stack Item 1
Stack Item 2
Stack Item 3
Stack Left, Stack Center, & Stack Right
Stacking at all 3 sides, content will break at window width < 768px
Stack Item 1
Stack Item 2
Stack Item 3
USUALLY LOGO
Stack Item 1
Stack Item 2
Stack Item 3
Full Width Stack
Full Width Stack without needs to declare the width
Stack Item 1
Stack Item 2
Stack Item 3
Used in Vertical Block
Compilation of several stack group can be used well in vertical blocks content
USUALLY LOGO
Stack Item 1
Stack Item 2
Stack Item 3
Usually Copyright
Stack Size
Stacking at left side, content will break at window width < 768px
XSMALL
stack-xs
Stack Item 1
Stack Item 2
Stack Item 3
SMALL
stack-sm
Stack Item 1
Stack Item 2
Stack Item 3
MEDIUM
stack-md
Stack Item 1
Stack Item 2
Stack Item 3
LARGE
stack-lg
Stack Item 1
Stack Item 2
Stack Item 3
XLARGE
stack-xl
Stack Item 1
Stack Item 2
Stack Item 3
Responsive Classes
| Functions | Placing |
Extra small <544px |
Small <768px |
Medium <992px |
Large <1200px |
Extra large >=1200px |
|---|---|---|---|---|---|---|
| break stack group to vertical blocks |
beside
stack-group
|
stack-break-xs
|
stack-break-sm
|
stack-break-md
|
stack-break-lg
|
stack-break-xl
|
| break stack items inside stack group to vertical blocks |
beside
stack-group
|
stack-break-content-xs
|
stack-break-content-sm
|
stack-break-content-md
|
stack-break-content-lg
|
stack-break-content-xl
|
| set height of stack item to auto |
beside
stack-item
|
stack-auto-xs
|
stack-auto-sm
|
stack-auto-md
|
stack-auto-lg
|
stack-auto-xl
|
