Inline

Inline layout

By default, child elements of <Inline> will be displayed top-aligned to the left, with a 12px gap.

Elements will wrap to next line if there's not enough room on one line.

<Inline>[Elements]</Inline>

Custom gap

Use the gap property to set custom spacing, accepts a number in px or a CSS length string.

<Inline gap={40}>

Vertical alignment

When you have elements with differing heights, the default behaviour is to align them to the top.

Use the align prop to align items to bottom, center, or top (default).

<Inline align="center" />

<Inline align="bottom" />

Inline.Separator

The <Inline.Separator /> component will push elements away from it.

<Inline>
  <div>...</div>
  <Inline.Separator />
  <div>Will be pushed to the right</div>
</Inline>

Split

Placed between elements will push them to each side.

Three-way split

Having multiple separators will create equal spaces.

Right-aligned

A separator placed as first child will push siblings to the right.

Inline.Stretch

Wrapping an element in <Inline.Stretch> will stretch it to fill available space.

<Inline>
  <Inline.Stretch>
    <div>Element in Stretch</div>
  </Inline.Stretch>
  <div>Element</div>
</Inline>

Avoid extra DOM node

Using <Inline.Stretch> introduces an extra element in the document tree. If you want to avoid this you can use the .bfl-inline-stretch CSS class instead:

<Inline>
  <div className="bfl-inline-stretch">Element with .bfl-inline-stretch</div>
  <div>Element</div>
</Inline>

Responsive layout

The <Inline> component will attempt to wrap elements if there isn't enough width which is not ideal in most cases.

Instead, using our breakpoint CSS classes you can have different layouts displayed for certain screen widths.

Let's say you have three buttons, which should be stacked on top of eachother in a Grid for the smallest screens (up to small breakpoint, 600px screen width), but Inline for wider screens.

Resize your window (to below 600px width) to see it in action:

<Grid className='to-small'>
  <Button>Button in Grid</Button>
  <Button>Button in Grid</Button>
  <Button>Button in Grid</Button>
</Grid>
<Inline className='from-small'>
  <Button>Inline Button</Button>
  <Button>Inline Button</Button>
  <Button>Inline Button</Button>
</Inline>

More examples

Buttons

Input and button

Labelled inputs are taller than a button, so lets align='bottom' them.

Checkboxes