lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsPopoversLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanColumn ResizeDraggable ColumnsDraggable RowsRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

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>
Next: Grid Layout