Inline layouts define a collection of elements in a horizontal list. Alignemnt of items can be controlled as a group or independently for each item.
1
2
3
4
<div bp-layout="inline 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="inline gap:xs">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Small
1
2
3
4
<div bp-layout="inline gap:sm">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Medium
1
2
3
4
<div bp-layout="inline gap:md">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Large
1
2
3
4
<div bp-layout="inline gap:lg">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Extra Large
1
2
3
4
<div bp-layout="inline gap:xl">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Alignment
Alignments enable control of the item alignment within the layout container. Block alignments run along the vertical axis and inline alignments run ont the horizontal axis.
Center
1
2
<div bp-layout="inline gap:sm center">
<div>1</div>
<div>2</div>
</div>
Inline Start
1
2
<div bp-layout="inline gap:sm inline:start">
<div>1</div>
<div>2</div>
</div>
Inline End
1
2
<div bp-layout="inline gap:sm inline:end">
<div>1</div>
<div>2</div>
</div>
Inline Center
1
2
<div bp-layout="inline gap:sm inline:center">
<div>1</div>
<div>2</div>
</div>
Block Start
1
2
<div bp-layout="inline gap:sm block:start">
<div>1</div>
<div>2</div>
</div>
Block Center
1
2
<div bp-layout="inline gap:sm block:center">
<div>1</div>
<div>2</div>
</div>
Block End
1
2
<div bp-layout="inline gap:sm block:end">
<div>1</div>
<div>2</div>
</div>
Item Alignment
Item alignment similar to alignments allow individual items to align separately from the rest of the items within the layout group.
Center
1
<div bp-layout="inline gap:sm">
<div bp-layout="center">1</div>
</div>
Inline Start
1
<div bp-layout="inline gap:sm">
<div bp-layout="inline:start">1</div>
</div>
Inline End
1
<div bp-layout="inline gap:sm">
<div bp-layout="inline:end">1</div>
</div>
Inline Center
1
<div bp-layout="inline gap:sm">
<div bp-layout="inline:center">1</div>
</div>
Block Start
1
<div bp-layout="inline gap:sm">
<div bp-layout="block:start">1</div>
</div>
Block End
1
<div bp-layout="inline gap:sm">
<div bp-layout="block:end">1</div>
</div>
Block Center
1
<div bp-layout="inline gap:sm">
<div bp-layout="block:center">1</div>
</div>
Stretch
1
2
<div bp-layout="inline gap:sm stretch" style="height: 150px" demo>
<div>1</div>
<div>2</div>
</div>
Inline Stretch
1
2
<div bp-layout="inline gap:sm inline:stretch" style="height: 150px">
<div>1</div>
<div>2</div>
</div>
Block Stretch
1
2
<div bp-layout="inline gap:sm block:stretch" style="height: 150px">
<div>1</div>
<div>2</div>
</div>
Wrap
By default inline layouts allow items to wrap within the parent layout container.
1
2
3
4
5
6
<div bp-layout="inline gap:sm">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
No Wrap
1
2
3
4
5
6
<div bp-layout="inline gap:sm wrap:none">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>