Responsive Rule

The Responsive Rule Line is a dynamic component that adjusts its orientation based on the viewport. It transitions between vertical and horizontal lines, providing a responsive solution for content separation.

Horizontal to Vertical

First contents
Second contents
vue
<template>
 <Row col="sm">
  <Col
   col="sm"
   text-alignment="end"
  >
   <b-div
    headings="4"
    margin="b-0"
   >
    First contents
   </b-div>
  </Col>
  <ResponsiveRule vertical="sm" />
  <Col
   col="sm"
   text-alignment="start"
  >
   <b-div
    headings="4"
    margin="b-0"
    text-color="success"
   >
    Second contents
   </b-div>
  </Col>
 </Row>
</template>

See Also

Vertical rule

Heading block

Reboot horizontal rules