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>