Hero Row

It is used as a first-level child of a Container, along with Row and other elements, to constrain the width of the content or to center it.

This is a component that contains a single Col inside a Row.

Examples

Text Alignment

Key Advantages

Why our 50,000+ users trust our platform

vue
<template>
 <HeroRow
  text-alignment="center"
  margin="y-5"
 >
  <b-p headings="4">
   Key Advantages
  </b-p>
  <b-p display-headings="5">
   Why our 50,000+ users trust our platform
  </b-p>
 </HeroRow>
</template>

Constrained width

Key Advantages

Why our 50,000+ users trust our platform

vue
<template>
 <HeroRow
  size="md-10 lg-8"
  margin="y-5"
 >
 <b-p headings="4">
   Key Advantages
  </b-p>
  <b-p display-headings="5">
   Why our 50,000+ users trust our platform
  </b-p>
 </HeroRow>
</template>

Justify Content

Key Advantages

Why our 50,000+ users trust our platform

vue
<template>
 <HeroRow
  justify-content="start"
  size="md-8"
  margin="y-5"
 >
 <b-p headings="4">
   Key Advantages
  </b-p>
  <b-p display-headings="5">
   Why our 50,000+ users trust our platform
  </b-p>
 </HeroRow>
</template>

See Also