Containers

Container components for scaffolding basic structure of the page:

<b-container>: wrapper container. When nested with a <b-header> or <b-footer>, all its child elements will be vertically arranged. Otherwise horizontally.

<b-header>: container for headers.

<b-aside>: container for side sections (usually a side nav).

<b-main>: container for main sections.

<b-footer>: container for footers.

<b-spacer>: spacer.

<b-divider>: section divider horizontal or vertical.

TIP

These components use flex for layout, so please make sure your browser supports it. Besides, <b-container>'s direct child elements have to be one or more of the latter four components. And father element of the latter four components must be a <b-container>.

Common layouts

Divider

Spacer

Container Attributes

Attribute	Description	Type	Accepted Values	Default
direction	layout direction for child elements	string	horizontal / vertical	vertical when nested with b-header or b-footer; horizontal otherwise
header-height	set header height	string / number	—	—
aside-width	set aside width	string /number	—	—
off-canvas	set offcanvas state	boolean	—	false

Container Slots

Name	Description	Subtags
—	customize default content	Container / Header / Aside / Main / Footer

Header Attributes

Attribute	Description	Type	Accepted Values	Default
height	height of the header	string	—	60px
fixed	fixed position	boolean	—	false
shadow	add shadow	boolean	—	false
border	add border bottom	boolean	—	false

Header Slots

Name	Description
—	customize default content

Aside Attributes

Attribute	Description	Type	Accepted Values	Default
width	width of the side section	string	—	300px

Aside Slots

Name	Description
—	customize default content

Main Attributes

Attribute	Description	Type	Accepted Values	Default
fluid	fluid width	boolean	—	false

Main Slots

Name	Description
—	customize default content

Footer Attributes

Attribute	Description	Type	Accepted Values	Default
height	height of the footer	string	—	60px

Footer Slots

Name	Description
—	customize default content

Divider Attributes

Attribute	Description	Type	Accepted Values	Default
vertical	vertical direction	boolean	—	false
content-position	position of inner content	string	center / left / right	center
no-spacing	no spacing	boolean	—	false

Divider Slots

Name	Description
—	customize default content

Spacer Attributes

Attribute	Description	Type	Accepted Values	Default
width	horizontal spacing	string / number	—	0
height	vertical spacing	string / number	—	0