Flex Box

The flex-box component is very useful in making simple flex box fast. It can be used in a lot of situations in a lot of ways. One such way is to show action buttons for a card or modal.

TIP

This component doesn't provide margin to child elements, so make sure to add them

<template> <div class="center">  <b-flex>  <b-btn color="primary">Accept</b-btn>  <b-btn ghost>Cancel</b-btn>  </b-flex> </div> </template> 

Expand

Copy

Spacer

b-spacer is a basic yet versatile spacing component used to distribute remaining width in-between a parents child components. When placing a single b-spacer before or after the child components, the components will push to the right and left of its container. When more than one b-spacer's are used between multiple components, the remaining width is evenly distributed between each spacer.

<template> <div class="center"> <b-card width="500px">  <b-flex>  <b-btn color="danger">No</b-btn>  <b-spacer></b-spacer>  <b-btn color="primary">Accept</b-btn>  <b-spacer></b-spacer>  <b-btn color="secondary">Cancel</b-btn>  </b-flex> </b-card>  </div> </template> 

Expand

Copy