Inline
Place, stretch and separate inline elements
Inline
Go to top
Also see /react/inline
React Inline component
.bf-inline is a CSS helper which uses display: flex to place items on a row.
By default, child elements of .bf-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.
Element
Element
Custom gap
Control spacing with the gap property (maybe in an external css file?)
Element
Element
Vertical alignment
Since we're using flexbox, you can vertically align items using
align-items.
The default value is set to start:
Element
with
multiple
lines
with
multiple
lines
Element
With align-items: center:
Element
with
multiple
lines
with
multiple
lines
Element
With align-items: end:
Element
with
multiple
lines
with
multiple
lines
Element
Space
Create space on the left-hand side of an inline element with
.bf-inline-space
Space
Element
Element
Space
Element
Space
Element
Element
Element
Space
Element
Space
Space
Stretch
The .bf-inline-stretch class will make an element take up available width.
Stretch
Element
Element
Stretch
Element
Stretch
Element
Stretch
Stretch
Stretch