Usage
Use BB Stack classes to group elements horizontally or vertically with consistent spacing, alignment, and responsive behavior. By default, elements are not wrapped to the next line and center-aligned.
<!-- Basic horizontal stack -->
<div class="bb-stack">
<div class="bb-stack__item">
<div class="bb-avatar">
<span class="bb-avatar__initials">XY</span>
</div>
</div>
<div class="bb-stack__item bb-stack__item--fill">
<div><strong>Title</strong></div>
<div>x</div>
<div><span class="text-body-secondary">Muted</span></div>
</div>
<div class="bb-stack__item">
<button class="btn btn-sm btn-success btn-circle">
<i class="bb-icon bb-icon-check"></i>
</button>
<button class="btn btn-sm btn-danger btn-circle">
<i class="bb-icon bb-icon-times"></i>
</button>
</div>
</div>
<!-- Vertical stack -->
<div class="bb-stack bb-stack--vertical">
<div class="bb-stack__item">Item 1</div>
<div class="bb-stack__item">Item 2</div>
</div>
<!-- Stack with responsive wrapping -->
<div class="bb-stack bb-stack--wrap">
<div class="bb-stack__item">Item 1</div>
<div class="bb-stack__break bb-stack__break--sm-down"></div>
<div class="bb-stack__item">Item 2</div>
</div>
Available classes
Container classes
- bb-stack: Main flexbox container for horizontal layout
- bb-stack--vertical: Column layout flex-direction: column)
- bb-stack--row-reverse: Reverse row layout (flex-direction: row-reverse)
Alignment classes
- bb-stack--center: Center content (justify-content: center)
- bb-stack--space-between: Space between items (justify-content: space-between)
- bb-stack--align-top: Align to top (align-items: flex-start)
- bb-stack--align-bottom: Align to bottom (align-items: flex-end)
- bb-stack--align-baseline: Baseline alignment (align-items: baseline)
Wrapping classes
bb-stack--wrap: Enable flex-wrap
Item classes
- bb-stack__item: Standard stack item with right margin
- bb-stack__box-item: Alternative item with centered margins for modal layouts
- bb-stack__break: Line break element (flex-basis: 100%, height: 0)
<!-- Vertical on small screens, horizontal on larger -->
<div class="bb-stack bb-stack--vertical-sm-down">
<div class="bb-stack__item">Item 1</div>
<div class="bb-stack__item">Item 2</div>
</div>
<!-- Responsive breaks -->
<div class="bb-stack bb-stack--wrap">
<div class="bb-stack__item">Item 1</div>
<div class="bb-stack__break bb-stack__break--md-down"></div>
<div class="bb-stack__item">Item 2</div>
</div>
Item modifier classes
- bb-stack__item--fill: Fill available space (flex-basis: 1%, flex-grow: 1)
- bb-stack__item--no-shrink Prevent shrinking (flex-shrink: 0)
- bb-stack__item--bottom-space: Add bottom padding and max-height for error messages
- bb-stack__item--align-top: Align individual item to top (align-self: flex-start)
- bb-stack__item--align-bottom: Align individual item to bottom (align-self: flex-end)
- bb-stack__item--push-right: Push item right (margin-inline-start: auto)
- bb-stack__item--push-left: Push item left (margin-inline-end: auto)
- bb-stack__item--spacing-none: Remove margin from item
<!-- Error message handling with bottom space -->
<div class="bb-stack__item--bottom-space">
<bb-input-text-ui
formControlName="companyId"
label="Company ID"
aria-describedby="ach-blocker-company-id-required-error">
</bb-input-text-ui>
<bb-input-validation-message-ui
role="alert"
[showErrors]="achBlockerRuleForm.get('companyId')?.errors?.required">
Company ID is required.
</bb-input-validation-message-ui>
</div>
<!-- Vertical alignment variations -->
<div class="bb-stack bb-stack--align-top">
<div class="bb-stack__item">
<div class="bb-avatar">
<span class="bb-avatar__initials">XY</span>
</div>
</div>
<div class="bb-stack__item bb-stack__item--align-top">
.bb-stack__item--align-top
</div>
<div class="bb-stack__item bb-stack__item--align-bottom">
.bb-stack__item--align-bottom
</div>
</div>
Density classes
- bb-stack--density-none: Remove all spacing between items
- bb-stack--density-xs: Extra small spacing between items
- bb-stack--density-sm: Small spacing between items
- bb-stack--density-md: Medium spacing between items (default)
- bb-stack--density-lg: Large spacing between items
- bb-stack--density-xl: Extra large spacing between items
Row gap glasses (for vertical stacks)
- bb-stack--row-gap-xs: Extra small vertical spacing
- bb-stack--row-gap-sm: Small vertical spacing
- bb-stack--row-gap-md: Medium vertical spacing
- bb-stack--row-gap-lg: Large vertical spacing
- bb-stack--row-gap-xl: Extra large vertical spacing
Bootstrap integration
BB Stack integrates seamlessly with Bootstrap's grid system:
- bb-stack.row: Integration with Bootstrap row system
- bb-stack.form-row: Integration with Bootstrap form row system
<div class="bb-stack row">
<div class="bb-stack__item col-6">
<div class="bb-stack">
<div class="bb-avatar bb-stack__item">
<span class="bb-avatar__initials">XY</span>
</div>
<div class="bb-stack__item">
<div><strong>Amazon</strong></div>
<div><span class="text-body-secondary">http://amazon.com</span></div>
</div>
</div>
</div>
<div class="bb-stack__item col-2">
<div>3 accounts</div>
</div>
<div class="bb-stack__item col-2">
<div><strong>Expire date</strong></div>
</div>
<div class="bb-stack__item col-md-1 col-4">
<div class="badge badge-primary">badge</div>
</div>
<div class="bb-stack__item col-md-1 col-2">
<i class="bb-icon bb-icon-toggle-down"></i>
</div>
</div>
Spacing modifier classes
- bb-stack__item--spacing-xs: Extra small margin after item
- bb-stack__item--spacing-sm: Small margin after item
- bb-stack__item--spacing-md: Medium margin after item
- bb-stack__item--spacing-lg: Large margin after item
- bb-stack__item--spacing-xl: Extra large margin after item
- bb-stack__box-item--spacing-xs through bb-stack__box-item--spacing-xl: Spacing variants for box items
- bb-stack__break--spacing-xs through bb-stack__break--spacing-xl: Spacing variants for break elements
<!-- Controlling spacing between elements -->
<div class="bb-stack bb-stack--density-sm">
<div class="bb-stack__item">default (sm)</div>
<div class="bb-stack__item bb-stack__item--spacing-sm">--spacing-sm</div>
<div class="bb-stack__item bb-stack__item--spacing-md">--spacing-md</div>
<div class="bb-stack__item bb-stack__item--spacing-lg">--spacing-lg</div>
<div class="bb-stack__item bb-stack__item--spacing-none">--spacing-none</div>
<div class="bb-stack__item">default (end)</div>
</div>
Responsive behavior
BB Stack supports responsive variants for many classes using the format bb-stack--{modifier}-{breakpoint}[-up|-down] where breakpoints are sm, md, lg, xl.
Implementation notes
- The .bb-stack class automatically sets width: 100% unless it has Bootstrap column classes col-*).
- Spacing is controlled through the $spacer-md variable and the spacing map $spacing-map).
- Responsive breakpoint variants are available for many modifiers (generated via SCSS loops).
- The bb-stack__box-item is specifically designed for modal image lists and similar centered layouts.
- The SCSS uses padding-block-end: $spacer-xl for .bb-stack__item--bottom-space (modern logical property).