What are some examples of using Bootstrap Vue for grid layouts?

What are some examples of using Bootstrap Vue for grid layouts?

Bootstrap Vue provides a powerful grid system that allows you to create responsive layouts easily. You can use components like <b-container>, <b-row>, and <b-col> to structure your grid.

Can you show me a simple example of a grid layout?

Sure! Here's a basic 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>

This will create two equal columns side by side.

How can I make the columns stack on smaller screens?

You can use the cols prop with responsive breakpoints. For example:

<b-col cols="12" md="6">Column 1</b-col>
<b-col cols="12" md="6">Column 2</b-col>

This will stack the columns on small screens and display them side by side on medium and larger screens.

Are there any examples of using offsets in the grid?

Yes! You can use the offset prop to create space. For example:

<b-row>
  <b-col cols="6" offset="3">Centered Column</b-col>
</b-row>

This will center the column by offsetting it.