Layout

A flexible 24-column grid layout system.

Basic Usage

Col - 24

Col - 12

Col - 12

Col - 8

Col - 8

Col - 8

Col - 6

Col - 6

Col - 6

Col - 6

Col - 4

Col - 4

Col - 4

Col - 4

Col - 4

Col - 4

<template>
  <div class="demo-row" v-for="row in demoList">
    <bp-row>
      <bp-col v-for="col in row" :span="col">
        <div class="demo">Col - {{ col }}</div>
      </bp-col>
    </bp-row>
  </div>
</template>

<script setup lang="ts">
const demoList = [[24], [12, 12], [8, 8, 8], [6, 6, 6, 6], [4, 4, 4, 4, 4, 4]];
</script>

<style lang="less" scoped>
.demo-row {
  background-color: #f0f0f0;

  &:not(:last-child) {
    margin-bottom: 12px;
  }

  .demo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
  }

  .bp-col:nth-child(2n) {
    .demo {
      background-color: #4096ff;
    }
  }

  .bp-col:nth-child(2n + 1) {
    .demo {
      background-color: #1677ff;
    }
  }
}
</style>

Offset

Offset columns with the offset prop.

col - 4

offset - 10 & col - 10

offset - 6 & col - 12

<template>
  <div class="demo-row">
    <bp-row>
      <bp-col :span="4">
        <div class="demo">col - 4</div>
      </bp-col>
      <bp-col :span="10" :offset="10">
        <div class="demo">offset - 10 & col - 10</div>
      </bp-col>
    </bp-row>
  </div>

  <div class="demo-row">
    <bp-row>
      <bp-col :span="12" :offset="6">
        <div class="demo">offset - 6 & col - 12</div>
      </bp-col>
    </bp-row>
  </div>
</template>

<style lang="less" scoped>
.demo-row {
  background-color: #f0f0f0;

  &:not(:last-child) {
    margin-bottom: 12px;
  }

  .demo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    color: #fff;
    font-size: 12px;
    background-color: #1677ff;
    text-align: center;
    font-weight: 600;
  }
}
</style>

Gutter

Set spacing between columns with gutter (default 0).

col - 4

col - 6

col - 8

col - 6

<template>
  <div class="demo-row">
    <bp-row :gutter="10">
      <bp-col :span="4">
        <div class="demo">col - 4</div>
      </bp-col>
      <bp-col :span="6">
        <div class="demo">col - 6</div>
      </bp-col>
      <bp-col :span="8">
        <div class="demo">col - 8</div>
      </bp-col>
      <bp-col :span="6">
        <div class="demo">col - 6</div>
      </bp-col>
    </bp-row>
  </div>
</template>

<style lang="less" scoped>
.demo-row {
  background-color: #f0f0f0;

  .demo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    color: #fff;
    font-size: 12px;
    background-color: #1677ff;
    text-align: center;
    font-weight: 600;
  }
}
</style>

Responsive

Adapt columns with xs, sm, md, lg, and xl.

xs=24 sm=20 md=16 lg=10 xl=8

<template>
  <div class="demo-row">
    <bp-row>
      <bp-col :xs="24" :sm="20" :md="16" :lg="10" :xl="8">
        <div class="demo">xs=24 sm=20 md=16 lg=10 xl=8</div>
      </bp-col>
    </bp-row>
  </div>
</template>

<style lang="less" scoped>
.demo-row {
  background-color: #f0f0f0;

  &:not(:last-child) {
    margin-bottom: 12px;
  }

  .demo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    font-weight: 600;
  }

  .bp-col:nth-child(2n) {
    .demo {
      background-color: #4096ff;
    }
  }

  .bp-col:nth-child(2n + 1) {
    .demo {
      background-color: #1677ff;
    }
  }
}
</style>

Row Props

gutter	Gutter	StringNumber	-	-
justify	Horizontal alignment	Justify	start	-
align	Vertical alignment	Align	start	-

Col Props

span	Span (1–24)	Number	24	-
offset	Offset	Number	0	-
xs	Responsive config under 768px	ColResponsive	-	-
sm	Responsive config ≥768px	ColResponsive	-	-
md	Responsive config ≥992px	ColResponsive	-	-
lg	Responsive config ≥1200px	ColResponsive	-	-
xl	Responsive config ≥1920px	ColResponsive	-	-

Row Slots

default

Row content

-

-

Col Slots

default

Col content

-

-