Block layouts define a collection of elements stacked vertically. Alignemnt of items can be controlled as a group or independently for each item.
1
2
3
4
<div bp-layout="block gap:sm">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Gap
Gaps allow control of white space between layout items. Gaps can be set via t-shirt sizes, xs
, sm
, md
, lg
, xl
.
Extra Small
1
2
3
4
<div bp-layout="block gap:xs">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Small
1
2
3
4
<div bp-layout="block gap:sm">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Medium
1
2
3
4
<div bp-layout="block gap:md">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Large
1
2
3
4
<div bp-layout="block gap:lg">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Extra Large
1
2
3
4
<div bp-layout="block gap:xl">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Align
Aligns enable control of the item Align within the layout container. Block Aligns run along the vertical axis and inline Aligns run ont the horizontal axis.
Center
1
2
<div bp-layout="block gap:sm center" style="min-height: 300px">
<div>1</div>
<div>2</div>
</div>
Block Start
1
2
<div bp-layout="block gap:sm block:start" style="min-height: 300px">
<div>1</div>
<div>2</div>
</div>
Block End
1
2
<div bp-layout="block gap:sm block:end" style="min-height: 300px">
<div>1</div>
<div>2</div>
</div>
Block Center
1
2
<div bp-layout="block gap:sm block:center" style="min-height: 300px">
<div>1</div>
<div>2</div>
</div>
Inline Start
1
2
<div bp-layout="block gap:sm inline:start">
<div>1</div>
<div>2</div>
</div>
Inline End
1
2
<div bp-layout="block gap:sm inline:end">
<div>1</div>
<div>2</div>
</div>
Inline Center
1
2
<div bp-layout="block gap:sm inline:center">
<div>1</div>
<div>2</div>
</div>
Item Align
Item Align similar to Aligns allow individual items to align separately from the rest of the items within the layout group.
Center
1
<div bp-layout="block gap:sm">
<div bp-layout="center">1</div>
</div>
Block Start
1
2
3
<div bp-layout="block gap:sm block:end" style="min-height: 350px">
<div bp-layout="block:start">1</div>
<div>2</div>
<div>3</div>
</div>
Block End
1
2
3
<div bp-layout="block gap:sm" style="min-height: 350px">
<div>1</div>
<div>2</div>
<div bp-layout="block:end">3</div>
</div>
Block Center
1
<div bp-layout="block gap:sm" style="min-height: 250px">
<div bp-layout="block:center">1</div>
</div>
Inline Start
1
2
3
<div bp-layout="block gap:sm">
<div>1</div>
<div bp-layout="inline:start">2</div>
<div>3</div>
</div>
Inline Center
1
2
3
<div bp-layout="block gap:sm">
<div>1</div>
<div bp-layout="inline:center">2</div>
<div>3</div>
</div>
Inline End
1
2
3
<div bp-layout="block gap:sm">
<div>1</div>
<div bp-layout="inline:end">2</div>
<div>3</div>
</div>
Stretch
Stretch Aligns allow items to fill the space within the parent layout container.
1
2
<div bp-layout="block gap:sm align:stretch">
<div>1</div>
<div>2</div>
</div>
Inline Stretch
1
2
<div bp-layout="block gap:sm align:inline-stretch">
<div>1</div>
<div>2</div>
</div>
Block Stretch
1
2
<div bp-layout="block gap:sm align:block-stretch">
<div>1</div>
<div>2</div>
</div>