What are some examples of using Bootstrap Vue's grid system?

Can you show me some examples of using Bootstrap Vue's grid system?

Sure! Bootstrap Vue's grid system is based on Flexbox and allows you to create responsive layouts. For example, you can use the <b-container> and <b-row> components to create a grid.

How do I create a simple two-column layout?

You can create a two-column layout by using two <b-col> components inside a <b-row>. Here's a simple example:

<b-container>
  <b-row>
    <b-col cols="6">Column 1</b-col>
    <b-col cols="6">Column 2</b-col>
  </b-row>
</b-container>

What if I want to make one column larger than the other?

You can adjust the cols attribute to specify different widths. For instance, if you want the first column to take up 8 parts and the second 4 parts, you can do:

<b-container>
  <b-row>
    <b-col cols="8">Column 1</b-col>
    <b-col cols="4">Column 2</b-col>
  </b-row>
</b-container>

Can I use offsets to center a column?

Yes, you can use the offset attribute. For example, to center a column, you can use:

<b-container>
  <b-row>
    <b-col cols="4" offset="4">Centered Column</b-col>
  </b-row>
</b-container>